@sberbusiness/triplex-next 1.42.0 → 1.44.0

package/components/SliderExtended/SliderExtendedUtils.js

@@ -1,45 +1,27 @@
 const SliderExtendedUtils = {
-  getNearestDotByValue: ({ value, dots }) => {
-    let nearestDot = dots[0];
-    let delta = Infinity;
-    dots.forEach((dot) => {
-      const thisDelta = Math.abs(dot.value - value);
-      if (thisDelta < delta) {
-        delta = thisDelta;
-        nearestDot = dot;
-      }
-    });
-    return nearestDot;
-  },
-  getNearestStep: ({ normalizedValue, steps }) => {
-    let nearestStep = steps[0];
-    let nearestStepDelta = 100;
-    steps.forEach((s) => {
-      const stepDelta = Math.abs(normalizedValue - s.normalizedValue);
-      if (stepDelta < nearestStepDelta) {
-        nearestStepDelta = stepDelta;
-        nearestStep = s;
-      }
-    });
-    return nearestStep;
-  },
+  getNearestDotByValue: ({ value, dots }) => dots.reduce((nearestDot, dot) => {
+    if (!nearestDot) {
+      return dot;
+    }
+    return Math.abs(dot.value - value) < Math.abs(nearestDot.value - value) ? dot : nearestDot;
+  }, void 0),
+  getNearestStep: ({ normalizedValue, steps }) => steps.reduce(
+    (nearestStep, step) => Math.abs(normalizedValue - step.normalizedValue) < Math.abs(normalizedValue - nearestStep.normalizedValue) ? step : nearestStep,
+    steps[0]
+  ),
   getNormalizedCursorValue: ({ cursorXPosition, railNode }) => (cursorXPosition - railNode.getBoundingClientRect().left) * 100 / railNode.offsetWidth,
   getNormalizedValue: ({ max, min, value }) => {
     const valuesLength = max - min;
-    const valueMinDelta = value - min;
-    const normalizedValue = valueMinDelta * 100 / valuesLength;
+    if (valuesLength === 0) {
+      return 0;
+    }
+    const normalizedValue = (value - min) * 100 / valuesLength;
     return Math.min(100, Math.max(0, normalizedValue));
   },
-  getStepIndexByNormalizedValue: ({ normalizedValue, steps }) => {
-    let index = 0;
-    steps.some((step, i) => {
-      if (step.normalizedValue === normalizedValue) {
-        index = i;
-        return true;
-      }
-    });
-    return index;
-  }
+  getStepIndexByNormalizedValue: ({ normalizedValue, steps }) => Math.max(
+    0,
+    steps.findIndex((step) => step.normalizedValue === normalizedValue)
+  )
 };
 export {
   SliderExtendedUtils

package/components/SliderExtended/SliderExtendedUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedUtils.js","sources":["../../../src/components/SliderExtended/SliderExtendedUtils.ts"],"sourcesContent":["import { ISliderExtendedDot, ISliderExtendedStep } from \"./SliderExtendedContext\";\n\ninterface ISliderExtendedUtils {\n    /**\n     * Возвращает нормализованное(от 0 до 100) значение позиции курсора.\n     */\n    getNormalizedCursorValue: (params: { cursorXPosition: number; railNode: HTMLDivElement }) => number;\n    /**\n     * Возвращает ближайшую точку.\n     */\n    getNearestDotByValue: (params: { value: number; dots: ISliderExtendedDot[] }) => ISliderExtendedDot;\n    /**\n     * Возвращает ближайший шаг.\n     */\n    getNearestStep: (params: { normalizedValue: number; steps: ISliderExtendedStep[] }) => ISliderExtendedStep;\n    /**\n     * Возвращает нормализованное(от 0 до 100) value.\n     */\n    getNormalizedValue: (params: { max: number; min: number; value: number }) => number;\n    /**\n     * Возвращает индекс значения в массиве steps.\n     */\n    getStepIndexByNormalizedValue: (params: { normalizedValue: number; steps: ISliderExtendedStep[] }) => number;\n}\n\nexport const SliderExtendedUtils: ISliderExtendedUtils = {\n    getNearestDotByValue: ({ value, dots }) => {\n        let nearestDot: ISliderExtendedDot = dots[0];\n        let delta = Infinity;\n\n        dots.forEach((dot) => {\n            const thisDelta = Math.abs(dot.value - value);\n\n            if (thisDelta < delta) {\n                delta = thisDelta;\n                nearestDot = dot;\n            }\n        });\n\n        return nearestDot;\n    },\n    getNearestStep: ({ normalizedValue, steps }) => {\n        // Ближайший шаг.\n        let nearestStep = steps[0];\n        // Разница между шагом и текущим положением Dot.\n        let nearestStepDelta = 100;\n\n        steps.forEach((s) => {\n            const stepDelta = Math.abs(normalizedValue - s.normalizedValue);\n            if (stepDelta < nearestStepDelta) {\n                nearestStepDelta = stepDelta;\n                nearestStep = s;\n            }\n        });\n\n        return nearestStep;\n    },\n\n    getNormalizedCursorValue: ({ cursorXPosition, railNode }) =>\n        ((cursorXPosition - railNode.getBoundingClientRect().left) * 100) / railNode.offsetWidth,\n    getNormalizedValue: ({ max, min, value }) => {\n        const valuesLength = max - min;\n        const valueMinDelta = value - min;\n        const normalizedValue = (valueMinDelta * 100) / valuesLength;\n\n        return Math.min(100, Math.max(0, normalizedValue));\n    },\n    getStepIndexByNormalizedValue: ({ normalizedValue, steps }) => {\n        let index = 0;\n\n        steps.some((step, i) => {\n            if (step.normalizedValue === normalizedValue) {\n                index = i;\n                return true;\n            }\n        });\n\n        return index;\n    },\n};\n"],"names":[],"mappings":"AAyBO,MAAM,sBAA4C;AAAA,EACrD,sBAAsB,CAAC,EAAE,OAAO,WAAW;AACvC,QAAI,aAAiC,KAAK,CAAC;AAC3C,QAAI,QAAQ;AAEZ,SAAK,QAAQ,CAAC,QAAQ;AAClB,YAAM,YAAY,KAAK,IAAI,IAAI,QAAQ,KAAK;AAE5C,UAAI,YAAY,OAAO;AACnB,gBAAQ;AACR,qBAAa;AAAA,MACjB;AAAA,IACJ,CAAC;AAED,WAAO;AAAA,EACX;AAAA,EACA,gBAAgB,CAAC,EAAE,iBAAiB,YAAY;AAE5C,QAAI,cAAc,MAAM,CAAC;AAEzB,QAAI,mBAAmB;AAEvB,UAAM,QAAQ,CAAC,MAAM;AACjB,YAAM,YAAY,KAAK,IAAI,kBAAkB,EAAE,eAAe;AAC9D,UAAI,YAAY,kBAAkB;AAC9B,2BAAmB;AACnB,sBAAc;AAAA,MAClB;AAAA,IACJ,CAAC;AAED,WAAO;AAAA,EACX;AAAA,EAEA,0BAA0B,CAAC,EAAE,iBAAiB,SAAA,OACxC,kBAAkB,SAAS,sBAAA,EAAwB,QAAQ,MAAO,SAAS;AAAA,EACjF,oBAAoB,CAAC,EAAE,KAAK,KAAK,YAAY;AACzC,UAAM,eAAe,MAAM;AAC3B,UAAM,gBAAgB,QAAQ;AAC9B,UAAM,kBAAmB,gBAAgB,MAAO;AAEhD,WAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,eAAe,CAAC;AAAA,EACrD;AAAA,EACA,+BAA+B,CAAC,EAAE,iBAAiB,YAAY;AAC3D,QAAI,QAAQ;AAEZ,UAAM,KAAK,CAAC,MAAM,MAAM;AACpB,UAAI,KAAK,oBAAoB,iBAAiB;AAC1C,gBAAQ;AACR,eAAO;AAAA,MACX;AAAA,IACJ,CAAC;AAED,WAAO;AAAA,EACX;AACJ;"}
+{"version":3,"file":"SliderExtendedUtils.js","sources":["../../../src/components/SliderExtended/SliderExtendedUtils.ts"],"sourcesContent":["import { ISliderExtendedDot, ISliderExtendedStep } from \"./SliderExtendedContext\";\n\n/** Утилиты расчёта позиций SliderExtended. */\ninterface ISliderExtendedUtils {\n    /**\n     * Возвращает нормализованное (от 0 до 100) значение позиции курсора.\n     * Значение выходит за пределы диапазона, если курсор находится за границами полосы.\n     */\n    getNormalizedCursorValue: (params: { cursorXPosition: number; railNode: HTMLDivElement }) => number;\n    /**\n     * Возвращает ближайшую к value точку. При равном удалении — первую из них.\n     * Возвращает undefined, если ни одна точка не зарегистрирована.\n     */\n    getNearestDotByValue: (params: { value: number; dots: ISliderExtendedDot[] }) => ISliderExtendedDot | undefined;\n    /**\n     * Возвращает ближайший к normalizedValue шаг. При равном удалении — первый из них.\n     * Массив steps непустой: SliderExtended не рендерит содержимое, пока шаги не рассчитаны.\n     */\n    getNearestStep: (params: { normalizedValue: number; steps: ISliderExtendedStep[] }) => ISliderExtendedStep;\n    /**\n     * Возвращает нормализованное (от 0 до 100) value, обрезая его по границам диапазона.\n     */\n    getNormalizedValue: (params: { max: number; min: number; value: number }) => number;\n    /**\n     * Возвращает индекс шага с указанным normalizedValue. Если такого шага нет, возвращает 0.\n     */\n    getStepIndexByNormalizedValue: (params: { normalizedValue: number; steps: ISliderExtendedStep[] }) => number;\n}\n\nexport const SliderExtendedUtils: ISliderExtendedUtils = {\n    getNearestDotByValue: ({ value, dots }) =>\n        dots.reduce<ISliderExtendedDot | undefined>((nearestDot, dot) => {\n            if (!nearestDot) {\n                return dot;\n            }\n\n            return Math.abs(dot.value - value) < Math.abs(nearestDot.value - value) ? dot : nearestDot;\n        }, undefined),\n    getNearestStep: ({ normalizedValue, steps }) =>\n        steps.reduce(\n            (nearestStep, step) =>\n                Math.abs(normalizedValue - step.normalizedValue) <\n                Math.abs(normalizedValue - nearestStep.normalizedValue)\n                    ? step\n                    : nearestStep,\n            steps[0],\n        ),\n    getNormalizedCursorValue: ({ cursorXPosition, railNode }) =>\n        ((cursorXPosition - railNode.getBoundingClientRect().left) * 100) / railNode.offsetWidth,\n    getNormalizedValue: ({ max, min, value }) => {\n        const valuesLength = max - min;\n\n        // Вырожденный диапазон, нормализовать нечего.\n        if (valuesLength === 0) {\n            return 0;\n        }\n\n        const normalizedValue = ((value - min) * 100) / valuesLength;\n\n        return Math.min(100, Math.max(0, normalizedValue));\n    },\n    getStepIndexByNormalizedValue: ({ normalizedValue, steps }) =>\n        Math.max(\n            0,\n            steps.findIndex((step) => step.normalizedValue === normalizedValue),\n        ),\n};\n"],"names":[],"mappings":"AA6BO,MAAM,sBAA4C;AAAA,EACrD,sBAAsB,CAAC,EAAE,OAAO,KAAA,MAC5B,KAAK,OAAuC,CAAC,YAAY,QAAQ;AAC7D,QAAI,CAAC,YAAY;AACb,aAAO;AAAA,IACX;AAEA,WAAO,KAAK,IAAI,IAAI,QAAQ,KAAK,IAAI,KAAK,IAAI,WAAW,QAAQ,KAAK,IAAI,MAAM;AAAA,EACpF,GAAG,MAAS;AAAA,EAChB,gBAAgB,CAAC,EAAE,iBAAiB,MAAA,MAChC,MAAM;AAAA,IACF,CAAC,aAAa,SACV,KAAK,IAAI,kBAAkB,KAAK,eAAe,IAC/C,KAAK,IAAI,kBAAkB,YAAY,eAAe,IAChD,OACA;AAAA,IACV,MAAM,CAAC;AAAA,EAAA;AAAA,EAEf,0BAA0B,CAAC,EAAE,iBAAiB,SAAA,OACxC,kBAAkB,SAAS,sBAAA,EAAwB,QAAQ,MAAO,SAAS;AAAA,EACjF,oBAAoB,CAAC,EAAE,KAAK,KAAK,YAAY;AACzC,UAAM,eAAe,MAAM;AAG3B,QAAI,iBAAiB,GAAG;AACpB,aAAO;AAAA,IACX;AAEA,UAAM,mBAAoB,QAAQ,OAAO,MAAO;AAEhD,WAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,eAAe,CAAC;AAAA,EACrD;AAAA,EACA,+BAA+B,CAAC,EAAE,iBAAiB,MAAA,MAC/C,KAAK;AAAA,IACD;AAAA,IACA,MAAM,UAAU,CAAC,SAAS,KAAK,oBAAoB,eAAe;AAAA,EAAA;AAE9E;"}

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-DfvHt3TJ.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__6141b324";
-const focusedByClick = "focusedByClick__8895a636";
-const disabled = "disabled__d87631e5";
-const dragByMouse = "dragByMouse__8fc7b017";
-const lg = "lg__0ca2c489";
+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__7a04bea4";
+const focusedByClick = "focusedByClick__15c93251";
+const disabled = "disabled__53183f83";
+const dragByMouse = "dragByMouse__4dd9fdb2";
+const lg = "lg__eb1e1db2";
 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;"}