@sberbusiness/triplex-next 1.41.1 → 1.43.0

package/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDot.js

@@ -1,20 +1,20 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useContext, useRef, useLayoutEffect, useEffect } from "react";
-import { u as uniqueId, c as clsx, l as lodashExports } from "../../../../chunks/vendor-CtuAQuEN.js";
-import { SliderExtendedUtils } from "../../SliderExtendedUtils.js";
-import { SliderExtendedContext } from "../../SliderExtendedContext.js";
-import { SliderExtendedMoveHandler } from "../SliderExtendedMoveHandler.js";
-import { SliderExtendedDotActions } from "./SliderExtendedDotActions.js";
-import { useSliderExtendedDotTabIndex } from "./useSliderExtendedDotTabIndex.js";
+import React__default, { useState, useContext, useRef, useCallback, useLayoutEffect } from "react";
+import { u as uniqueId, c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
 import { KeyDownListener } from "../../../KeyDownListener/KeyDownListener.js";
 import "../../../KeyDownListener/ComposedKeyDownListener.js";
 import { EVENT_KEY_CODES } from "../../../../utils/keyboard.js";
 import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
-const sliderExtendedDot = "sliderExtendedDot__7d0e0ccc";
-const focusedByClick = "focusedByClick__4908c999";
-const disabled = "disabled__aa25fd05";
-const dragByMouse = "dragByMouse__74a1033a";
-const lg = "lg__693b1a60";
+import { SliderExtendedContext } from "../../SliderExtendedContext.js";
+import { SliderExtendedUtils } from "../../SliderExtendedUtils.js";
+import { setForwardedRef } from "../../utils.js";
+import { SliderExtendedMoveHandler } from "../SliderExtendedMoveHandler.js";
+import { SliderExtendedDotActions } from "./SliderExtendedDotActions.js";
+const sliderExtendedDot = "sliderExtendedDot__39d1607a";
+const focusedByClick = "focusedByClick__4ae5f85d";
+const disabled = "disabled__95328055";
+const dragByMouse = "dragByMouse__769bae80";
+const lg = "lg__59f3d383";
 const styles = {
   sliderExtendedDot,
   focusedByClick,
@@ -23,203 +23,204 @@ const styles = {
   lg
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const SliderExtendedDot = ({
-  children,
-  className,
-  onBlur,
-  onChange,
-  onFocus,
-  onMouseDown,
-  onTouchStart,
-  value,
-  ...htmlSpanAttributes
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [isFocusedByClick, setIsFocusedByClick] = useState(false);
-  const [isDragged, setIsDragged] = useState(false);
-  const [id] = useState(uniqueId());
-  const [leftPosition, setLeftPosition] = useState(0);
-  const {
-    addDot,
-    disabled: disabled2,
-    dots,
-    focused: focusedSlider,
-    isHoverOrDragTrack,
-    max,
-    min,
-    railNode,
-    removeDot,
-    reverse,
-    setFocused: setFocusedSlider,
-    steps,
-    updateDot,
-    size
-  } = useContext(SliderExtendedContext);
-  const tabIndex = useSliderExtendedDotTabIndex(disabled2, id, dots, focusedSlider);
-  const ref = useRef(null);
-  useLayoutEffect(() => () => removeDot(id), []);
-  useEffect(() => {
+const MOUSE_MOVE_WAIT = 50;
+const SliderExtendedDot = React__default.forwardRef(
+  ({
+    children,
+    className,
+    onBlur,
+    onChange,
+    onFocus,
+    onMouseDown,
+    onTouchStart,
+    style,
+    value,
+    ...htmlSpanAttributes
+  }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [isFocusedByClick, setIsFocusedByClick] = useState(false);
+    const [isDragged, setIsDragged] = useState(false);
+    const [id] = useState(() => uniqueId());
+    const {
+      addDot,
+      disabled: disabled2,
+      dots,
+      focused: focusedSlider,
+      isHoverOrDragTrack,
+      max,
+      min,
+      railNode,
+      removeDot,
+      reverse,
+      setFocused: setFocusedSlider,
+      steps,
+      updateDot,
+      size
+    } = useContext(SliderExtendedContext);
+    const dotRef = useRef(null);
+    const tabIndex = SliderExtendedDotActions.getTabIndex({ disabled: disabled2, dotId: id, dots, focusedSlider });
     const normalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });
-    addDot({
-      changeValue: onChange,
-      id,
-      normalizedValue,
-      stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({ normalizedValue, steps }),
-      value
-    });
-  }, []);
-  useLayoutEffect(() => {
-    const nextNormalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });
-    if (reverse) {
-      setLeftPosition(100 - nextNormalizedValue);
-    } else {
-      setLeftPosition(nextNormalizedValue);
-    }
-    updateDot({
-      changeValue: onChange,
-      id,
-      normalizedValue: nextNormalizedValue,
-      stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({
-        normalizedValue: nextNormalizedValue,
+    const leftPosition = reverse ? 100 - normalizedValue : normalizedValue;
+    const setRef = useCallback(
+      (instance) => {
+        dotRef.current = instance;
+        setForwardedRef(ref, instance);
+      },
+      [ref]
+    );
+    useLayoutEffect(() => {
+      addDot({
+        changeValue: onChange,
+        id,
+        normalizedValue,
+        stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({ normalizedValue, steps }),
+        value
+      });
+      return () => removeDot(id);
+    }, []);
+    useLayoutEffect(() => {
+      updateDot({
+        changeValue: onChange,
+        id,
+        normalizedValue,
+        stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({ normalizedValue, steps }),
+        value
+      });
+    }, [id, normalizedValue, onChange, steps, value]);
+    const moveToNearestStep = (cursorNormalizedValue) => {
+      const nextStep = SliderExtendedUtils.getNearestStep({
+        normalizedValue: reverse ? 100 - cursorNormalizedValue : cursorNormalizedValue,
         steps
-      }),
-      value
-    });
-  }, [onChange, value, max, min, steps]);
-  const handleMouseDown = (onTargetMouseDown) => (event) => {
-    setIsFocusedByClick(true);
-    setIsDragged(true);
-    document.addEventListener("mouseup", handleDocumentMouseUp);
-    onTargetMouseDown(event);
-    onMouseDown == null ? void 0 : onMouseDown(event);
-  };
-  const handleMouseMove = (event) => {
-    if (railNode) {
-      let normalizedValue = SliderExtendedUtils.getNormalizedCursorValue({
-        cursorXPosition: event.clientX,
-        railNode
       });
-      if (reverse) {
-        normalizedValue = 100 - normalizedValue;
-      }
-      const nextStep = SliderExtendedUtils.getNearestStep({ normalizedValue, steps });
       onChange(nextStep.value);
-    }
-  };
-  const handleDocumentMouseUp = () => {
-    setIsDragged(false);
-    document.removeEventListener("mouseup", handleDocumentMouseUp);
-  };
-  const handleTouchStart = (onTargetTouchStart) => (event) => {
-    if (event.touches.length != 1) {
-      return;
-    }
-    setIsFocusedByClick(true);
-    setIsDragged(true);
-    document.addEventListener("touchend", handleDocumentTouchEnd);
-    onTargetTouchStart(event);
-    onTouchStart == null ? void 0 : onTouchStart(event);
-  };
-  const handleTouchMove = (event) => {
-    if (event.touches.length != 1) {
-      return;
-    }
-    if (event.cancelable) {
-      event.preventDefault();
-    }
-    if (railNode) {
-      let normalizedValue = SliderExtendedUtils.getNormalizedCursorValue({
-        cursorXPosition: event.touches[0].clientX,
-        railNode
-      });
-      if (reverse) {
-        normalizedValue = 100 - normalizedValue;
+    };
+    const handleDocumentMouseUp = () => {
+      setIsDragged(false);
+      document.removeEventListener("mouseup", handleDocumentMouseUp);
+    };
+    const handleMouseDown = (onTargetMouseDown) => (event) => {
+      setIsFocusedByClick(true);
+      setIsDragged(true);
+      document.addEventListener("mouseup", handleDocumentMouseUp);
+      onTargetMouseDown(event);
+      onMouseDown == null ? void 0 : onMouseDown(event);
+    };
+    const handleMouseMove = (event) => {
+      if (railNode) {
+        moveToNearestStep(
+          SliderExtendedUtils.getNormalizedCursorValue({ cursorXPosition: event.clientX, railNode })
+        );
       }
-      const nextStep = SliderExtendedUtils.getNearestStep({ normalizedValue, steps });
-      onChange(nextStep.value);
-    }
-  };
-  const handleDocumentTouchEnd = (event) => {
-    if (event.cancelable) {
+    };
+    const handleDocumentTouchEnd = (event) => {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      setIsDragged(false);
+      document.removeEventListener("touchend", handleDocumentTouchEnd);
+    };
+    const handleTouchStart = (onTargetTouchStart) => (event) => {
+      if (event.touches.length !== 1) {
+        return;
+      }
+      setIsFocusedByClick(true);
+      setIsDragged(true);
+      document.addEventListener("touchend", handleDocumentTouchEnd);
+      onTargetTouchStart(event);
+      onTouchStart == null ? void 0 : onTouchStart(event);
+    };
+    const handleTouchMove = (event) => {
+      if (event.touches.length !== 1) {
+        return;
+      }
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      if (railNode) {
+        moveToNearestStep(
+          SliderExtendedUtils.getNormalizedCursorValue({
+            cursorXPosition: event.touches[0].clientX,
+            railNode
+          })
+        );
+      }
+    };
+    const getCurrentDot = () => dots.find((dot) => dot.id === id);
+    const handleKeyDownToMoveLeft = (event) => {
       event.preventDefault();
-    }
-    setIsDragged(false);
-    document.removeEventListener("touchend", handleDocumentTouchEnd);
-  };
-  const getCurrentDot = () => dots.filter((d) => d.id === id)[0];
-  const handleKeyDownToMoveLeft = (event) => {
-    event.preventDefault();
-    SliderExtendedDotActions.moveToPrevStep(getCurrentDot(), steps);
-  };
-  const handleKeyDownToMoveRight = (event) => {
-    event.preventDefault();
-    SliderExtendedDotActions.moveToNextStep(getCurrentDot(), steps);
-  };
-  const handleFocus = (event) => {
-    if (!focusedSlider) {
-      setFocusedSlider(true);
-    }
-    setIsFocused(true);
-    onFocus == null ? void 0 : onFocus(event);
-  };
-  const handleBlur = (event) => {
-    if (focusedSlider) {
-      setFocusedSlider(false);
-    }
-    setIsFocusedByClick(false);
-    setIsFocused(false);
-    onBlur == null ? void 0 : onBlur(event);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isFocused && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        KeyDownListener,
-        {
-          onMatch: handleKeyDownToMoveLeft,
-          eventKeyCode: [EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]
-        }
-      ),
+      SliderExtendedDotActions.moveToPrevStep(getCurrentDot(), steps);
+    };
+    const handleKeyDownToMoveRight = (event) => {
+      event.preventDefault();
+      SliderExtendedDotActions.moveToNextStep(getCurrentDot(), steps);
+    };
+    const handleFocus = (event) => {
+      if (!focusedSlider) {
+        setFocusedSlider(true);
+      }
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const handleBlur = (event) => {
+      if (focusedSlider) {
+        setFocusedSlider(false);
+      }
+      setIsFocusedByClick(false);
+      setIsFocused(false);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      isFocused && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          KeyDownListener,
+          {
+            onMatch: handleKeyDownToMoveLeft,
+            eventKeyCode: [EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          KeyDownListener,
+          {
+            onMatch: handleKeyDownToMoveRight,
+            eventKeyCode: [EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
-        KeyDownListener,
+        SliderExtendedMoveHandler,
         {
-          onMatch: handleKeyDownToMoveRight,
-          eventKeyCode: [EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]
+          mouseMoveWait: MOUSE_MOVE_WAIT,
+          onMouseMove: handleMouseMove,
+          onTouchMove: handleTouchMove,
+          targetRef: dotRef,
+          children: ({ onTargetMouseDown, onTargetTouchStart }) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              tabIndex,
+              role: "slider",
+              "aria-valuemin": min,
+              "aria-valuenow": value,
+              "aria-valuemax": max,
+              ...htmlSpanAttributes,
+              className: clsx(styles.sliderExtendedDot, sizeToClassNameMap[size], className, {
+                [styles.disabled]: disabled2,
+                [styles.dragByMouse]: isDragged || isHoverOrDragTrack,
+                [styles.focusedByClick]: isFocusedByClick
+              }),
+              onBlur: handleBlur,
+              onFocus: handleFocus,
+              onMouseDown: handleMouseDown(onTargetMouseDown),
+              onTouchStart: handleTouchStart(onTargetTouchStart),
+              style: { ...style, left: `${leftPosition}%` },
+              ref: setRef,
+              children
+            }
+          )
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(
-      SliderExtendedMoveHandler,
-      {
-        onMouseMove: lodashExports.throttle(handleMouseMove, 50),
-        onTouchMove: lodashExports.throttle(handleTouchMove),
-        targetRef: ref,
-        children: ({ onTargetMouseDown, onTargetTouchStart }) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            tabIndex,
-            role: "slider",
-            "aria-valuemin": min,
-            "aria-valuenow": value,
-            "aria-valuemax": max,
-            ...htmlSpanAttributes,
-            className: clsx(styles.sliderExtendedDot, sizeToClassNameMap[size], className, {
-              [styles.disabled]: disabled2,
-              [styles.dragByMouse]: isDragged || isHoverOrDragTrack,
-              [styles.focusedByClick]: isFocusedByClick
-            }),
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            onMouseDown: handleMouseDown(onTargetMouseDown),
-            onTouchStart: handleTouchStart(onTargetTouchStart),
-            style: { left: `${leftPosition}%` },
-            ref,
-            children
-          }
-        )
-      }
-    )
-  ] });
-};
+    ] });
+  }
+);
 SliderExtendedDot.displayName = "SliderExtendedDot";
 export {
   SliderExtendedDot

package/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedDot.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDot.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext, useRef, useLayoutEffect } from \"react\";\nimport { throttle } from \"lodash\";\nimport { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedMoveHandler, TOnTargetMouseDown, TOnTargetTouchStart } from \"../SliderExtendedMoveHandler\";\nimport { SliderExtendedDotActions } from \"./SliderExtendedDotActions\";\nimport { useSliderExtendedDotTabIndex } from \"./useSliderExtendedDotTabIndex\";\nimport { uniqueId } from \"lodash-es\";\nimport { KeyDownListener } from \"@sberbusiness/triplex-next/components/KeyDownListener\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/SliderExtendedDot.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Свойства компонента SlideExtendedDot. */\nexport interface ISliderExtendedDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"onChange\" | \"value\"> {\n    onChange: (value: number) => void;\n    value: number;\n}\n\n/** Компонент SliderExtendedDot. Слайдер может иметь 1 или 2 SliderExtendedDot. */\nexport const SliderExtendedDot: React.FC<ISliderExtendedDotProps> = ({\n    children,\n    className,\n    onBlur,\n    onChange,\n    onFocus,\n    onMouseDown,\n    onTouchStart,\n    value,\n    ...htmlSpanAttributes\n}) => {\n    // Кнопка в фокусе.\n    const [isFocused, setIsFocused] = useState(false);\n    // Кнопка получила фокус при клике.\n    const [isFocusedByClick, setIsFocusedByClick] = useState(false);\n    // Кнопка в текущий момент перетаскивается мышью.\n    const [isDragged, setIsDragged] = useState(false);\n    const [id] = useState(uniqueId());\n    const [leftPosition, setLeftPosition] = useState(0);\n    const {\n        addDot,\n        disabled,\n        dots,\n        focused: focusedSlider,\n        isHoverOrDragTrack,\n        max,\n        min,\n        railNode,\n        removeDot,\n        reverse,\n        setFocused: setFocusedSlider,\n        steps,\n        updateDot,\n        size,\n    } = useContext(SliderExtendedContext);\n\n    const tabIndex = useSliderExtendedDotTabIndex(disabled, id, dots, focusedSlider);\n    const ref = useRef(null);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    useLayoutEffect(() => () => removeDot(id), []);\n\n    useEffect(() => {\n        const normalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });\n\n        // Добавление Dot в контекст.\n        addDot({\n            changeValue: onChange,\n            id,\n            normalizedValue,\n            stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({ normalizedValue, steps }),\n            value,\n        });\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useLayoutEffect(() => {\n        const nextNormalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });\n\n        if (reverse) {\n            setLeftPosition(100 - nextNormalizedValue);\n        } else {\n            setLeftPosition(nextNormalizedValue);\n        }\n\n        updateDot({\n            changeValue: onChange,\n            id,\n            normalizedValue: nextNormalizedValue,\n            stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({\n                normalizedValue: nextNormalizedValue,\n                steps,\n            }),\n            value,\n        });\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [onChange, value, max, min, steps]);\n\n    const handleMouseDown = (onTargetMouseDown: TOnTargetMouseDown) => (event: React.MouseEvent<HTMLSpanElement>) => {\n        setIsFocusedByClick(true);\n\n        setIsDragged(true);\n        document.addEventListener(\"mouseup\", handleDocumentMouseUp);\n\n        onTargetMouseDown(event);\n        onMouseDown?.(event);\n    };\n\n    const handleMouseMove = (event: MouseEvent) => {\n        if (railNode) {\n            let normalizedValue = SliderExtendedUtils.getNormalizedCursorValue({\n                cursorXPosition: event.clientX,\n                railNode,\n            });\n            if (reverse) {\n                normalizedValue = 100 - normalizedValue;\n            }\n            const nextStep = SliderExtendedUtils.getNearestStep({ normalizedValue, steps });\n\n            onChange(nextStep.value);\n        }\n    };\n\n    const handleDocumentMouseUp = () => {\n        setIsDragged(false);\n\n        document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\n    };\n\n    const handleTouchStart =\n        (onTargetTouchStart: TOnTargetTouchStart) => (event: React.TouchEvent<HTMLSpanElement>) => {\n            if (event.touches.length != 1) {\n                return;\n            }\n\n            setIsFocusedByClick(true);\n\n            setIsDragged(true);\n            document.addEventListener(\"touchend\", handleDocumentTouchEnd);\n\n            onTargetTouchStart(event);\n            onTouchStart?.(event);\n        };\n\n    const handleTouchMove = (event: TouchEvent) => {\n        if (event.touches.length != 1) {\n            return;\n        }\n\n        if (event.cancelable) {\n            event.preventDefault();\n        }\n\n        if (railNode) {\n            let normalizedValue = SliderExtendedUtils.getNormalizedCursorValue({\n                cursorXPosition: event.touches[0].clientX,\n                railNode,\n            });\n            if (reverse) {\n                normalizedValue = 100 - normalizedValue;\n            }\n            const nextStep = SliderExtendedUtils.getNearestStep({ normalizedValue, steps });\n\n            onChange(nextStep.value);\n        }\n    };\n\n    const handleDocumentTouchEnd = (event: TouchEvent) => {\n        if (event.cancelable) {\n            event.preventDefault();\n        }\n\n        setIsDragged(false);\n\n        document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n    };\n\n    /**\n     * Возвращает текущую кнопку из контекста.\n     */\n    const getCurrentDot = () => dots.filter((d) => d.id === id)[0];\n\n    /**\n     * Обработчик сочетаний клавиш, меняющих значение слайдера на меньшее.\n     */\n    const handleKeyDownToMoveLeft = (event: KeyboardEvent) => {\n        // Предотвращает скролл страницы.\n        event.preventDefault();\n\n        SliderExtendedDotActions.moveToPrevStep(getCurrentDot(), steps);\n    };\n\n    /**\n     * Обработчик сочетаний клавиш, меняющих значение слайдера на большее.\n     */\n    const handleKeyDownToMoveRight = (event: KeyboardEvent) => {\n        // Предотвращает скролл страницы.\n        event.preventDefault();\n\n        SliderExtendedDotActions.moveToNextStep(getCurrentDot(), steps);\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n        if (!focusedSlider) {\n            setFocusedSlider(true);\n        }\n\n        setIsFocused(true);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n        if (focusedSlider) {\n            setFocusedSlider(false);\n        }\n\n        setIsFocusedByClick(false);\n        setIsFocused(false);\n        onBlur?.(event);\n    };\n\n    return (\n        <>\n            {isFocused && (\n                <>\n                    <KeyDownListener\n                        onMatch={handleKeyDownToMoveLeft}\n                        eventKeyCode={[EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]}\n                    />\n                    <KeyDownListener\n                        onMatch={handleKeyDownToMoveRight}\n                        eventKeyCode={[EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]}\n                    />\n                </>\n            )}\n\n            <SliderExtendedMoveHandler\n                onMouseMove={throttle(handleMouseMove, 50)}\n                onTouchMove={throttle(handleTouchMove)}\n                targetRef={ref}\n            >\n                {({ onTargetMouseDown, onTargetTouchStart }) => (\n                    <span\n                        tabIndex={tabIndex}\n                        role=\"slider\"\n                        aria-valuemin={min}\n                        aria-valuenow={value}\n                        aria-valuemax={max}\n                        {...htmlSpanAttributes}\n                        className={clsx(styles.sliderExtendedDot, sizeToClassNameMap[size], className, {\n                            [styles.disabled]: disabled,\n                            [styles.dragByMouse]: isDragged || isHoverOrDragTrack,\n                            [styles.focusedByClick]: isFocusedByClick,\n                        })}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        onMouseDown={handleMouseDown(onTargetMouseDown)}\n                        onTouchStart={handleTouchStart(onTargetTouchStart)}\n                        style={{ left: `${leftPosition}%` }}\n                        ref={ref}\n                    >\n                        {children}\n                    </span>\n                )}\n            </SliderExtendedMoveHandler>\n        </>\n    );\n};\n\nSliderExtendedDot.displayName = \"SliderExtendedDot\";\n"],"names":["disabled","throttle"],"mappings":"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"}
+{"version":3,"file":"SliderExtendedDot.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDot.tsx"],"sourcesContent":["import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport clsx from \"clsx\";\nimport { KeyDownListener } from \"@sberbusiness/triplex-next/components/KeyDownListener\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { setForwardedRef } from \"../../utils\";\nimport { SliderExtendedMoveHandler, TOnTargetMouseDown, TOnTargetTouchStart } from \"../SliderExtendedMoveHandler\";\nimport { SliderExtendedDotActions } from \"./SliderExtendedDotActions\";\nimport styles from \"./styles/SliderExtendedDot.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Интервал троттлинга перемещения ползунка мышью, мс. */\nconst MOUSE_MOVE_WAIT = 50;\n\n/** Свойства компонента SliderExtendedDot. */\nexport interface ISliderExtendedDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"onChange\" | \"value\"> {\n    /** Обработчик изменения значения. Вызывается со значением шага, на который переместился ползунок. */\n    onChange: (value: number) => void;\n    /** Значение позиции ползунка. Должно быть в диапазоне от min до max. */\n    value: number;\n}\n\n/**\n * Компонент SliderExtendedDot — передвигаемый ползунок. Слайдер может иметь 1 или 2 SliderExtendedDot.\n * Значение контролируемое: компонент сообщает новое значение через onChange и ждёт его в value.\n */\nexport const SliderExtendedDot = React.forwardRef<HTMLSpanElement, ISliderExtendedDotProps>(\n    (\n        {\n            children,\n            className,\n            onBlur,\n            onChange,\n            onFocus,\n            onMouseDown,\n            onTouchStart,\n            style,\n            value,\n            ...htmlSpanAttributes\n        },\n        ref,\n    ) => {\n        // Кнопка в фокусе.\n        const [isFocused, setIsFocused] = useState(false);\n        // Кнопка получила фокус при клике.\n        const [isFocusedByClick, setIsFocusedByClick] = useState(false);\n        // Кнопка в текущий момент перетаскивается мышью.\n        const [isDragged, setIsDragged] = useState(false);\n        const [id] = useState(() => uniqueId());\n        const {\n            addDot,\n            disabled,\n            dots,\n            focused: focusedSlider,\n            isHoverOrDragTrack,\n            max,\n            min,\n            railNode,\n            removeDot,\n            reverse,\n            setFocused: setFocusedSlider,\n            steps,\n            updateDot,\n            size,\n        } = useContext(SliderExtendedContext);\n\n        const dotRef = useRef<HTMLSpanElement | null>(null);\n        const tabIndex = SliderExtendedDotActions.getTabIndex({ disabled, dotId: id, dots, focusedSlider });\n        const normalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });\n        // Позиция ползунка на полосе слайдера, в %.\n        const leftPosition = reverse ? 100 - normalizedValue : normalizedValue;\n\n        /** Сохраняет узел ползунка локально (для слушателей перемещения) и пробрасывает во внешний ref. */\n        const setRef = useCallback(\n            (instance: HTMLSpanElement | null) => {\n                dotRef.current = instance;\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        // Регистрация ползунка в контексте слайдера на время его жизни.\n        // Зависимости пусты намеренно: addDot/removeDot пересоздаются на каждом рендере,\n        // а перерегистрация ползунка сбросила бы его позицию в массиве dots.\n        useLayoutEffect(() => {\n            addDot({\n                changeValue: onChange,\n                id,\n                normalizedValue,\n                stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({ normalizedValue, steps }),\n                value,\n            });\n\n            return () => removeDot(id);\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        // Синхронизация значения ползунка с контекстом.\n        // updateDot пересоздаётся на каждом рендере, поэтому в зависимости не попадает — иначе\n        // обновление состояния слайдера запускало бы эффект заново.\n        useLayoutEffect(() => {\n            updateDot({\n                changeValue: onChange,\n                id,\n                normalizedValue,\n                stepIndex: SliderExtendedUtils.getStepIndexByNormalizedValue({ normalizedValue, steps }),\n                value,\n            });\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, [id, normalizedValue, onChange, steps, value]);\n\n        /** Перемещает ползунок на ближайший к позиции курсора шаг. */\n        const moveToNearestStep = (cursorNormalizedValue: number) => {\n            const nextStep = SliderExtendedUtils.getNearestStep({\n                normalizedValue: reverse ? 100 - cursorNormalizedValue : cursorNormalizedValue,\n                steps,\n            });\n\n            onChange(nextStep.value);\n        };\n\n        const handleDocumentMouseUp = () => {\n            setIsDragged(false);\n\n            document.removeEventListener(\"mouseup\", handleDocumentMouseUp);\n        };\n\n        const handleMouseDown =\n            (onTargetMouseDown: TOnTargetMouseDown) => (event: React.MouseEvent<HTMLSpanElement>) => {\n                setIsFocusedByClick(true);\n                setIsDragged(true);\n\n                document.addEventListener(\"mouseup\", handleDocumentMouseUp);\n\n                onTargetMouseDown(event);\n                onMouseDown?.(event);\n            };\n\n        const handleMouseMove = (event: MouseEvent) => {\n            if (railNode) {\n                moveToNearestStep(\n                    SliderExtendedUtils.getNormalizedCursorValue({ cursorXPosition: event.clientX, railNode }),\n                );\n            }\n        };\n\n        const handleDocumentTouchEnd = (event: TouchEvent) => {\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            setIsDragged(false);\n\n            document.removeEventListener(\"touchend\", handleDocumentTouchEnd);\n        };\n\n        const handleTouchStart =\n            (onTargetTouchStart: TOnTargetTouchStart) => (event: React.TouchEvent<HTMLSpanElement>) => {\n                if (event.touches.length !== 1) {\n                    return;\n                }\n\n                setIsFocusedByClick(true);\n                setIsDragged(true);\n\n                document.addEventListener(\"touchend\", handleDocumentTouchEnd);\n\n                onTargetTouchStart(event);\n                onTouchStart?.(event);\n            };\n\n        const handleTouchMove = (event: TouchEvent) => {\n            if (event.touches.length !== 1) {\n                return;\n            }\n\n            if (event.cancelable) {\n                event.preventDefault();\n            }\n\n            if (railNode) {\n                moveToNearestStep(\n                    SliderExtendedUtils.getNormalizedCursorValue({\n                        cursorXPosition: event.touches[0].clientX,\n                        railNode,\n                    }),\n                );\n            }\n        };\n\n        /** Возвращает текущий ползунок из контекста. */\n        const getCurrentDot = () => dots.find((dot) => dot.id === id);\n\n        /** Обработчик сочетаний клавиш, меняющих значение слайдера на меньшее. */\n        const handleKeyDownToMoveLeft = (event: KeyboardEvent) => {\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n\n            SliderExtendedDotActions.moveToPrevStep(getCurrentDot(), steps);\n        };\n\n        /** Обработчик сочетаний клавиш, меняющих значение слайдера на большее. */\n        const handleKeyDownToMoveRight = (event: KeyboardEvent) => {\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n\n            SliderExtendedDotActions.moveToNextStep(getCurrentDot(), steps);\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n            if (!focusedSlider) {\n                setFocusedSlider(true);\n            }\n\n            setIsFocused(true);\n            onFocus?.(event);\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n            if (focusedSlider) {\n                setFocusedSlider(false);\n            }\n\n            setIsFocusedByClick(false);\n            setIsFocused(false);\n            onBlur?.(event);\n        };\n\n        return (\n            <>\n                {isFocused && (\n                    <>\n                        <KeyDownListener\n                            onMatch={handleKeyDownToMoveLeft}\n                            eventKeyCode={[EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]}\n                        />\n                        <KeyDownListener\n                            onMatch={handleKeyDownToMoveRight}\n                            eventKeyCode={[EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]}\n                        />\n                    </>\n                )}\n\n                <SliderExtendedMoveHandler\n                    mouseMoveWait={MOUSE_MOVE_WAIT}\n                    onMouseMove={handleMouseMove}\n                    onTouchMove={handleTouchMove}\n                    targetRef={dotRef}\n                >\n                    {({ onTargetMouseDown, onTargetTouchStart }) => (\n                        <span\n                            tabIndex={tabIndex}\n                            role=\"slider\"\n                            aria-valuemin={min}\n                            aria-valuenow={value}\n                            aria-valuemax={max}\n                            {...htmlSpanAttributes}\n                            className={clsx(styles.sliderExtendedDot, sizeToClassNameMap[size], className, {\n                                [styles.disabled]: disabled,\n                                [styles.dragByMouse]: isDragged || isHoverOrDragTrack,\n                                [styles.focusedByClick]: isFocusedByClick,\n                            })}\n                            onBlur={handleBlur}\n                            onFocus={handleFocus}\n                            onMouseDown={handleMouseDown(onTargetMouseDown)}\n                            onTouchStart={handleTouchStart(onTargetTouchStart)}\n                            style={{ ...style, left: `${leftPosition}%` }}\n                            ref={setRef}\n                        >\n                            {children}\n                        </span>\n                    )}\n                </SliderExtendedMoveHandler>\n            </>\n        );\n    },\n);\n\nSliderExtendedDot.displayName = \"SliderExtendedDot\";\n"],"names":["React","disabled"],"mappings":"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"}

package/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDotActions.js

@@ -1,11 +1,24 @@
 const SliderExtendedDotActions = {
+  getTabIndex: ({ disabled, dotId, dots, focusedSlider }) => {
+    if (disabled) {
+      return -1;
+    }
+    if (dots.length !== 2) {
+      return 0;
+    }
+    const isDotWithLowerValue = [...dots].sort((dot1, dot2) => dot1.value - dot2.value)[0].id === dotId;
+    if (focusedSlider) {
+      return isDotWithLowerValue ? 1 : 3;
+    }
+    return isDotWithLowerValue ? 0 : -1;
+  },
   moveToNextStep: (dot, steps) => {
-    if (dot.stepIndex < steps.length - 1) {
+    if (dot && dot.stepIndex < steps.length - 1) {
       dot.changeValue(steps[dot.stepIndex + 1].value);
     }
   },
   moveToPrevStep: (dot, steps) => {
-    if (dot.stepIndex > 0) {
+    if (dot && dot.stepIndex > 0) {
       dot.changeValue(steps[dot.stepIndex - 1].value);
     }
   }

package/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDotActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedDotActions.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDotActions.ts"],"sourcesContent":["import { ISliderExtendedDot, ISliderExtendedStep } from \"../../SliderExtendedContext\";\n\ninterface ISliderExtendedDotActions {\n    /**\n     * Перемещение точки на следующий шаг.\n     */\n    moveToNextStep: (dot: ISliderExtendedDot, steps: ISliderExtendedStep[]) => void;\n    /**\n     * Перемещение точки на предыдущий шаг.\n     */\n    moveToPrevStep: (dot: ISliderExtendedDot, steps: ISliderExtendedStep[]) => void;\n}\n\nexport const SliderExtendedDotActions: ISliderExtendedDotActions = {\n    moveToNextStep: (dot, steps) => {\n        if (dot.stepIndex < steps.length - 1) {\n            dot.changeValue(steps[dot.stepIndex + 1].value);\n        }\n    },\n    moveToPrevStep: (dot, steps) => {\n        if (dot.stepIndex > 0) {\n            dot.changeValue(steps[dot.stepIndex - 1].value);\n        }\n    },\n};\n"],"names":[],"mappings":"AAaO,MAAM,2BAAsD;AAAA,EAC/D,gBAAgB,CAAC,KAAK,UAAU;AAC5B,QAAI,IAAI,YAAY,MAAM,SAAS,GAAG;AAClC,UAAI,YAAY,MAAM,IAAI,YAAY,CAAC,EAAE,KAAK;AAAA,IAClD;AAAA,EACJ;AAAA,EACA,gBAAgB,CAAC,KAAK,UAAU;AAC5B,QAAI,IAAI,YAAY,GAAG;AACnB,UAAI,YAAY,MAAM,IAAI,YAAY,CAAC,EAAE,KAAK;AAAA,IAClD;AAAA,EACJ;AACJ;"}
+{"version":3,"file":"SliderExtendedDotActions.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedDot/SliderExtendedDotActions.ts"],"sourcesContent":["import { ISliderExtendedDot, ISliderExtendedStep } from \"../../SliderExtendedContext\";\n\ninterface ISliderExtendedDotActions {\n    /**\n     * Возвращает tabIndex ползунка.\n     * Слайдер с одним ползунком: tabIndex - 0.\n     * Слайдер с двумя ползунками: до попадания слайдера в фокус в табуляции участвует только ползунок\n     * с меньшим value (tabIndex - 0), второй исключён (tabIndex - -1). Когда слайдер в фокусе, ползунок\n     * с меньшим value получает tabIndex - 1, а с большим - 3 (SliderExtended.Track между ними - 2),\n     * чтобы по элементам слайдера можно было последовательно пройти через Tab.\n     * Неактивный слайдер в табуляции не участвует.\n     */\n    getTabIndex: (params: {\n        disabled: boolean;\n        dotId: string;\n        dots: ISliderExtendedDot[];\n        focusedSlider: boolean;\n    }) => number;\n    /**\n     * Перемещение точки на следующий шаг.\n     */\n    moveToNextStep: (dot: ISliderExtendedDot | undefined, steps: ISliderExtendedStep[]) => void;\n    /**\n     * Перемещение точки на предыдущий шаг.\n     */\n    moveToPrevStep: (dot: ISliderExtendedDot | undefined, steps: ISliderExtendedStep[]) => void;\n}\n\nexport const SliderExtendedDotActions: ISliderExtendedDotActions = {\n    getTabIndex: ({ disabled, dotId, dots, focusedSlider }) => {\n        if (disabled) {\n            return -1;\n        }\n\n        if (dots.length !== 2) {\n            return 0;\n        }\n\n        const isDotWithLowerValue = [...dots].sort((dot1, dot2) => dot1.value - dot2.value)[0].id === dotId;\n\n        if (focusedSlider) {\n            return isDotWithLowerValue ? 1 : 3;\n        }\n\n        return isDotWithLowerValue ? 0 : -1;\n    },\n    moveToNextStep: (dot, steps) => {\n        if (dot && dot.stepIndex < steps.length - 1) {\n            dot.changeValue(steps[dot.stepIndex + 1].value);\n        }\n    },\n    moveToPrevStep: (dot, steps) => {\n        if (dot && dot.stepIndex > 0) {\n            dot.changeValue(steps[dot.stepIndex - 1].value);\n        }\n    },\n};\n"],"names":[],"mappings":"AA4BO,MAAM,2BAAsD;AAAA,EAC/D,aAAa,CAAC,EAAE,UAAU,OAAO,MAAM,oBAAoB;AACvD,QAAI,UAAU;AACV,aAAO;AAAA,IACX;AAEA,QAAI,KAAK,WAAW,GAAG;AACnB,aAAO;AAAA,IACX;AAEA,UAAM,sBAAsB,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,MAAM,SAAS,KAAK,QAAQ,KAAK,KAAK,EAAE,CAAC,EAAE,OAAO;AAE9F,QAAI,eAAe;AACf,aAAO,sBAAsB,IAAI;AAAA,IACrC;AAEA,WAAO,sBAAsB,IAAI;AAAA,EACrC;AAAA,EACA,gBAAgB,CAAC,KAAK,UAAU;AAC5B,QAAI,OAAO,IAAI,YAAY,MAAM,SAAS,GAAG;AACzC,UAAI,YAAY,MAAM,IAAI,YAAY,CAAC,EAAE,KAAK;AAAA,IAClD;AAAA,EACJ;AAAA,EACA,gBAAgB,CAAC,KAAK,UAAU;AAC5B,QAAI,OAAO,IAAI,YAAY,GAAG;AAC1B,UAAI,YAAY,MAAM,IAAI,YAAY,CAAC,EAAE,KAAK;AAAA,IAClD;AAAA,EACJ;AACJ;"}

package/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMark.js

@@ -1,49 +1,47 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
-import { SliderExtendedContext } from "../../SliderExtendedContext.js";
-import { SliderExtendedMarkActions } from "./SliderExtendedMarkActions.js";
-import { c as clsx } from "../../../../chunks/vendor-CtuAQuEN.js";
-import { s as styles } from "../../../../chunks/SliderExtendedMarks.module-DXI6Xg6v.js";
+import React__default, { useContext } from "react";
+import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
 import { EComponentSize } from "../../../../enums/EComponentSize.js";
 import { ETextSize } from "../../../Typography/enums.js";
 import { Text } from "../../../Typography/Text.js";
 import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
+import { SliderExtendedContext } from "../../SliderExtendedContext.js";
+import { SliderExtendedMarkActions } from "./SliderExtendedMarkActions.js";
+import { s as styles } from "../../../../chunks/SliderExtendedMarks.module-DpSsY-cL.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const SliderExtendedMark = ({
-  children,
-  className,
-  value,
-  ...htmlSpanAttributes
-}) => {
-  const { disabled, dots, min, max, reverse, size } = React__default.useContext(SliderExtendedContext);
-  const handleClick = () => SliderExtendedMarkActions.moveNearestDot({ dots, value });
-  const textSize = size === EComponentSize.LG ? ETextSize.B3 : ETextSize.B4;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: clsx(styles.sliderExtendedMark, sizeToClassNameMap[size], className, {
-        // Одна из SliderExtended.Dot, находится на текущей позиции.
-        [styles.active]: SliderExtendedMarkActions.isActive({ dots, value }) && !disabled,
-        [styles.disabled]: disabled,
-        [styles.reverse]: reverse
-      }),
-      ...htmlSpanAttributes,
-      style: SliderExtendedMarkActions.getStyle({ max, min, reverse, value }),
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(styles.sliderExtendedMarkDot, {
-              [styles.inSelectedRange]: SliderExtendedMarkActions.isInSelectedRange({ dots, min, value })
-            }),
-            onClick: handleClick
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { className: clsx(styles.sliderExtendedMarkText), size: textSize, onClick: handleClick, children })
-      ]
-    }
-  );
-};
+const SliderExtendedMark = React__default.forwardRef(
+  ({ children, className, style, value, ...htmlSpanAttributes }, ref) => {
+    const { disabled, dots, min, max, reverse, size } = useContext(SliderExtendedContext);
+    const handleClick = () => SliderExtendedMarkActions.moveNearestDot({ dots, value });
+    const textSize = size === EComponentSize.LG ? ETextSize.B3 : ETextSize.B4;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: clsx(styles.sliderExtendedMark, sizeToClassNameMap[size], className, {
+          // Одна из SliderExtended.Dot, находится на текущей позиции.
+          [styles.active]: SliderExtendedMarkActions.isActive({ dots, value }) && !disabled,
+          [styles.disabled]: disabled,
+          [styles.reverse]: reverse
+        }),
+        ...htmlSpanAttributes,
+        style: { ...style, ...SliderExtendedMarkActions.getStyle({ max, min, reverse, value }) },
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(styles.sliderExtendedMarkDot, {
+                [styles.inSelectedRange]: SliderExtendedMarkActions.isInSelectedRange({ dots, min, value })
+              }),
+              onClick: handleClick
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { className: styles.sliderExtendedMarkText, size: textSize, onClick: handleClick, children })
+        ]
+      }
+    );
+  }
+);
 SliderExtendedMark.displayName = "SliderExtendedMark";
 export {
   SliderExtendedMark