@sberbusiness/triplex-next 1.34.0 → 1.35.1

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

@@ -1,27 +1,48 @@
-import { SliderExtendedUtils as s } from "../../SliderExtendedUtils.js";
-const d = {
-  getStyle: ({ min: t, max: i, reverse: l, value: a }) => {
-    let e = s.getNormalizedValue({ max: i, min: t, value: a }), r;
-    return l ? e === 0 ? (e = void 0, r = 0) : e = `${100 - e}%` : e === 100 ? (e = void 0, r = 0) : e = `${e}%`, { left: e, right: r };
+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}%`;
+      }
+    }
+    return { left, right };
   },
-  isActive: ({ dots: t, value: i }) => t.some((l) => l.value === i),
-  isInSelectedRange: ({ value: t, min: i, dots: l }) => {
-    if (!l.length)
-      return !1;
-    let a, e;
-    if (l.length < 2)
-      a = i, e = l[0].value;
-    else {
-      const r = l.map((n) => n.value).sort((n, o) => n - o);
-      a = r[0], e = r[1];
+  isActive: ({ dots, value }) => dots.some((dot) => dot.value === value),
+  isInSelectedRange: ({ value, min, dots }) => {
+    if (!dots.length) {
+      return false;
+    }
+    let minValue;
+    let maxValue;
+    if (dots.length < 2) {
+      minValue = min;
+      maxValue = dots[0].value;
+    } else {
+      const values = dots.map((dot) => dot.value).sort((a, b) => a - b);
+      minValue = values[0];
+      maxValue = values[1];
     }
-    return a <= t && t <= e;
+    return minValue <= value && value <= maxValue;
   },
-  moveNearestDot: ({ value: t, dots: i }) => {
-    s.getNearestDotByValue({ dots: i, value: t }).changeValue(t);
+  moveNearestDot: ({ value, dots }) => {
+    const nearestDot = SliderExtendedUtils.getNearestDotByValue({ dots, value });
+    nearestDot.changeValue(value);
   }
 };
 export {
-  d as SliderExtendedMarkActions
+  SliderExtendedMarkActions
 };
 //# sourceMappingURL=SliderExtendedMarkActions.js.map

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

@@ -0,0 +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;"}

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

@@ -1,9 +1,9 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as d } from "../../../../chunks/vendor-D5cfSbgz.js";
-import { s as a } from "../../../../chunks/SliderExtendedMarks.module-BONXJjKi.js";
-const t = ({ className: s, ...e }) => /* @__PURE__ */ r("div", { className: d(a.sliderExtendedMarks, s), ...e });
-t.displayName = "SliderExtendedMarks";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../../chunks/vendor-Bco_z_Yi.js";
+import { s as styles } from "../../../../chunks/SliderExtendedMarks.module-BI35Qnas.js";
+const SliderExtendedMarks = ({ className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.sliderExtendedMarks, className), ...htmlDivAttributes });
+SliderExtendedMarks.displayName = "SliderExtendedMarks";
 export {
-  t as SliderExtendedMarks
+  SliderExtendedMarks
 };
 //# sourceMappingURL=SliderExtendedMarks.js.map

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

@@ -0,0 +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;"}

package/components/SliderExtended/components/SliderExtendedMoveHandler.js

@@ -1,25 +1,36 @@
-import { jsx as c, Fragment as m } from "react/jsx-runtime";
-const v = ({
-  children: d,
-  onMouseMove: r,
-  onTouchMove: o,
-  targetRef: e
+import { jsx, Fragment } from "react/jsx-runtime";
+const SliderExtendedMoveHandler = ({
+  children,
+  onMouseMove,
+  onTouchMove,
+  targetRef
 }) => {
-  const s = () => {
-    document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", s);
-  }, u = () => {
-    var n, t;
-    e.current && ((n = e.current) == null || n.removeEventListener("touchmove", o), (t = e.current) == null || t.removeEventListener("touchend", u));
+  const removeMouseListeners = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", removeMouseListeners);
   };
-  return /* @__PURE__ */ c(m, { children: d({ onTargetMouseDown: () => {
-    document.addEventListener("mousemove", r), document.addEventListener("mouseup", s);
-  }, onTargetTouchStart: () => {
-    var n, t;
-    e.current && ((n = e.current) == null || n.addEventListener("touchmove", o), (t = e.current) == null || t.addEventListener("touchend", u));
-  } }) });
+  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);
+    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);
+    }
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: children({ onTargetMouseDown, onTargetTouchStart }) });
 };
-v.displayName = "SliderExtendedMoveHandler";
+SliderExtendedMoveHandler.displayName = "SliderExtendedMoveHandler";
 export {
-  v as SliderExtendedMoveHandler
+  SliderExtendedMoveHandler
 };
 //# sourceMappingURL=SliderExtendedMoveHandler.js.map

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

@@ -0,0 +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;"}

package/components/SliderExtended/components/SliderExtendedRail.js

@@ -2,9 +2,9 @@ import "react/jsx-runtime";
 import "react";
 import "../SliderExtendedContext.js";
 import "../SliderExtendedUtils.js";
-import "../../../chunks/vendor-D5cfSbgz.js";
-import { S as d } from "../../../chunks/SliderExtendedRail-DmkehIF9.js";
+import "../../../chunks/vendor-Bco_z_Yi.js";
+import { S } from "../../../chunks/SliderExtendedRail-ATcxFJAR.js";
 export {
-  d as SliderExtendedRail
+  S as SliderExtendedRail
 };
 //# sourceMappingURL=SliderExtendedRail.js.map

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

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

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

@@ -1,39 +1,51 @@
-import { jsxs as y, jsx as d } from "react/jsx-runtime";
-import n from "react";
-import { SliderExtendedContext as _ } from "../../SliderExtendedContext.js";
-import { c as e } from "../../../../chunks/vendor-D5cfSbgz.js";
-import { createSizeToClassNameMap as v } from "../../../../utils/classNameMaps.js";
-const E = "sliderExtendedTooltipOverlay__d2c01bd5", C = "lg__1a20e2aa", N = "tooltipBody__8d6022f0", O = "tooltipTip__7c013be8", t = {
-  sliderExtendedTooltipOverlay: E,
-  lg: C,
-  tooltipBody: N,
-  tooltipTip: O
-}, h = v(t), W = ({
-  value: i,
-  children: r,
-  ...c
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { SliderExtendedContext } from "../../SliderExtendedContext.js";
+import { c as clsx } from "../../../../chunks/vendor-Bco_z_Yi.js";
+import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
+const sliderExtendedTooltipOverlay = "sliderExtendedTooltipOverlay__72f88499";
+const lg = "lg__bebf28b8";
+const tooltipBody = "tooltipBody__77873fb0";
+const tooltipTip = "tooltipTip__b0a13cf5";
+const styles = {
+  sliderExtendedTooltipOverlay,
+  lg,
+  tooltipBody,
+  tooltipTip
+};
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SliderExtendedTooltip = ({
+  value,
+  children,
+  ...htmlAttributes
 }) => {
-  const o = n.useRef(null), { min: l, max: a, size: p } = n.useContext(_), m = () => {
-    var s;
-    if (!o.current || i === void 0)
+  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 f = 8, x = 16, T = ((s = o.current) == null ? void 0 : s.clientWidth) || 0, u = (i - l) / (a - l);
-    return (T / 2 - f - x) * (1 - 2 * u);
+    }
+    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__ */ y(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: o,
-      className: e(t.sliderExtendedTooltipOverlay, h[p]),
-      ...c,
+      ref: tooltipContentRef,
+      className: clsx(styles.sliderExtendedTooltipOverlay, sizeToClassNameMap[size]),
+      ...htmlAttributes,
       children: [
-        /* @__PURE__ */ d("div", { className: e(t.tooltipBody), style: { left: `${m()}px` }, children: r }),
-        /* @__PURE__ */ d("div", { className: e(t.tooltipTip) })
+        /* @__PURE__ */ jsx("div", { className: clsx(styles.tooltipBody), style: { left: `${calculateOffset()}px` }, children }),
+        /* @__PURE__ */ jsx("div", { className: clsx(styles.tooltipTip) })
       ]
     }
   );
 };
 export {
-  W as SliderExtendedTooltip
+  SliderExtendedTooltip
 };
 //# sourceMappingURL=SliderExtendedTooltip.js.map

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

@@ -0,0 +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;"}

package/components/SliderExtended/components/SliderExtendedTrack/SliderExtendedTrack.js

@@ -1,138 +1,229 @@
-import { jsxs as B, Fragment as L, jsx as h } from "react/jsx-runtime";
-import { useState as a, useContext as ae, useRef as O, useLayoutEffect as P } from "react";
-import { c as ce, l as X } from "../../../../chunks/vendor-D5cfSbgz.js";
-import { SliderExtendedContext as le } from "../../SliderExtendedContext.js";
-import { SliderExtendedMoveHandler as de } from "../SliderExtendedMoveHandler.js";
-import { SliderExtendedUtils as z } from "../../SliderExtendedUtils.js";
-import { SliderExtendedTrackActions as c } from "./SliderExtendedTrackActions.js";
-import { EVENT_KEY_CODES as g } from "../../../../utils/keyboard.js";
-import { KeyDownListener as F } from "../../../KeyDownListener/KeyDownListener.js";
-import { createSizeToClassNameMap as ie } from "../../../../utils/classNameMaps.js";
-const ne = "sliderExtendedTrack__abb82eba", ue = "lg__1a20e2aa", fe = "focusedByClick__029d458a", me = "hoverOrDragByMouse__4c687a5a", he = "staticSlider__bf9cb9a0", ge = "disabled__e9c0c10c", o = {
-  sliderExtendedTrack: ne,
-  lg: ue,
-  focusedByClick: fe,
-  hoverOrDragByMouse: me,
-  staticSlider: he,
-  disabled: ge
-}, pe = ie(o), Ee = ({
-  className: K,
-  draggable: b = !0,
-  onBlur: p,
-  onFocus: E,
-  onMouseDown: x,
-  onMouseOver: D,
-  onMouseOut: T,
-  onTouchStart: y,
-  ...A
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useContext, useRef, useLayoutEffect } from "react";
+import { c as clsx, l as lodashExports } from "../../../../chunks/vendor-Bco_z_Yi.js";
+import { SliderExtendedContext } from "../../SliderExtendedContext.js";
+import { SliderExtendedMoveHandler } from "../SliderExtendedMoveHandler.js";
+import { SliderExtendedUtils } from "../../SliderExtendedUtils.js";
+import { SliderExtendedTrackActions } from "./SliderExtendedTrackActions.js";
+import { EVENT_KEY_CODES } from "../../../../utils/keyboard.js";
+import { KeyDownListener } from "../../../KeyDownListener/KeyDownListener.js";
+import { createSizeToClassNameMap } from "../../../../utils/classNameMaps.js";
+const sliderExtendedTrack = "sliderExtendedTrack__541f4de9";
+const lg = "lg__bebf28b8";
+const focusedByClick = "focusedByClick__12e25b76";
+const hoverOrDragByMouse = "hoverOrDragByMouse__ff8d6c25";
+const staticSlider = "staticSlider__011b692f";
+const disabled = "disabled__752a7cb1";
+const styles = {
+  sliderExtendedTrack,
+  lg,
+  focusedByClick,
+  hoverOrDragByMouse,
+  staticSlider,
+  disabled
+};
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SliderExtendedTrack = ({
+  className,
+  draggable = true,
+  onBlur,
+  onFocus,
+  onMouseDown,
+  onMouseOver,
+  onMouseOut,
+  onTouchStart,
+  ...htmlSpanAttributes
 }) => {
-  const [W, k] = a(!1), [l, C] = a(!1), [H, v] = a(!1), [V, d] = a(!1), [U, S] = a(-1), {
-    disabled: M,
-    dots: s,
-    focused: i,
-    isHoverOrDragTrack: j,
-    railNode: r,
-    setIsHoverOrDragTrack: n,
-    reverse: _,
-    setFocused: R,
-    steps: u,
-    size: $
-  } = ae(le), f = O(0), m = O(null);
-  if (P(() => {
-    s.length > 1 && b ? l || C(!0) : l !== !1 && C(!1);
-  }, [s, b]), P(() => {
-    s.length > 1 && S(i ? 2 : -1);
-  }, [i]), !s.length)
+  const [isFocused, setIsFocused] = useState(false);
+  const [innerDraggable, setInnerDraggable] = useState(false);
+  const [isFocusedByClick, setIsFocusedByClick] = useState(false);
+  const [isDragged, setIsDragged] = useState(false);
+  const [tabIndex, setTabIndex] = useState(-1);
+  const {
+    disabled: disabled2,
+    dots,
+    focused: focusedSlider,
+    isHoverOrDragTrack,
+    railNode,
+    setIsHoverOrDragTrack,
+    reverse,
+    setFocused: setFocusedSlider,
+    steps,
+    size
+  } = useContext(SliderExtendedContext);
+  const cursorPrevNormalizedValue = useRef(0);
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (dots.length > 1 && draggable) {
+      if (!innerDraggable) {
+        setInnerDraggable(true);
+      }
+    } else if (innerDraggable !== false) {
+      setInnerDraggable(false);
+    }
+  }, [dots, draggable]);
+  useLayoutEffect(() => {
+    if (dots.length > 1) {
+      if (focusedSlider) {
+        setTabIndex(2);
+      } else {
+        setTabIndex(-1);
+      }
+    }
+  }, [focusedSlider]);
+  if (!dots.length) {
     return null;
-  const w = (e) => (t) => {
-    v(!0), d(!0), document.addEventListener("mouseup", N), r && (f.current = z.getNormalizedCursorValue({
-      cursorXPosition: t.clientX,
-      railNode: r
-    })), e(t), x == null || x(t);
-  }, G = (e) => c.dragDots({
-    cursorPrevNormalizedValue: f,
-    cursorXPosition: e.clientX,
-    dots: s,
-    railNode: r,
-    reverse: _,
-    steps: u
-  }), N = (e) => {
-    d(!1), e.target !== m.current && n(!1), document.removeEventListener("mouseup", N);
-  }, Y = (e) => (t) => {
-    t.touches.length == 1 && (v(!0), d(!0), document.addEventListener("touchend", I), r && (f.current = z.getNormalizedCursorValue({
-      cursorXPosition: t.touches[0].clientX,
-      railNode: r
-    })), e(t), y == null || y(t));
-  }, q = (e) => {
-    e.touches.length == 1 && (e.cancelable && e.preventDefault(), c.dragDots({
-      cursorPrevNormalizedValue: f,
-      cursorXPosition: e.touches[0].clientX,
-      dots: s,
-      railNode: r,
-      reverse: _,
-      steps: u
-    }));
-  }, I = (e) => {
-    e.cancelable && e.preventDefault(), d(!1), e.target !== m.current && n(!1), document.removeEventListener("touchend", I);
-  }, J = (e) => {
-    e.preventDefault(), c.moveToPrevStep(s, u);
-  }, Q = (e) => {
-    e.preventDefault(), c.moveToNextStep(s, u);
-  }, Z = (e) => {
-    i || R(!0), k(!0), E == null || E(e);
-  }, ee = (e) => {
-    i && R(!1), v(!1), k(!1), p == null || p(e);
-  }, te = (e) => {
-    n(!0), D == null || D(e);
-  }, se = (e) => {
-    V || n(!1), T == null || T(e);
-  }, { left: re, right: oe } = c.getTrackPosition({ dots: s, reverse: _ });
-  return /* @__PURE__ */ B(L, { children: [
-    W && /* @__PURE__ */ B(L, { children: [
-      /* @__PURE__ */ h(
-        F,
+  }
+  const handleMouseDown = (onTargetMouseDown) => (event) => {
+    setIsFocusedByClick(true);
+    setIsDragged(true);
+    document.addEventListener("mouseup", handleDocumentMouseUp);
+    if (railNode) {
+      cursorPrevNormalizedValue.current = SliderExtendedUtils.getNormalizedCursorValue({
+        cursorXPosition: event.clientX,
+        railNode
+      });
+    }
+    onTargetMouseDown(event);
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  const handleMouseMove = (event) => SliderExtendedTrackActions.dragDots({
+    cursorPrevNormalizedValue,
+    cursorXPosition: event.clientX,
+    dots,
+    railNode,
+    reverse,
+    steps
+  });
+  const handleDocumentMouseUp = (event) => {
+    setIsDragged(false);
+    if (event.target !== ref.current) {
+      setIsHoverOrDragTrack(false);
+    }
+    document.removeEventListener("mouseup", handleDocumentMouseUp);
+  };
+  const handleTouchStart = (onTargetTouchStart) => (event) => {
+    if (event.touches.length != 1) {
+      return;
+    }
+    setIsFocusedByClick(true);
+    setIsDragged(true);
+    document.addEventListener("touchend", handleDocumentTouchEnd);
+    if (railNode) {
+      cursorPrevNormalizedValue.current = SliderExtendedUtils.getNormalizedCursorValue({
+        cursorXPosition: event.touches[0].clientX,
+        railNode
+      });
+    }
+    onTargetTouchStart(event);
+    onTouchStart == null ? void 0 : onTouchStart(event);
+  };
+  const handleTouchMove = (event) => {
+    if (event.touches.length != 1) {
+      return;
+    }
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    SliderExtendedTrackActions.dragDots({
+      cursorPrevNormalizedValue,
+      cursorXPosition: event.touches[0].clientX,
+      dots,
+      railNode,
+      reverse,
+      steps
+    });
+  };
+  const handleDocumentTouchEnd = (event) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    setIsDragged(false);
+    if (event.target !== ref.current) {
+      setIsHoverOrDragTrack(false);
+    }
+    document.removeEventListener("touchend", handleDocumentTouchEnd);
+  };
+  const handleKeyDownToMoveLeft = (event) => {
+    event.preventDefault();
+    SliderExtendedTrackActions.moveToPrevStep(dots, steps);
+  };
+  const handleKeyDownToMoveRight = (event) => {
+    event.preventDefault();
+    SliderExtendedTrackActions.moveToNextStep(dots, 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);
+  };
+  const handleMouseOver = (event) => {
+    setIsHoverOrDragTrack(true);
+    onMouseOver == null ? void 0 : onMouseOver(event);
+  };
+  const handleMouseOut = (event) => {
+    if (!isDragged) {
+      setIsHoverOrDragTrack(false);
+    }
+    onMouseOut == null ? void 0 : onMouseOut(event);
+  };
+  const { left, right } = SliderExtendedTrackActions.getTrackPosition({ dots, reverse });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isFocused && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        KeyDownListener,
         {
-          onMatch: J,
-          eventKeyCode: [g.ARROW_LEFT, g.ARROW_DOWN]
+          onMatch: handleKeyDownToMoveLeft,
+          eventKeyCode: [EVENT_KEY_CODES.ARROW_LEFT, EVENT_KEY_CODES.ARROW_DOWN]
         }
       ),
-      /* @__PURE__ */ h(
-        F,
+      /* @__PURE__ */ jsx(
+        KeyDownListener,
         {
-          onMatch: Q,
-          eventKeyCode: [g.ARROW_RIGHT, g.ARROW_UP]
+          onMatch: handleKeyDownToMoveRight,
+          eventKeyCode: [EVENT_KEY_CODES.ARROW_RIGHT, EVENT_KEY_CODES.ARROW_UP]
         }
       )
     ] }),
-    /* @__PURE__ */ h(
-      de,
+    /* @__PURE__ */ jsx(
+      SliderExtendedMoveHandler,
       {
-        onMouseMove: X.throttle(G, 100),
-        onTouchMove: X.throttle(q),
-        targetRef: m,
-        children: ({ onTargetMouseDown: e, onTargetTouchStart: t }) => /* @__PURE__ */ h(
+        onMouseMove: lodashExports.throttle(handleMouseMove, 100),
+        onTouchMove: lodashExports.throttle(handleTouchMove),
+        targetRef: ref,
+        children: ({ onTargetMouseDown, onTargetTouchStart }) => /* @__PURE__ */ jsx(
           "span",
           {
             role: "button",
-            tabIndex: !M && l ? U : -1,
-            ...A,
-            className: ce(o.sliderExtendedTrack, pe[$], K, {
-              [o.disabled]: M,
-              [o.focusedByClick]: H,
-              [o.hoverOrDragByMouse]: j,
+            tabIndex: !disabled2 && innerDraggable ? tabIndex : -1,
+            ...htmlSpanAttributes,
+            className: clsx(styles.sliderExtendedTrack, sizeToClassNameMap[size], className, {
+              [styles.disabled]: disabled2,
+              [styles.focusedByClick]: isFocusedByClick,
+              [styles.hoverOrDragByMouse]: isHoverOrDragTrack,
               // Не перетаскиваемый.
-              [o.staticSlider]: !l
+              [styles.staticSlider]: !innerDraggable
             }),
-            onBlur: ee,
-            onFocus: Z,
-            onMouseDown: w(e),
-            onMouseOver: te,
-            onMouseOut: se,
-            onTouchStart: Y(t),
-            ref: m,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onMouseDown: handleMouseDown(onTargetMouseDown),
+            onMouseOver: handleMouseOver,
+            onMouseOut: handleMouseOut,
+            onTouchStart: handleTouchStart(onTargetTouchStart),
+            ref,
             style: {
-              left: `${re}%`,
-              right: `${oe}%`
+              left: `${left}%`,
+              right: `${right}%`
             }
           }
         )
@@ -140,8 +231,8 @@ const ne = "sliderExtendedTrack__abb82eba", ue = "lg__1a20e2aa", fe = "focusedBy
     )
   ] });
 };
-Ee.displayName = "SliderExtendedTrack";
+SliderExtendedTrack.displayName = "SliderExtendedTrack";
 export {
-  Ee as SliderExtendedTrack
+  SliderExtendedTrack
 };
 //# sourceMappingURL=SliderExtendedTrack.js.map