@sberbusiness/triplex-next 1.42.0 → 1.44.0

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-DfvHt3TJ.js";
-import { s as styles } from "../../../../chunks/SliderExtendedMarks.module-Dbz1svyX.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-CuyZnXA3.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

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

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedMark.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMark.tsx"],"sourcesContent":["import React from \"react\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedMarkActions } from \"./SliderExtendedMarkActions\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/SliderExtendedMarks.module.less\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Свойства компонента SliderExtendedMark. */\nexport interface ISliderExtendedMarkProps extends React.HTMLAttributes<HTMLSpanElement> {\n    value: number;\n}\n\n/** Компонент SliderExtendedMark. */\nexport const SliderExtendedMark: React.FC<ISliderExtendedMarkProps> = ({\n    children,\n    className,\n    value,\n    ...htmlSpanAttributes\n}) => {\n    const { disabled, dots, min, max, reverse, size } = React.useContext(SliderExtendedContext);\n\n    const handleClick = () => SliderExtendedMarkActions.moveNearestDot({ dots, value });\n    const textSize = size === EComponentSize.LG ? ETextSize.B3 : ETextSize.B4;\n\n    return (\n        <span\n            className={clsx(styles.sliderExtendedMark, sizeToClassNameMap[size], className, {\n                // Одна из SliderExtended.Dot, находится на текущей позиции.\n                [styles.active]: SliderExtendedMarkActions.isActive({ dots, value }) && !disabled,\n                [styles.disabled]: disabled,\n                [styles.reverse]: reverse,\n            })}\n            {...htmlSpanAttributes}\n            style={SliderExtendedMarkActions.getStyle({ max, min, reverse, value })}\n        >\n            <span\n                className={clsx(styles.sliderExtendedMarkDot, {\n                    [styles.inSelectedRange]: SliderExtendedMarkActions.isInSelectedRange({ dots, min, value }),\n                })}\n                onClick={handleClick}\n            />\n            <Text className={clsx(styles.sliderExtendedMarkText)} size={textSize} onClick={handleClick}>\n                {children}\n            </Text>\n        </span>\n    );\n};\n\nSliderExtendedMark.displayName = \"SliderExtendedMark\";\n"],"names":["React"],"mappings":";;;;;;;;;;AAUA,MAAM,qBAAqB,yBAAyB,MAAM;AAQnD,MAAM,qBAAyD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,UAAU,MAAM,KAAK,KAAK,SAAS,SAASA,eAAM,WAAW,qBAAqB;AAE1F,QAAM,cAAc,MAAM,0BAA0B,eAAe,EAAE,MAAM,OAAO;AAClF,QAAM,WAAW,SAAS,eAAe,KAAK,UAAU,KAAK,UAAU;AAEvE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,oBAAoB,mBAAmB,IAAI,GAAG,WAAW;AAAA;AAAA,QAE5E,CAAC,OAAO,MAAM,GAAG,0BAA0B,SAAS,EAAE,MAAM,OAAO,KAAK,CAAC;AAAA,QACzE,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,OAAO,GAAG;AAAA,MAAA,CACrB;AAAA,MACA,GAAG;AAAA,MACJ,OAAO,0BAA0B,SAAS,EAAE,KAAK,KAAK,SAAS,OAAO;AAAA,MAEtE,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,KAAK,OAAO,uBAAuB;AAAA,cAC1C,CAAC,OAAO,eAAe,GAAG,0BAA0B,kBAAkB,EAAE,MAAM,KAAK,MAAA,CAAO;AAAA,YAAA,CAC7F;AAAA,YACD,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,oBAAC,MAAA,EAAK,WAAW,KAAK,OAAO,sBAAsB,GAAG,MAAM,UAAU,SAAS,aAC1E,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,mBAAmB,cAAc;"}
+{"version":3,"file":"SliderExtendedMark.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMark.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { SliderExtendedMarkActions } from \"./SliderExtendedMarkActions\";\nimport styles from \"./styles/SliderExtendedMarks.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Свойства компонента SliderExtendedMark. */\nexport interface ISliderExtendedMarkProps extends React.HTMLAttributes<HTMLSpanElement> {\n    /** Значение, на котором стоит метка. Должно быть в диапазоне от min до max. */\n    value: number;\n}\n\n/**\n * Компонент SliderExtendedMark — метка под полосой слайдера.\n * Клик по метке перемещает ближайший SliderExtended.Dot на её значение.\n */\nexport const SliderExtendedMark = React.forwardRef<HTMLSpanElement, ISliderExtendedMarkProps>(\n    ({ children, className, style, value, ...htmlSpanAttributes }, ref) => {\n        const { disabled, dots, min, max, reverse, size } = useContext(SliderExtendedContext);\n\n        const handleClick = () => SliderExtendedMarkActions.moveNearestDot({ dots, value });\n        const textSize = size === EComponentSize.LG ? ETextSize.B3 : ETextSize.B4;\n\n        return (\n            <span\n                className={clsx(styles.sliderExtendedMark, sizeToClassNameMap[size], className, {\n                    // Одна из SliderExtended.Dot, находится на текущей позиции.\n                    [styles.active]: SliderExtendedMarkActions.isActive({ dots, value }) && !disabled,\n                    [styles.disabled]: disabled,\n                    [styles.reverse]: reverse,\n                })}\n                {...htmlSpanAttributes}\n                style={{ ...style, ...SliderExtendedMarkActions.getStyle({ max, min, reverse, value }) }}\n                ref={ref}\n            >\n                <span\n                    className={clsx(styles.sliderExtendedMarkDot, {\n                        [styles.inSelectedRange]: SliderExtendedMarkActions.isInSelectedRange({ dots, min, value }),\n                    })}\n                    onClick={handleClick}\n                />\n                <Text className={styles.sliderExtendedMarkText} size={textSize} onClick={handleClick}>\n                    {children}\n                </Text>\n            </span>\n        );\n    },\n);\n\nSliderExtendedMark.displayName = \"SliderExtendedMark\";\n"],"names":["React"],"mappings":";;;;;;;;;;AAUA,MAAM,qBAAqB,yBAAyB,MAAM;AAYnD,MAAM,qBAAqBA,eAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,OAAO,GAAG,mBAAA,GAAsB,QAAQ;AACnE,UAAM,EAAE,UAAU,MAAM,KAAK,KAAK,SAAS,KAAA,IAAS,WAAW,qBAAqB;AAEpF,UAAM,cAAc,MAAM,0BAA0B,eAAe,EAAE,MAAM,OAAO;AAClF,UAAM,WAAW,SAAS,eAAe,KAAK,UAAU,KAAK,UAAU;AAEvE,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,oBAAoB,mBAAmB,IAAI,GAAG,WAAW;AAAA;AAAA,UAE5E,CAAC,OAAO,MAAM,GAAG,0BAA0B,SAAS,EAAE,MAAM,OAAO,KAAK,CAAC;AAAA,UACzE,CAAC,OAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,OAAO,OAAO,GAAG;AAAA,QAAA,CACrB;AAAA,QACA,GAAG;AAAA,QACJ,OAAO,EAAE,GAAG,OAAO,GAAG,0BAA0B,SAAS,EAAE,KAAK,KAAK,SAAS,MAAA,CAAO,EAAA;AAAA,QACrF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW,KAAK,OAAO,uBAAuB;AAAA,gBAC1C,CAAC,OAAO,eAAe,GAAG,0BAA0B,kBAAkB,EAAE,MAAM,KAAK,MAAA,CAAO;AAAA,cAAA,CAC7F;AAAA,cACD,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAEb,oBAAC,QAAK,WAAW,OAAO,wBAAwB,MAAM,UAAU,SAAS,aACpE,SAAA,CACL;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,mBAAmB,cAAc;"}

package/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarkActions.js

@@ -1,24 +1,12 @@
 import { SliderExtendedUtils } from "../../SliderExtendedUtils.js";
 const SliderExtendedMarkActions = {
   getStyle: ({ min, max, reverse, value }) => {
-    let left = SliderExtendedUtils.getNormalizedValue({ max, min, value });
-    let right = void 0;
-    if (reverse) {
-      if (left === 0) {
-        left = void 0;
-        right = 0;
-      } else {
-        left = `${100 - left}%`;
-      }
-    } else {
-      if (left === 100) {
-        left = void 0;
-        right = 0;
-      } else {
-        left = `${left}%`;
-      }
+    const normalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });
+    const isAtFarEdge = reverse ? normalizedValue === 0 : normalizedValue === 100;
+    if (isAtFarEdge) {
+      return { left: void 0, right: 0 };
     }
-    return { left, right };
+    return { left: `${reverse ? 100 - normalizedValue : normalizedValue}%`, right: void 0 };
   },
   isActive: ({ dots, value }) => dots.some((dot) => dot.value === value),
   isInSelectedRange: ({ value, min, dots }) => {
@@ -38,8 +26,8 @@ const SliderExtendedMarkActions = {
     return minValue <= value && value <= maxValue;
   },
   moveNearestDot: ({ value, dots }) => {
-    const nearestDot = SliderExtendedUtils.getNearestDotByValue({ dots, value });
-    nearestDot.changeValue(value);
+    var _a;
+    (_a = SliderExtendedUtils.getNearestDotByValue({ dots, value })) == null ? void 0 : _a.changeValue(value);
   }
 };
 export {

package/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedMarkActions.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarkActions.ts"],"sourcesContent":["import { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { ISliderExtendedDot } from \"../../SliderExtendedContext\";\n\ninterface ISliderExtendedMarkActions {\n    /**\n     * Возвращает стиль для правильного позиционирования метки.\n     */\n    getStyle: (params: { min: number; max: number; reverse: boolean; value: number }) => {\n        left?: string;\n        right?: number;\n    };\n    /**\n     * Возвращает true, если одна из SliderExtendedDot находится на позиции метки.\n     */\n    isActive: (params: { dots: ISliderExtendedDot[]; value: number }) => boolean;\n    /**\n     * Возвращает true, если метка входит в выбранный диапазон при двух SliderExtendedDots. Либо в диапазон от 0 до текущего значения при одном SliderExtendedDot.\n     */\n    isInSelectedRange: (params: { dots: ISliderExtendedDot[]; min: number; value: number }) => boolean;\n    /**\n     * Перемещает ближайшую SliderExtended.Dor на текущую позицию.\n     */\n    moveNearestDot: (params: { dots: ISliderExtendedDot[]; value: number }) => void;\n}\n\nexport const SliderExtendedMarkActions: ISliderExtendedMarkActions = {\n    getStyle: ({ min, max, reverse, value }) => {\n        let left: string | number | undefined = SliderExtendedUtils.getNormalizedValue({ max, min, value });\n        let right: number | undefined = undefined;\n\n        if (reverse) {\n            if (left === 0) {\n                left = undefined;\n                right = 0;\n            } else {\n                left = `${100 - left}%`;\n            }\n        } else {\n            if (left === 100) {\n                left = undefined;\n                right = 0;\n            } else {\n                left = `${left}%`;\n            }\n        }\n\n        return { left, right };\n    },\n    isActive: ({ dots, value }) => dots.some((dot) => dot.value === value),\n    isInSelectedRange: ({ value, min, dots }) => {\n        if (!dots.length) {\n            return false;\n        }\n\n        // Минимальное значение при 2х SliderExtendedDots или min при одном SliderExtendedDot.\n        let minValue;\n        // Максимальное значение.\n        let maxValue;\n\n        // Слайдер с одной SliderExtendedDots.\n        if (dots.length < 2) {\n            minValue = min;\n            maxValue = dots[0].value;\n        } else {\n            const values = dots.map((dot) => dot.value).sort((a, b) => a - b);\n            minValue = values[0];\n            maxValue = values[1];\n        }\n\n        return minValue <= value && value <= maxValue;\n    },\n    moveNearestDot: ({ value, dots }) => {\n        const nearestDot = SliderExtendedUtils.getNearestDotByValue({ dots, value });\n        nearestDot.changeValue(value);\n    },\n};\n"],"names":[],"mappings":";AAyBO,MAAM,4BAAwD;AAAA,EACjE,UAAU,CAAC,EAAE,KAAK,KAAK,SAAS,YAAY;AACxC,QAAI,OAAoC,oBAAoB,mBAAmB,EAAE,KAAK,KAAK,OAAO;AAClG,QAAI,QAA4B;AAEhC,QAAI,SAAS;AACT,UAAI,SAAS,GAAG;AACZ,eAAO;AACP,gBAAQ;AAAA,MACZ,OAAO;AACH,eAAO,GAAG,MAAM,IAAI;AAAA,MACxB;AAAA,IACJ,OAAO;AACH,UAAI,SAAS,KAAK;AACd,eAAO;AACP,gBAAQ;AAAA,MACZ,OAAO;AACH,eAAO,GAAG,IAAI;AAAA,MAClB;AAAA,IACJ;AAEA,WAAO,EAAE,MAAM,MAAA;AAAA,EACnB;AAAA,EACA,UAAU,CAAC,EAAE,MAAM,YAAY,KAAK,KAAK,CAAC,QAAQ,IAAI,UAAU,KAAK;AAAA,EACrE,mBAAmB,CAAC,EAAE,OAAO,KAAK,WAAW;AACzC,QAAI,CAAC,KAAK,QAAQ;AACd,aAAO;AAAA,IACX;AAGA,QAAI;AAEJ,QAAI;AAGJ,QAAI,KAAK,SAAS,GAAG;AACjB,iBAAW;AACX,iBAAW,KAAK,CAAC,EAAE;AAAA,IACvB,OAAO;AACH,YAAM,SAAS,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAChE,iBAAW,OAAO,CAAC;AACnB,iBAAW,OAAO,CAAC;AAAA,IACvB;AAEA,WAAO,YAAY,SAAS,SAAS;AAAA,EACzC;AAAA,EACA,gBAAgB,CAAC,EAAE,OAAO,WAAW;AACjC,UAAM,aAAa,oBAAoB,qBAAqB,EAAE,MAAM,OAAO;AAC3E,eAAW,YAAY,KAAK;AAAA,EAChC;AACJ;"}
+{"version":3,"file":"SliderExtendedMarkActions.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarkActions.ts"],"sourcesContent":["import { SliderExtendedUtils } from \"../../SliderExtendedUtils\";\nimport { ISliderExtendedDot } from \"../../SliderExtendedContext\";\n\ninterface ISliderExtendedMarkActions {\n    /**\n     * Возвращает стиль для правильного позиционирования метки.\n     * Метка на дальнем краю полосы прижимается к нему через right, чтобы не выходить за границы.\n     */\n    getStyle: (params: { min: number; max: number; reverse: boolean; value: number }) => {\n        left?: string;\n        right?: number;\n    };\n    /**\n     * Возвращает true, если одна из SliderExtendedDot находится на позиции метки.\n     */\n    isActive: (params: { dots: ISliderExtendedDot[]; value: number }) => boolean;\n    /**\n     * Возвращает true, если метка входит в выбранный диапазон при двух SliderExtendedDots. Либо в диапазон от min до текущего значения при одном SliderExtendedDot.\n     */\n    isInSelectedRange: (params: { dots: ISliderExtendedDot[]; min: number; value: number }) => boolean;\n    /**\n     * Перемещает ближайшую SliderExtendedDot на позицию метки.\n     */\n    moveNearestDot: (params: { dots: ISliderExtendedDot[]; value: number }) => void;\n}\n\nexport const SliderExtendedMarkActions: ISliderExtendedMarkActions = {\n    getStyle: ({ min, max, reverse, value }) => {\n        const normalizedValue = SliderExtendedUtils.getNormalizedValue({ max, min, value });\n        // Метка у дальнего края полосы: в обычном слайдере это 100%, в реверсивном — 0%.\n        const isAtFarEdge = reverse ? normalizedValue === 0 : normalizedValue === 100;\n\n        if (isAtFarEdge) {\n            return { left: undefined, right: 0 };\n        }\n\n        return { left: `${reverse ? 100 - normalizedValue : normalizedValue}%`, right: undefined };\n    },\n    isActive: ({ dots, value }) => dots.some((dot) => dot.value === value),\n    isInSelectedRange: ({ value, min, dots }) => {\n        if (!dots.length) {\n            return false;\n        }\n\n        // Минимальное значение при 2х SliderExtendedDots или min при одном SliderExtendedDot.\n        let minValue;\n        // Максимальное значение.\n        let maxValue;\n\n        // Слайдер с одной SliderExtendedDots.\n        if (dots.length < 2) {\n            minValue = min;\n            maxValue = dots[0].value;\n        } else {\n            const values = dots.map((dot) => dot.value).sort((a, b) => a - b);\n            minValue = values[0];\n            maxValue = values[1];\n        }\n\n        return minValue <= value && value <= maxValue;\n    },\n    moveNearestDot: ({ value, dots }) => {\n        SliderExtendedUtils.getNearestDotByValue({ dots, value })?.changeValue(value);\n    },\n};\n"],"names":[],"mappings":";AA0BO,MAAM,4BAAwD;AAAA,EACjE,UAAU,CAAC,EAAE,KAAK,KAAK,SAAS,YAAY;AACxC,UAAM,kBAAkB,oBAAoB,mBAAmB,EAAE,KAAK,KAAK,OAAO;AAElF,UAAM,cAAc,UAAU,oBAAoB,IAAI,oBAAoB;AAE1E,QAAI,aAAa;AACb,aAAO,EAAE,MAAM,QAAW,OAAO,EAAA;AAAA,IACrC;AAEA,WAAO,EAAE,MAAM,GAAG,UAAU,MAAM,kBAAkB,eAAe,KAAK,OAAO,OAAA;AAAA,EACnF;AAAA,EACA,UAAU,CAAC,EAAE,MAAM,YAAY,KAAK,KAAK,CAAC,QAAQ,IAAI,UAAU,KAAK;AAAA,EACrE,mBAAmB,CAAC,EAAE,OAAO,KAAK,WAAW;AACzC,QAAI,CAAC,KAAK,QAAQ;AACd,aAAO;AAAA,IACX;AAGA,QAAI;AAEJ,QAAI;AAGJ,QAAI,KAAK,SAAS,GAAG;AACjB,iBAAW;AACX,iBAAW,KAAK,CAAC,EAAE;AAAA,IACvB,OAAO;AACH,YAAM,SAAS,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAChE,iBAAW,OAAO,CAAC;AACnB,iBAAW,OAAO,CAAC;AAAA,IACvB;AAEA,WAAO,YAAY,SAAS,SAAS;AAAA,EACzC;AAAA,EACA,gBAAgB,CAAC,EAAE,OAAO,WAAW;;AACjC,8BAAoB,qBAAqB,EAAE,MAAM,OAAO,MAAxD,mBAA2D,YAAY;AAAA,EAC3E;AACJ;"}

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

@@ -1,7 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../../chunks/vendor-DfvHt3TJ.js";
-import { s as styles } from "../../../../chunks/SliderExtendedMarks.module-Dbz1svyX.js";
-const SliderExtendedMarks = ({ className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.sliderExtendedMarks, className), ...htmlDivAttributes });
+import React__default from "react";
+import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
+import { s as styles } from "../../../../chunks/SliderExtendedMarks.module-CuyZnXA3.js";
+const SliderExtendedMarks = React__default.forwardRef(
+  ({ className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.sliderExtendedMarks, className), ...htmlDivAttributes, ref })
+);
 SliderExtendedMarks.displayName = "SliderExtendedMarks";
 export {
   SliderExtendedMarks

package/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarks.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedMarks.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarks.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/SliderExtendedMarks.module.less\";\n\nexport interface ISliderExtendedMarksProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Компонент SliderExtendedMarks.\n */\nexport const SliderExtendedMarks: React.FC<ISliderExtendedMarksProps> = ({ className, ...htmlDivAttributes }) => (\n    <div className={clsx(styles.sliderExtendedMarks, className)} {...htmlDivAttributes} />\n);\n\nSliderExtendedMarks.displayName = \"SliderExtendedMarks\";\n"],"names":[],"mappings":";;;AASO,MAAM,sBAA2D,CAAC,EAAE,WAAW,GAAG,wBACrF,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,qBAAqB,SAAS,GAAI,GAAG,kBAAA,CAAmB;AAGxF,oBAAoB,cAAc;"}
+{"version":3,"file":"SliderExtendedMarks.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedMarks/SliderExtendedMarks.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/SliderExtendedMarks.module.less\";\n\n/** Свойства компонента SliderExtendedMarks. */\nexport interface ISliderExtendedMarksProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Компонент SliderExtendedMarks — контейнер меток под полосой слайдера.\n * Содержимое — набор SliderExtended.Mark; первая и последняя метки прижимаются к краям полосы.\n */\nexport const SliderExtendedMarks = React.forwardRef<HTMLDivElement, ISliderExtendedMarksProps>(\n    ({ className, ...htmlDivAttributes }, ref) => (\n        <div className={clsx(styles.sliderExtendedMarks, className)} {...htmlDivAttributes} ref={ref} />\n    ),\n);\n\nSliderExtendedMarks.displayName = \"SliderExtendedMarks\";\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,sBAAsBA,eAAM;AAAA,EACrC,CAAC,EAAE,WAAW,GAAG,kBAAA,GAAqB,QAClC,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,qBAAqB,SAAS,GAAI,GAAG,mBAAmB,IAAA,CAAU;AAEtG;AAEA,oBAAoB,cAAc;"}

package/components/SliderExtended/components/SliderExtendedMoveHandler.js

@@ -1,31 +1,36 @@
 import { jsx, Fragment } from "react/jsx-runtime";
+import { t as throttle } from "../../../chunks/vendor-D4wvHis9.js";
+const DEFAULT_MOUSE_MOVE_WAIT = 50;
 const SliderExtendedMoveHandler = ({
   children,
+  mouseMoveWait = DEFAULT_MOUSE_MOVE_WAIT,
   onMouseMove,
   onTouchMove,
   targetRef
 }) => {
-  const removeMouseListeners = () => {
-    document.removeEventListener("mousemove", onMouseMove);
-    document.removeEventListener("mouseup", removeMouseListeners);
-  };
-  const removeTouchListeners = () => {
-    var _a, _b;
-    if (targetRef.current) {
-      (_a = targetRef.current) == null ? void 0 : _a.removeEventListener("touchmove", onTouchMove);
-      (_b = targetRef.current) == null ? void 0 : _b.removeEventListener("touchend", removeTouchListeners);
-    }
-  };
   const onTargetMouseDown = () => {
-    document.addEventListener("mousemove", onMouseMove);
+    const throttledMouseMove = throttle(onMouseMove, mouseMoveWait);
+    const removeMouseListeners = () => {
+      throttledMouseMove.flush();
+      document.removeEventListener("mousemove", throttledMouseMove);
+      document.removeEventListener("mouseup", removeMouseListeners);
+    };
+    document.addEventListener("mousemove", throttledMouseMove);
     document.addEventListener("mouseup", removeMouseListeners);
   };
   const onTargetTouchStart = () => {
-    var _a, _b;
-    if (targetRef.current) {
-      (_a = targetRef.current) == null ? void 0 : _a.addEventListener("touchmove", onTouchMove);
-      (_b = targetRef.current) == null ? void 0 : _b.addEventListener("touchend", removeTouchListeners);
+    const target = targetRef.current;
+    if (!target) {
+      return;
     }
+    const throttledTouchMove = throttle(onTouchMove);
+    const removeTouchListeners = () => {
+      throttledTouchMove.flush();
+      target.removeEventListener("touchmove", throttledTouchMove);
+      target.removeEventListener("touchend", removeTouchListeners);
+    };
+    target.addEventListener("touchmove", throttledTouchMove);
+    target.addEventListener("touchend", removeTouchListeners);
   };
   return /* @__PURE__ */ jsx(Fragment, { children: children({ onTargetMouseDown, onTargetTouchStart }) });
 };

package/components/SliderExtended/components/SliderExtendedMoveHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedMoveHandler.js","sources":["../../../../src/components/SliderExtended/components/SliderExtendedMoveHandler.tsx"],"sourcesContent":["import React from \"react\";\n\n/** Обработчик события onMouseDown. */\nexport type TOnTargetMouseDown = (event: React.MouseEvent) => void;\n\n/** Обработчик события onTouchStart. */\nexport type TOnTargetTouchStart = (event: React.TouchEvent) => void;\n\n/** Render-функция children. */\ntype TSliderExtendedMoveHandlerChildren = ({\n    onTargetMouseDown,\n    onTargetTouchStart,\n}: {\n    /** Обработчик нажатия мыши по target. */\n    onTargetMouseDown: TOnTargetMouseDown;\n    /** Обработчик касания по target. */\n    onTargetTouchStart: TOnTargetTouchStart;\n}) => React.ReactNode;\n\nexport interface ISliderExtendedMoveHandlerProps {\n    children: TSliderExtendedMoveHandlerChildren;\n    /** Слушатель движения мыши. */\n    onMouseMove: (event: MouseEvent) => void;\n    /** Слушатель сенсорного движения. */\n    onTouchMove: (event: TouchEvent) => void;\n    /** Ссылка на элемент. */\n    targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * Обработчик перемещения компонента. Отслеживает перемещение курсора после клика по target и вызывает onMouseMove.\n */\nexport const SliderExtendedMoveHandler: React.FC<ISliderExtendedMoveHandlerProps> = ({\n    children,\n    onMouseMove,\n    onTouchMove,\n    targetRef,\n}) => {\n    const removeMouseListeners = () => {\n        document.removeEventListener(\"mousemove\", onMouseMove);\n        document.removeEventListener(\"mouseup\", removeMouseListeners);\n    };\n\n    const removeTouchListeners = () => {\n        if (targetRef.current) {\n            targetRef.current?.removeEventListener(\"touchmove\", onTouchMove);\n            targetRef.current?.removeEventListener(\"touchend\", removeTouchListeners);\n        }\n    };\n\n    const onTargetMouseDown = () => {\n        document.addEventListener(\"mousemove\", onMouseMove);\n        document.addEventListener(\"mouseup\", removeMouseListeners);\n    };\n\n    const onTargetTouchStart = () => {\n        if (targetRef.current) {\n            targetRef.current?.addEventListener(\"touchmove\", onTouchMove);\n            targetRef.current?.addEventListener(\"touchend\", removeTouchListeners);\n        }\n    };\n\n    // eslint-disable-next-line react-hooks/refs\n    return <>{children({ onTargetMouseDown, onTargetTouchStart })}</>;\n};\n\nSliderExtendedMoveHandler.displayName = \"SliderExtendedMoveHandler\";\n"],"names":[],"mappings":";AAgCO,MAAM,4BAAuE,CAAC;AAAA,EACjF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,uBAAuB,MAAM;AAC/B,aAAS,oBAAoB,aAAa,WAAW;AACrD,aAAS,oBAAoB,WAAW,oBAAoB;AAAA,EAChE;AAEA,QAAM,uBAAuB,MAAM;;AAC/B,QAAI,UAAU,SAAS;AACnB,sBAAU,YAAV,mBAAmB,oBAAoB,aAAa;AACpD,sBAAU,YAAV,mBAAmB,oBAAoB,YAAY;AAAA,IACvD;AAAA,EACJ;AAEA,QAAM,oBAAoB,MAAM;AAC5B,aAAS,iBAAiB,aAAa,WAAW;AAClD,aAAS,iBAAiB,WAAW,oBAAoB;AAAA,EAC7D;AAEA,QAAM,qBAAqB,MAAM;;AAC7B,QAAI,UAAU,SAAS;AACnB,sBAAU,YAAV,mBAAmB,iBAAiB,aAAa;AACjD,sBAAU,YAAV,mBAAmB,iBAAiB,YAAY;AAAA,IACpD;AAAA,EACJ;AAGA,yCAAU,UAAA,SAAS,EAAE,mBAAmB,mBAAA,CAAoB,GAAE;AAClE;AAEA,0BAA0B,cAAc;"}
+{"version":3,"file":"SliderExtendedMoveHandler.js","sources":["../../../../src/components/SliderExtended/components/SliderExtendedMoveHandler.tsx"],"sourcesContent":["import React from \"react\";\nimport { throttle } from \"lodash-es\";\n\n/** Интервал троттлинга перемещения мыши по умолчанию, мс. */\nconst DEFAULT_MOUSE_MOVE_WAIT = 50;\n\n/** Обработчик события onMouseDown. */\nexport type TOnTargetMouseDown = (event: React.MouseEvent) => void;\n\n/** Обработчик события onTouchStart. */\nexport type TOnTargetTouchStart = (event: React.TouchEvent) => void;\n\n/** Render-функция children. */\ntype TSliderExtendedMoveHandlerChildren = ({\n    onTargetMouseDown,\n    onTargetTouchStart,\n}: {\n    /** Обработчик нажатия мыши по target. */\n    onTargetMouseDown: TOnTargetMouseDown;\n    /** Обработчик касания по target. */\n    onTargetTouchStart: TOnTargetTouchStart;\n}) => React.ReactNode;\n\n/** Свойства компонента SliderExtendedMoveHandler. */\nexport interface ISliderExtendedMoveHandlerProps {\n    /** Render-функция, получающая обработчики начала перемещения. */\n    children: TSliderExtendedMoveHandlerChildren;\n    /** Интервал троттлинга слушателя движения мыши, мс. По умолчанию 50. */\n    mouseMoveWait?: number;\n    /** Слушатель движения мыши. */\n    onMouseMove: (event: MouseEvent) => void;\n    /** Слушатель сенсорного движения. */\n    onTouchMove: (event: TouchEvent) => void;\n    /** Ссылка на элемент. */\n    targetRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Обработчик перемещения компонента. Отслеживает перемещение курсора после нажатия по target\n * и вызывает onMouseMove (onTouchMove для касания), пока курсор не отпущен.\n */\nexport const SliderExtendedMoveHandler: React.FC<ISliderExtendedMoveHandlerProps> = ({\n    children,\n    mouseMoveWait = DEFAULT_MOUSE_MOVE_WAIT,\n    onMouseMove,\n    onTouchMove,\n    targetRef,\n}) => {\n    /**\n     * Троттлящая обёртка создаётся в обработчике нажатия, а не во время рендера: обёртка живёт\n     * ровно одно перетаскивание, отписка получает ту же ссылку, а обработчики, читающие ref,\n     * не попадают в вызов throttle() во время рендера.\n     */\n    const onTargetMouseDown = () => {\n        const throttledMouseMove = throttle(onMouseMove, mouseMoveWait);\n\n        const removeMouseListeners = () => {\n            // flush, а не cancel: отложенный вызов доводит перемещение до точки отпускания.\n            // При cancel() быстрый drag терял последний отрезок в пределах окна троттлинга.\n            throttledMouseMove.flush();\n            document.removeEventListener(\"mousemove\", throttledMouseMove);\n            document.removeEventListener(\"mouseup\", removeMouseListeners);\n        };\n\n        document.addEventListener(\"mousemove\", throttledMouseMove);\n        document.addEventListener(\"mouseup\", removeMouseListeners);\n    };\n\n    const onTargetTouchStart = () => {\n        const target = targetRef.current;\n\n        if (!target) {\n            return;\n        }\n\n        // Слушатель касания вешается на сам элемент, чтобы обработчик мог вызвать preventDefault.\n        const throttledTouchMove = throttle(onTouchMove);\n\n        const removeTouchListeners = () => {\n            // flush по той же причине, что и в mouse-пути.\n            throttledTouchMove.flush();\n            target.removeEventListener(\"touchmove\", throttledTouchMove);\n            target.removeEventListener(\"touchend\", removeTouchListeners);\n        };\n\n        target.addEventListener(\"touchmove\", throttledTouchMove);\n        target.addEventListener(\"touchend\", removeTouchListeners);\n    };\n\n    // Обработчики читают targetRef только по событию, но правило видит их передачу\n    // в вызов children() во время рендера — это и есть контракт render-функции.\n    // eslint-disable-next-line react-hooks/refs\n    return <>{children({ onTargetMouseDown, onTargetTouchStart })}</>;\n};\n\nSliderExtendedMoveHandler.displayName = \"SliderExtendedMoveHandler\";\n"],"names":[],"mappings":";;AAIA,MAAM,0BAA0B;AAqCzB,MAAM,4BAAuE,CAAC;AAAA,EACjF;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AAMF,QAAM,oBAAoB,MAAM;AAC5B,UAAM,qBAAqB,SAAS,aAAa,aAAa;AAE9D,UAAM,uBAAuB,MAAM;AAG/B,yBAAmB,MAAA;AACnB,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,eAAS,oBAAoB,WAAW,oBAAoB;AAAA,IAChE;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,aAAS,iBAAiB,WAAW,oBAAoB;AAAA,EAC7D;AAEA,QAAM,qBAAqB,MAAM;AAC7B,UAAM,SAAS,UAAU;AAEzB,QAAI,CAAC,QAAQ;AACT;AAAA,IACJ;AAGA,UAAM,qBAAqB,SAAS,WAAW;AAE/C,UAAM,uBAAuB,MAAM;AAE/B,yBAAmB,MAAA;AACnB,aAAO,oBAAoB,aAAa,kBAAkB;AAC1D,aAAO,oBAAoB,YAAY,oBAAoB;AAAA,IAC/D;AAEA,WAAO,iBAAiB,aAAa,kBAAkB;AACvD,WAAO,iBAAiB,YAAY,oBAAoB;AAAA,EAC5D;AAKA,yCAAU,UAAA,SAAS,EAAE,mBAAmB,mBAAA,CAAoB,GAAE;AAClE;AAEA,0BAA0B,cAAc;"}

package/components/SliderExtended/components/SliderExtendedRail.js

@@ -1,9 +1,10 @@
 import "react/jsx-runtime";
 import "react";
+import "../../../chunks/vendor-D4wvHis9.js";
 import "../SliderExtendedContext.js";
 import "../SliderExtendedUtils.js";
-import "../../../chunks/vendor-DfvHt3TJ.js";
-import { S } from "../../../chunks/SliderExtendedRail-XBqZJdJj.js";
+import "../utils.js";
+import { S } from "../../../chunks/SliderExtendedRail-CBpr9S0R.js";
 export {
   S as SliderExtendedRail
 };

package/components/SliderExtended/components/SliderExtendedRail.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedRail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"SliderExtendedRail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
-import { SliderExtendedContext } from "../../SliderExtendedContext.js";
-import { c as clsx } from "../../../../chunks/vendor-DfvHt3TJ.js";
+import React__default, { useState, useContext, useCallback } from "react";
+import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
 import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
-const sliderExtendedTooltipOverlay = "sliderExtendedTooltipOverlay__22d4e186";
-const lg = "lg__0ca2c489";
-const tooltipBody = "tooltipBody__c578b2ce";
-const tooltipTip = "tooltipTip__16640c90";
+import { SliderExtendedContext } from "../../SliderExtendedContext.js";
+import { setForwardedRef } from "../../utils.js";
+const sliderExtendedTooltipOverlay = "sliderExtendedTooltipOverlay__1982a7b8";
+const lg = "lg__eb1e1db2";
+const tooltipBody = "tooltipBody__c888391c";
+const tooltipTip = "tooltipTip__e1cd0765";
 const styles = {
   sliderExtendedTooltipOverlay,
   lg,
@@ -14,37 +15,47 @@ const styles = {
   tooltipTip
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const SliderExtendedTooltip = ({
-  value,
-  children,
-  ...htmlAttributes
+const TIP_HALF_WIDTH = 8;
+const OFFSET_FROM_SIDE = 16;
+const getTooltipBodyOffset = ({
+  contentWidth,
+  max,
+  min,
+  value
 }) => {
-  const tooltipContentRef = React__default.useRef(null);
-  const { min, max, size } = React__default.useContext(SliderExtendedContext);
-  const calculateOffset = () => {
-    var _a;
-    if (!tooltipContentRef.current || value === void 0) {
-      return 0;
-    }
-    const tipHalfWidth = 8;
-    const offsetFromSide = 16;
-    const contentWidth = ((_a = tooltipContentRef.current) == null ? void 0 : _a.clientWidth) || 0;
-    const normalizedValue = (value - min) / (max - min);
-    return (contentWidth / 2 - tipHalfWidth - offsetFromSide) * (1 - 2 * normalizedValue);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: tooltipContentRef,
-      className: clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size]),
-      ...htmlAttributes,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: clsx(styles.tooltipBody), style: { left: `${calculateOffset()}px` }, children }),
-        /* @__PURE__ */ jsx("div", { className: clsx(styles.tooltipTip) })
-      ]
-    }
-  );
+  if (value === void 0 || max === min) {
+    return 0;
+  }
+  const normalizedValue = (value - min) / (max - min);
+  return (contentWidth / 2 - TIP_HALF_WIDTH - OFFSET_FROM_SIDE) * (1 - 2 * normalizedValue);
 };
+const SliderExtendedTooltip = React__default.forwardRef(
+  ({ children, className, value, ...htmlDivAttributes }, ref) => {
+    const [contentNode, setContentNode] = useState(null);
+    const { min, max, size } = useContext(SliderExtendedContext);
+    const setRef = useCallback(
+      (instance) => {
+        setContentNode(instance);
+        setForwardedRef(ref, instance);
+      },
+      [ref]
+    );
+    const offset = getTooltipBodyOffset({ contentWidth: (contentNode == null ? void 0 : contentNode.clientWidth) ?? 0, max, min, value });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size], className),
+        ...htmlDivAttributes,
+        ref: setRef,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.tooltipBody, style: { left: `${offset}px` }, children }),
+          /* @__PURE__ */ jsx("div", { className: styles.tooltipTip })
+        ]
+      }
+    );
+  }
+);
+SliderExtendedTooltip.displayName = "SliderExtendedTooltip";
 export {
   SliderExtendedTooltip
 };

package/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExtendedTooltip.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.tsx"],"sourcesContent":["import React from \"react\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/SliderExtendedTooltip.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Свойства компонента SliderExtendedTooltip. */\nexport interface ISliderExtendedTooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n    value?: number;\n}\n\nexport const SliderExtendedTooltip: React.FC<ISliderExtendedTooltipProps> = ({\n    value,\n    children,\n    ...htmlAttributes\n}) => {\n    const tooltipContentRef = React.useRef<HTMLDivElement | null>(null);\n    const { min, max, size } = React.useContext(SliderExtendedContext);\n\n    const calculateOffset = () => {\n        if (!tooltipContentRef.current || value === undefined) {\n            return 0;\n        }\n\n        const tipHalfWidth = 8;\n        const offsetFromSide = 16;\n        const contentWidth = tooltipContentRef.current?.clientWidth || 0;\n        const normalizedValue = (value - min) / (max - min);\n\n        return (contentWidth / 2 - tipHalfWidth - offsetFromSide) * (1 - 2 * normalizedValue);\n    };\n\n    return (\n        <div\n            ref={tooltipContentRef}\n            className={clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size])}\n            {...htmlAttributes}\n        >\n            {/* eslint-disable-next-line react-hooks/refs */}\n            <div className={clsx(styles.tooltipBody)} style={{ left: `${calculateOffset()}px` }}>\n                {children}\n            </div>\n            <div className={clsx(styles.tooltipTip)} />\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,yBAAyB,MAAM;AAOnD,MAAM,wBAA+D,CAAC;AAAA,EACzE;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,oBAAoBA,eAAM,OAA8B,IAAI;AAClE,QAAM,EAAE,KAAK,KAAK,SAASA,eAAM,WAAW,qBAAqB;AAEjE,QAAM,kBAAkB,MAAM;;AAC1B,QAAI,CAAC,kBAAkB,WAAW,UAAU,QAAW;AACnD,aAAO;AAAA,IACX;AAEA,UAAM,eAAe;AACrB,UAAM,iBAAiB;AACvB,UAAM,iBAAe,uBAAkB,YAAlB,mBAA2B,gBAAe;AAC/D,UAAM,mBAAmB,QAAQ,QAAQ,MAAM;AAE/C,YAAQ,eAAe,IAAI,eAAe,mBAAmB,IAAI,IAAI;AAAA,EACzE;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,8BAA8B,mBAAmB,IAAI,CAAC;AAAA,MAC5E,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,GAAG,OAAO,EAAE,MAAM,GAAG,gBAAA,CAAiB,KAAA,GACxE,UACL;AAAA,4BACC,OAAA,EAAI,WAAW,KAAK,OAAO,UAAU,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrD;"}
+{"version":3,"file":"SliderExtendedTooltip.js","sources":["../../../../../src/components/SliderExtended/components/SliderExtendedTooltip/SliderExtendedTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SliderExtendedContext } from \"../../SliderExtendedContext\";\nimport { setForwardedRef } from \"../../utils\";\nimport styles from \"./styles/SliderExtendedTooltip.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Половина ширины уголка тултипа, px. */\nconst TIP_HALF_WIDTH = 8;\n\n/** Минимальный отступ тултипа от края полосы слайдера, px. */\nconst OFFSET_FROM_SIDE = 16;\n\n/**\n * Возвращает сдвиг тела тултипа по горизонтали, px.\n * У краёв полосы тултип сдвигается к центру, чтобы не выходить за её границы, в середине сдвиг равен нулю.\n */\nconst getTooltipBodyOffset = ({\n    contentWidth,\n    max,\n    min,\n    value,\n}: {\n    contentWidth: number;\n    max: number;\n    min: number;\n    value?: number;\n}): number => {\n    if (value === undefined || max === min) {\n        return 0;\n    }\n\n    const normalizedValue = (value - min) / (max - min);\n\n    return (contentWidth / 2 - TIP_HALF_WIDTH - OFFSET_FROM_SIDE) * (1 - 2 * normalizedValue);\n};\n\n/** Свойства компонента SliderExtendedTooltip. */\nexport interface ISliderExtendedTooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Значение позиции ползунка, над которым показан тултип. Нужно для сдвига тултипа у краёв полосы. */\n    value?: number;\n}\n\n/**\n * Компонент SliderExtendedTooltip — подсказка над ползунком.\n * Рендерится внутри SliderExtended.Dot и видима, пока ползунок в фокусе или под курсором.\n */\nexport const SliderExtendedTooltip = React.forwardRef<HTMLDivElement, ISliderExtendedTooltipProps>(\n    ({ children, className, value, ...htmlDivAttributes }, ref) => {\n        // Узел тултипа в состоянии, а не в ref: его ширина нужна во время рендера для расчёта сдвига.\n        const [contentNode, setContentNode] = useState<HTMLDivElement | null>(null);\n        const { min, max, size } = useContext(SliderExtendedContext);\n\n        const setRef = useCallback(\n            (instance: HTMLDivElement | null) => {\n                setContentNode(instance);\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        const offset = getTooltipBodyOffset({ contentWidth: contentNode?.clientWidth ?? 0, max, min, value });\n\n        return (\n            <div\n                className={clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size], className)}\n                {...htmlDivAttributes}\n                ref={setRef}\n            >\n                <div className={styles.tooltipBody} style={{ left: `${offset}px` }}>\n                    {children}\n                </div>\n                <div className={styles.tooltipTip} />\n            </div>\n        );\n    },\n);\n\nSliderExtendedTooltip.displayName = \"SliderExtendedTooltip\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;AAOA,MAAM,qBAAqB,yBAAyB,MAAM;AAG1D,MAAM,iBAAiB;AAGvB,MAAM,mBAAmB;AAMzB,MAAM,uBAAuB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAKc;AACV,MAAI,UAAU,UAAa,QAAQ,KAAK;AACpC,WAAO;AAAA,EACX;AAEA,QAAM,mBAAmB,QAAQ,QAAQ,MAAM;AAE/C,UAAQ,eAAe,IAAI,iBAAiB,qBAAqB,IAAI,IAAI;AAC7E;AAYO,MAAM,wBAAwBA,eAAM;AAAA,EACvC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,kBAAA,GAAqB,QAAQ;AAE3D,UAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,IAAI;AAC1E,UAAM,EAAE,KAAK,KAAK,KAAA,IAAS,WAAW,qBAAqB;AAE3D,UAAM,SAAS;AAAA,MACX,CAAC,aAAoC;AACjC,uBAAe,QAAQ;AACvB,wBAAgB,KAAK,QAAQ;AAAA,MACjC;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGR,UAAM,SAAS,qBAAqB,EAAE,eAAc,2CAAa,gBAAe,GAAG,KAAK,KAAK,OAAO;AAEpG,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,8BAA8B,mBAAmB,IAAI,GAAG,SAAS;AAAA,QACvF,GAAG;AAAA,QACJ,KAAK;AAAA,QAEL,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAa,OAAO,EAAE,MAAM,GAAG,MAAM,KAAA,GACvD,SAAA,CACL;AAAA,UACA,oBAAC,OAAA,EAAI,WAAW,OAAO,WAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/C;AACJ;AAEA,sBAAsB,cAAc;"}