@sberbusiness/triplex-next 1.47.0 → 1.49.0

package/components/StatusTracker/components/StatusTrackerTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusTrackerTitle.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EFontWeightTitle, ETitleSize, Title } from \"@sberbusiness/triplex-next/components/Typography\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerTitle. */\nexport interface IStatusTrackerTitleProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Текст пояснения для блока заголовка статус-трекера. */\nexport const StatusTrackerTitle: React.FC<IStatusTrackerTitleProps> = (props) => {\n    const { children, className, ...rest } = props;\n\n    return (\n        <Title\n            weight={EFontWeightTitle.BOLD}\n            size={ETitleSize.H3}\n            className={clsx(styles.statusTrackerTitle, className)}\n            {...rest}\n        >\n            {children}\n        </Title>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,qBAAyD,CAAC,UAAU;AAC7E,QAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,iBAAiB;AAAA,MACzB,MAAM,WAAW;AAAA,MACjB,WAAW,KAAK,OAAO,oBAAoB,SAAS;AAAA,MACnD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"StatusTrackerTitle.js","sources":["../../../../src/components/StatusTracker/components/StatusTrackerTitle.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EFontWeightTitle, ETitleSize, Title } from \"@sberbusiness/triplex-next/components/Typography\";\nimport styles from \"@sberbusiness/triplex-next/components/StatusTracker/styles/StatusTracker.module.less\";\n\n/** Свойства компонента StatusTrackerTitle. */\nexport interface IStatusTrackerTitleProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Текст заголовка. */\n    children?: React.ReactNode;\n}\n\n/** Заголовок блока заголовка статус-трекера. Рендерится как Title размера H3 с жирным начертанием. */\nexport const StatusTrackerTitle = React.forwardRef<HTMLElement, IStatusTrackerTitleProps>(function StatusTrackerTitle(\n    { children, className, ...rest },\n    ref,\n) {\n    return (\n        <Title\n            weight={EFontWeightTitle.BOLD}\n            size={ETitleSize.H3}\n            className={clsx(styles.statusTrackerTitle, className)}\n            {...rest}\n            ref={ref}\n        >\n            {children}\n        </Title>\n    );\n});\n\nStatusTrackerTitle.displayName = \"StatusTrackerTitle\";\n"],"names":["React","StatusTrackerTitle"],"mappings":";;;;;;;;;AAYO,MAAM,qBAAqBA,eAAM,WAAkD,SAASC,oBAC/F,EAAE,UAAU,WAAW,GAAG,KAAA,GAC1B,KACF;AACE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,iBAAiB;AAAA,MACzB,MAAM,WAAW;AAAA,MACjB,WAAW,KAAK,OAAO,oBAAoB,SAAS;AAAA,MACnD,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,mBAAmB,cAAc;"}

package/components/Step/Step.js

@@ -1,31 +1,32 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useCallback } from "react";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { EStepStatus, EStepPosition } from "./enums.js";
-import { ETooltipAlign, ETooltipSize } from "../Tooltip/enums.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
+import { ETooltipAlign, ETooltipSize } from "../Tooltip/enums.js";
 import { EFontWeightText, ETextSize } from "../Typography/enums.js";
 import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
+import { setForwardedRef } from "../../helpers/setForwardedRef.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const step = "step__a1ce0d56";
-const sm = "sm__8e296f9b";
-const md = "md__59791c7d";
-const lg = "lg__5b9a60c0";
-const done = "done__405b0dd3";
-const warning = "warning__3db1b0f4";
-const active = "active__8a608f6c";
-const error = "error__a8fd6443";
-const disabled = "disabled__8c4fd3c0";
+const step = "step__cd1a9898";
+const sm = "sm__b39a2303";
+const md = "md__e50dad23";
+const lg = "lg__4635a194";
+const done = "done__3a8cdd5c";
+const warning = "warning__60cc35aa";
+const active = "active__74d0b2f2";
+const error = "error__46ad04b4";
+const disabled = "disabled__d065afad";
 const styles = {
   step,
   sm,
   md,
   lg,
-  "default": "default__6dd9fbdd",
+  "default": "default__f7eec529",
   done,
   warning,
   active,
@@ -55,24 +56,33 @@ const calcPosition = (stepCount, i) => {
     return EStepPosition.Default;
   }
 };
-const Step = ({
-  children,
-  className,
-  step: step2,
-  status,
-  position = EStepPosition.Default,
-  size = EComponentSize.MD,
-  ...rest
-}) => {
-  const ref = useRef(null);
-  const tooltipAlign = STEP_POSITION_TO_TOOLTIP_ALIGN_MAP[position];
-  const classNames = clsx(styles.step, STATUS_TO_CLASS_NAME_MAP[status], SIZE_TO_CLASS_NAME_MAP[size], className);
-  const renderContent = () => /* @__PURE__ */ jsx("div", { ref, className: classNames, ...rest, children: /* @__PURE__ */ jsx(Text, { size: ETextSize.B1, weight: EFontWeightText.SEMIBOLD, children: step2 }) });
-  return children ? /* @__PURE__ */ jsxs(Tooltip, { size: ETooltipSize.SM, toggleType: "hover", alignTip: tooltipAlign, targetRef: ref, children: [
-    /* @__PURE__ */ jsx(Tooltip.Target, { children: renderContent() }),
-    /* @__PURE__ */ jsx(Tooltip.Body, { children })
-  ] }) : renderContent();
-};
+const Step = React__default.forwardRef(
+  ({ children, className, step: step2, status, position = EStepPosition.Default, size = EComponentSize.MD, ...rest }, ref) => {
+    const targetRef = useRef(null);
+    const setRef = useCallback(
+      (instance) => {
+        targetRef.current = instance;
+        setForwardedRef(ref, instance);
+      },
+      [ref]
+    );
+    const classNames = clsx(styles.step, STATUS_TO_CLASS_NAME_MAP[status], SIZE_TO_CLASS_NAME_MAP[size], className);
+    const content = /* @__PURE__ */ jsx("div", { ref: setRef, className: classNames, ...rest, children: /* @__PURE__ */ jsx(Text, { size: ETextSize.B1, weight: EFontWeightText.SEMIBOLD, children: step2 }) });
+    return children ? /* @__PURE__ */ jsxs(
+      Tooltip,
+      {
+        size: ETooltipSize.SM,
+        toggleType: "hover",
+        alignTip: STEP_POSITION_TO_TOOLTIP_ALIGN_MAP[position],
+        targetRef,
+        children: [
+          /* @__PURE__ */ jsx(Tooltip.Target, { children: content }),
+          /* @__PURE__ */ jsx(Tooltip.Body, { children })
+        ]
+      }
+    ) : content;
+  }
+);
 Step.displayName = "Step";
 export {
   Step,

package/components/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { EStepPosition, EStepStatus } from \"./enums\";\nimport { ETooltipAlign, ETooltipSize } from \"../Tooltip/enums\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Text, ETextSize, EFontWeightText } from \"../Typography\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/Step.module.less\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../utils/classNameMaps\";\n\n/** Свойства компонента Step. */\nexport interface IStepProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Размер компонента. */\n    size?: EComponentSize;\n    /** Номер шага для отображения в кружке. */\n    step: number;\n    /** Статус текущего шага. */\n    status: EStepStatus;\n    /** Позиция шага, относительно других. */\n    position?: EStepPosition;\n}\n\nconst STATUS_TO_CLASS_NAME_MAP: Record<EStepStatus, string> = {\n    [EStepStatus.DEFAULT]: styles.default,\n    [EStepStatus.ACTIVE]: styles.active,\n    [EStepStatus.WARNING]: styles.warning,\n    [EStepStatus.ERROR]: styles.error,\n    [EStepStatus.DONE]: styles.done,\n    [EStepStatus.DISABLED]: styles.disabled,\n};\n\nconst STEP_POSITION_TO_TOOLTIP_ALIGN_MAP: Record<EStepPosition, ETooltipAlign> = {\n    [EStepPosition.XFirst]: ETooltipAlign.START,\n    [EStepPosition.Default]: ETooltipAlign.CENTER,\n    [EStepPosition.XLast]: ETooltipAlign.END,\n};\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Вычисление позиции шага, относительно других. */\nexport const calcPosition = (stepCount: number, i: number): EStepPosition => {\n    if (i === 0) {\n        return EStepPosition.XFirst;\n    } else if (i + 1 === stepCount) {\n        return EStepPosition.XLast;\n    } else {\n        return EStepPosition.Default;\n    }\n};\n\nexport const Step: React.FC<IStepProps> = ({\n    children,\n    className,\n    step,\n    status,\n    position = EStepPosition.Default,\n    size = EComponentSize.MD,\n    ...rest\n}) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const tooltipAlign = STEP_POSITION_TO_TOOLTIP_ALIGN_MAP[position];\n\n    const classNames = clsx(styles.step, STATUS_TO_CLASS_NAME_MAP[status], SIZE_TO_CLASS_NAME_MAP[size], className);\n\n    const renderContent = () => (\n        <div ref={ref} className={classNames} {...rest}>\n            <Text size={ETextSize.B1} weight={EFontWeightText.SEMIBOLD}>\n                {step}\n            </Text>\n        </div>\n    );\n\n    return children ? (\n        <Tooltip size={ETooltipSize.SM} toggleType=\"hover\" alignTip={tooltipAlign} targetRef={ref}>\n            <Tooltip.Target>{renderContent()}</Tooltip.Target>\n            <Tooltip.Body>{children}</Tooltip.Body>\n        </Tooltip>\n    ) : (\n        renderContent()\n    );\n};\n\nStep.displayName = \"Step\";\n"],"names":["step"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,2BAAwD;AAAA,EAC1D,CAAC,YAAY,OAAO,GAAG,OAAO;AAAA,EAC9B,CAAC,YAAY,MAAM,GAAG,OAAO;AAAA,EAC7B,CAAC,YAAY,OAAO,GAAG,OAAO;AAAA,EAC9B,CAAC,YAAY,KAAK,GAAG,OAAO;AAAA,EAC5B,CAAC,YAAY,IAAI,GAAG,OAAO;AAAA,EAC3B,CAAC,YAAY,QAAQ,GAAG,OAAO;AACnC;AAEA,MAAM,qCAA2E;AAAA,EAC7E,CAAC,cAAc,MAAM,GAAG,cAAc;AAAA,EACtC,CAAC,cAAc,OAAO,GAAG,cAAc;AAAA,EACvC,CAAC,cAAc,KAAK,GAAG,cAAc;AACzC;AAEA,MAAM,yBAAyB,yBAAyB,MAAM;AAGvD,MAAM,eAAe,CAAC,WAAmB,MAA6B;AACzE,MAAI,MAAM,GAAG;AACT,WAAO,cAAc;AAAA,EACzB,WAAW,IAAI,MAAM,WAAW;AAC5B,WAAO,cAAc;AAAA,EACzB,OAAO;AACH,WAAO,cAAc;AAAA,EACzB;AACJ;AAEO,MAAM,OAA6B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,MAAAA;AAAA,EACA;AAAA,EACA,WAAW,cAAc;AAAA,EACzB,OAAO,eAAe;AAAA,EACtB,GAAG;AACP,MAAM;AACF,QAAM,MAAM,OAA8B,IAAI;AAC9C,QAAM,eAAe,mCAAmC,QAAQ;AAEhE,QAAM,aAAa,KAAK,OAAO,MAAM,yBAAyB,MAAM,GAAG,uBAAuB,IAAI,GAAG,SAAS;AAE9G,QAAM,gBAAgB,MAClB,oBAAC,SAAI,KAAU,WAAW,YAAa,GAAG,MACtC,UAAA,oBAAC,MAAA,EAAK,MAAM,UAAU,IAAI,QAAQ,gBAAgB,UAC7C,iBACL,GACJ;AAGJ,SAAO,WACH,qBAAC,SAAA,EAAQ,MAAM,aAAa,IAAI,YAAW,SAAQ,UAAU,cAAc,WAAW,KAClF,UAAA;AAAA,IAAA,oBAAC,QAAQ,QAAR,EAAgB,UAAA,cAAA,EAAc,CAAE;AAAA,IACjC,oBAAC,QAAQ,MAAR,EAAc,SAAA,CAAS;AAAA,EAAA,EAAA,CAC5B,IAEA,cAAA;AAER;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Step.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { EStepPosition, EStepStatus } from \"./enums\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { ETooltipAlign, ETooltipSize } from \"../Tooltip/enums\";\nimport { Text, ETextSize, EFontWeightText } from \"../Typography\";\nimport { setForwardedRef } from \"../../helpers/setForwardedRef\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../utils/classNameMaps\";\nimport styles from \"./styles/Step.module.less\";\n\n/** Свойства компонента Step. */\nexport interface IStepProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Размер компонента. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n    /** Номер шага для отображения в кружке. */\n    step: number;\n    /** Статус текущего шага. */\n    status: EStepStatus;\n    /** Позиция шага относительно других. Определяет выравнивание подсказки. По умолчанию EStepPosition.Default. */\n    position?: EStepPosition;\n}\n\nconst STATUS_TO_CLASS_NAME_MAP: Record<EStepStatus, string> = {\n    [EStepStatus.DEFAULT]: styles.default,\n    [EStepStatus.ACTIVE]: styles.active,\n    [EStepStatus.WARNING]: styles.warning,\n    [EStepStatus.ERROR]: styles.error,\n    [EStepStatus.DONE]: styles.done,\n    [EStepStatus.DISABLED]: styles.disabled,\n};\n\nconst STEP_POSITION_TO_TOOLTIP_ALIGN_MAP: Record<EStepPosition, ETooltipAlign> = {\n    [EStepPosition.XFirst]: ETooltipAlign.START,\n    [EStepPosition.Default]: ETooltipAlign.CENTER,\n    [EStepPosition.XLast]: ETooltipAlign.END,\n};\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/**\n * Вычисление позиции шага относительно других.\n *\n * @param stepCount Общее количество шагов.\n * @param i Индекс шага, начиная с нуля.\n * @returns EStepPosition.XFirst для первого шага, EStepPosition.XLast для последнего, иначе EStepPosition.Default.\n */\nexport const calcPosition = (stepCount: number, i: number): EStepPosition => {\n    if (i === 0) {\n        return EStepPosition.XFirst;\n    } else if (i + 1 === stepCount) {\n        return EStepPosition.XLast;\n    } else {\n        return EStepPosition.Default;\n    }\n};\n\n/**\n * Шаг — круглый индикатор с номером и цветом по статусу.\n * Если передан children, номер оборачивается в подсказку, раскрывающуюся по наведению.\n */\nexport const Step = React.forwardRef<HTMLDivElement, IStepProps>(\n    (\n        { children, className, step, status, position = EStepPosition.Default, size = EComponentSize.MD, ...rest },\n        ref,\n    ) => {\n        const targetRef = useRef<HTMLDivElement | null>(null);\n\n        /** Сохраняет узел шага локально (Tooltip позиционируется относительно него) и пробрасывает во внешний ref. */\n        const setRef = useCallback(\n            (instance: HTMLDivElement | null) => {\n                targetRef.current = instance;\n                setForwardedRef(ref, instance);\n            },\n            [ref],\n        );\n\n        const classNames = clsx(styles.step, STATUS_TO_CLASS_NAME_MAP[status], SIZE_TO_CLASS_NAME_MAP[size], className);\n\n        const content = (\n            <div ref={setRef} className={classNames} {...rest}>\n                <Text size={ETextSize.B1} weight={EFontWeightText.SEMIBOLD}>\n                    {step}\n                </Text>\n            </div>\n        );\n\n        return children ? (\n            <Tooltip\n                size={ETooltipSize.SM}\n                toggleType=\"hover\"\n                alignTip={STEP_POSITION_TO_TOOLTIP_ALIGN_MAP[position]}\n                targetRef={targetRef}\n            >\n                <Tooltip.Target>{content}</Tooltip.Target>\n                <Tooltip.Body>{children}</Tooltip.Body>\n            </Tooltip>\n        ) : (\n            content\n        );\n    },\n);\n\nStep.displayName = \"Step\";\n"],"names":["React","step"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,2BAAwD;AAAA,EAC1D,CAAC,YAAY,OAAO,GAAG,OAAO;AAAA,EAC9B,CAAC,YAAY,MAAM,GAAG,OAAO;AAAA,EAC7B,CAAC,YAAY,OAAO,GAAG,OAAO;AAAA,EAC9B,CAAC,YAAY,KAAK,GAAG,OAAO;AAAA,EAC5B,CAAC,YAAY,IAAI,GAAG,OAAO;AAAA,EAC3B,CAAC,YAAY,QAAQ,GAAG,OAAO;AACnC;AAEA,MAAM,qCAA2E;AAAA,EAC7E,CAAC,cAAc,MAAM,GAAG,cAAc;AAAA,EACtC,CAAC,cAAc,OAAO,GAAG,cAAc;AAAA,EACvC,CAAC,cAAc,KAAK,GAAG,cAAc;AACzC;AAEA,MAAM,yBAAyB,yBAAyB,MAAM;AASvD,MAAM,eAAe,CAAC,WAAmB,MAA6B;AACzE,MAAI,MAAM,GAAG;AACT,WAAO,cAAc;AAAA,EACzB,WAAW,IAAI,MAAM,WAAW;AAC5B,WAAO,cAAc;AAAA,EACzB,OAAO;AACH,WAAO,cAAc;AAAA,EACzB;AACJ;AAMO,MAAM,OAAOA,eAAM;AAAA,EACtB,CACI,EAAE,UAAU,WAAW,MAAAC,OAAM,QAAQ,WAAW,cAAc,SAAS,OAAO,eAAe,IAAI,GAAG,KAAA,GACpG,QACC;AACD,UAAM,YAAY,OAA8B,IAAI;AAGpD,UAAM,SAAS;AAAA,MACX,CAAC,aAAoC;AACjC,kBAAU,UAAU;AACpB,wBAAgB,KAAK,QAAQ;AAAA,MACjC;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGR,UAAM,aAAa,KAAK,OAAO,MAAM,yBAAyB,MAAM,GAAG,uBAAuB,IAAI,GAAG,SAAS;AAE9G,UAAM,UACF,oBAAC,OAAA,EAAI,KAAK,QAAQ,WAAW,YAAa,GAAG,MACzC,UAAA,oBAAC,MAAA,EAAK,MAAM,UAAU,IAAI,QAAQ,gBAAgB,UAC7C,iBACL,GACJ;AAGJ,WAAO,WACH;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM,aAAa;AAAA,QACnB,YAAW;AAAA,QACX,UAAU,mCAAmC,QAAQ;AAAA,QACrD;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,QAAQ,QAAR,EAAgB,UAAA,QAAA,CAAQ;AAAA,UACzB,oBAAC,QAAQ,MAAR,EAAc,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAG5B;AAAA,EAER;AACJ;AAEA,KAAK,cAAc;"}

package/components/Stepper/Stepper.js

@@ -2,7 +2,7 @@ import "./enums.js";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
-import { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from "@sberbusiness/icons-next";
+import { CaretrightStrokeSrvIcon24, CaretleftStrokeSrvIcon24 } from "@sberbusiness/icons-next";
 import { CarouselExtended } from "../CarouselExtended/CarouselExtended.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { StepperExtended } from "./StepperExtended.js";
@@ -12,14 +12,14 @@ import { scrollSmoothHorizontally } from "../../utils/scroll.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { EScreenWidth } from "../../helpers/breakpoints.js";
 import "./StepperStepIcon.js";
-const stepperCarousel = "stepperCarousel__ad5c84fb";
-const stepperButtonWrapper = "stepperButtonWrapper__c26b1578";
-const prev = "prev__54b85b56";
-const next = "next__5d3bf8f8";
-const stepperButton = "stepperButton__4535fa8c";
-const sm = "sm__763b7b6a";
-const md = "md__aafb0e61";
-const lg = "lg__51789702";
+const stepperCarousel = "stepperCarousel__afedadde";
+const stepperButtonWrapper = "stepperButtonWrapper__3d7eb782";
+const prev = "prev__3f2951ab";
+const next = "next__780e6847";
+const stepperButton = "stepperButton__3075787d";
+const sm = "sm__72fa85f6";
+const md = "md__58c4a9f9";
+const lg = "lg__9b9d06da";
 const styles = {
   stepperCarousel,
   stepperButtonWrapper,
@@ -32,39 +32,74 @@ const styles = {
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const SCROLL_STEP_RATIO = 0.3;
+const DIRECTION_TO_CLASS_NAME_MAP = {
+  prev: styles.prev,
+  next: styles.next
+};
+const DIRECTION_TO_ICON_MAP = {
+  prev: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon24, { paletteIndex: 5 }),
+  next: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon24, { paletteIndex: 5 })
+};
+const StepperScrollButton = ({ direction, size, hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, DIRECTION_TO_CLASS_NAME_MAP[direction]), children: /* @__PURE__ */ jsx(
+  ButtonIcon,
+  {
+    className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
+    tabIndex: -1,
+    ...restButtonProps,
+    children: DIRECTION_TO_ICON_MAP[direction]
+  }
+) });
+const alignStepRight = (carousel, step, delta, stepRight) => {
+  if (delta <= 0) {
+    return;
+  }
+  const nextStep = step.nextElementSibling;
+  const scrollAmount = nextStep ? delta - (stepRight - nextStep.getBoundingClientRect().right) : delta;
+  scrollSmoothHorizontally(carousel, Math.ceil(scrollAmount));
+};
+const alignStepLeft = (carousel, step, delta, stepLeft) => {
+  if (delta >= 0) {
+    return;
+  }
+  const prevStep = step.previousElementSibling;
+  const scrollAmount = prevStep ? delta - (stepLeft - prevStep.getBoundingClientRect().left) : delta;
+  scrollSmoothHorizontally(carousel, Math.floor(scrollAmount));
+};
+const alignStepCenter = (carousel, delta) => {
+  if (delta) {
+    scrollSmoothHorizontally(carousel, delta);
+  }
+};
+const alignStep = (carousel, step) => {
+  const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();
+  const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();
+  const carouselCenter = carouselLeft + carouselWidth / 2;
+  const stepCenter = stepLeft + stepWidth / 2;
+  if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {
+    alignStepCenter(carousel, stepCenter - carouselCenter);
+  } else if (carouselCenter > stepCenter) {
+    alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);
+  } else if (carouselCenter < stepCenter) {
+    alignStepRight(carousel, step, stepRight - carouselRight, stepRight);
+  }
+};
 const Stepper = ({
   className,
   steps,
-  size = EComponentSize.LG,
+  size = EComponentSize.MD,
   selectedStepId,
   ...restProps
 }) => {
-  const [state, setState] = useState({ stepNext: 0, stepPrev: 0 });
+  const [scrollStep, setScrollStep] = useState(0);
   const carouselRef = useRef(null);
   const stepRefs = useRef({});
   const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);
   const renderPrevButton = useCallback(
-    ({ hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, styles.prev), children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
-        tabIndex: -1,
-        ...restButtonProps,
-        children: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon24, { paletteIndex: 5 })
-      }
-    ) }),
+    (buttonProps) => /* @__PURE__ */ jsx(StepperScrollButton, { ...buttonProps, direction: "prev", size }),
     [size]
   );
   const renderNextButton = useCallback(
-    ({ hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, styles.next), children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
-        tabIndex: -1,
-        ...restButtonProps,
-        children: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon24, { paletteIndex: 5 })
-      }
-    ) }),
+    (buttonProps) => /* @__PURE__ */ jsx(StepperScrollButton, { ...buttonProps, direction: "next", size }),
     [size]
   );
   useEffect(() => {
@@ -73,91 +108,49 @@ const Stepper = ({
       return;
     }
     const resizeObserver = new ResizeObserver((entries) => {
-      const width = entries[0].contentRect.width;
-      const scrollStep = width * SCROLL_STEP_RATIO;
-      setState({
-        stepNext: scrollStep,
-        stepPrev: scrollStep
-      });
+      setScrollStep(entries[0].contentRect.width * SCROLL_STEP_RATIO);
     });
     resizeObserver.observe(carouselNode);
     return () => {
       resizeObserver.disconnect();
     };
   }, []);
-  const alignStepRight = useCallback(
-    (carousel, step, delta, stepRight) => {
-      if (delta > 0) {
-        if (step.nextElementSibling) {
-          delta -= stepRight - step.nextElementSibling.getBoundingClientRect().right;
-        }
-        scrollSmoothHorizontally(carousel, Math.ceil(delta));
-      }
-    },
-    []
-  );
-  const alignStepLeft = useCallback(
-    (carousel, step, delta, stepLeft) => {
-      if (delta < 0) {
-        if (step.previousElementSibling) {
-          delta -= stepLeft - step.previousElementSibling.getBoundingClientRect().left;
-        }
-        scrollSmoothHorizontally(carousel, Math.floor(delta));
-      }
-    },
-    []
-  );
-  const alignStepCenter = useCallback((carousel, delta) => {
-    if (delta) {
-      scrollSmoothHorizontally(carousel, delta);
-    }
-  }, []);
-  const alignStep = useCallback(
-    (carousel, step) => {
-      const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();
-      const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();
-      const carouselCenter = carouselLeft + carouselWidth / 2;
-      const stepCenter = stepLeft + stepWidth / 2;
-      if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {
-        alignStepCenter(carousel, stepCenter - carouselCenter);
-      } else if (carouselCenter > stepCenter) {
-        alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);
-      } else if (carouselCenter < stepCenter) {
-        alignStepRight(carousel, step, stepRight - carouselRight, stepRight);
-      }
-    },
-    [alignStepCenter, alignStepLeft, alignStepRight]
-  );
   useEffect(() => {
-    if (selectedStepId) {
-      const { current: carousel } = carouselRef;
-      const step = stepRefs.current[selectedStepId];
-      if (carousel && step) {
-        alignStep(carousel, step);
-      }
+    if (!selectedStepId) {
+      return;
+    }
+    const carousel = carouselRef.current;
+    const step = stepRefs.current[selectedStepId];
+    if (carousel && step) {
+      alignStep(carousel, step);
+    }
+  }, [selectedStepId]);
+  const setStepRef = (id) => (instance) => {
+    if (instance === null) {
+      delete stepRefs.current[id];
+    } else {
+      stepRefs.current[id] = instance;
     }
-  }, [selectedStepId, alignStep]);
+  };
   return /* @__PURE__ */ jsx(
     CarouselExtended,
     {
       className: clsx(styles.stepperCarousel, sizeToClassNameMap[size], className),
       buttonPrev: renderPrevButton,
       buttonNext: renderNextButton,
-      stepPrev: state.stepPrev,
-      stepNext: state.stepNext,
+      stepPrev: scrollStep,
+      stepNext: scrollStep,
       ref: carouselRef,
-      children: /* @__PURE__ */ jsx(StepperExtended, { selectedStepId, size, ...restProps, children: steps.map(({ label, ...step }, index) => {
-        return /* @__PURE__ */ jsx(
-          StepperExtended.Step,
-          {
-            forwardedRef: (instance) => stepRefs.current[step.id] = instance,
-            ...step,
-            isInActiveStep: index > selectedIndex,
-            children: label
-          },
-          step.id
-        );
-      }) })
+      children: /* @__PURE__ */ jsx(StepperExtended, { selectedStepId, size, ...restProps, children: steps.map(({ label, ...step }, index) => /* @__PURE__ */ jsx(
+        StepperExtended.Step,
+        {
+          forwardedRef: setStepRef(step.id),
+          ...step,
+          isInActiveStep: index > selectedIndex,
+          children: label
+        },
+        step.id
+      )) })
     }
   );
 };

package/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { CarouselExtended, ICarouselExtendedButtonProvideProps } from \"../CarouselExtended/CarouselExtended\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { StepperExtended } from \"./StepperExtended\";\nimport { StepperStep } from \"./StepperStep\";\nimport { createSizeToClassNameMap, scrollSmoothHorizontally } from \"../../utils\";\nimport { IStepperProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport styles from \"./styles/Stepper.module.less\";\n\n/** Внутренние составляющие Stepper. */\ninterface IStepperComposition {\n    Step: typeof StepperStep;\n}\n\n/** Соответствие размера имени класса. */\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst SCROLL_STEP_RATIO = 0.3;\n\n/** Компонент Stepper, список шагов */\nexport const Stepper: React.FC<IStepperProps> & IStepperComposition = ({\n    className,\n    steps,\n    size = EComponentSize.LG,\n    selectedStepId,\n    ...restProps\n}) => {\n    const [state, setState] = useState({ stepNext: 0, stepPrev: 0 });\n    const carouselRef = useRef<HTMLDivElement>(null);\n    const stepRefs = useRef<Record<string, HTMLLIElement | null>>({});\n    const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);\n\n    const renderPrevButton = useCallback(\n        ({ hidden, ...restButtonProps }: ICarouselExtendedButtonProvideProps) =>\n            hidden ? null : (\n                <div className={clsx(styles.stepperButtonWrapper, styles.prev)}>\n                    <ButtonIcon\n                        className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                        tabIndex={-1}\n                        {...restButtonProps}\n                    >\n                        <CaretleftStrokeSrvIcon24 paletteIndex={5} />\n                    </ButtonIcon>\n                </div>\n            ),\n        [size],\n    );\n\n    const renderNextButton = useCallback(\n        ({ hidden, ...restButtonProps }: ICarouselExtendedButtonProvideProps) =>\n            hidden ? null : (\n                <div className={clsx(styles.stepperButtonWrapper, styles.next)}>\n                    <ButtonIcon\n                        className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                        tabIndex={-1}\n                        {...restButtonProps}\n                    >\n                        <CaretrightStrokeSrvIcon24 paletteIndex={5} />\n                    </ButtonIcon>\n                </div>\n            ),\n        [size],\n    );\n\n    useEffect(() => {\n        const carouselNode = carouselRef.current;\n\n        if (carouselNode === null) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            const scrollStep = width * SCROLL_STEP_RATIO;\n\n            setState({\n                stepNext: scrollStep,\n                stepPrev: scrollStep,\n            });\n        });\n\n        resizeObserver.observe(carouselNode);\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    /** Выравнивание шага по правой части карусели. */\n    const alignStepRight = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepRight: number) => {\n            if (delta > 0) {\n                // Текущий шаг – не последний, необходимо показать следующий шаг.\n                if (step.nextElementSibling) {\n                    delta -= stepRight - step.nextElementSibling.getBoundingClientRect().right;\n                }\n                scrollSmoothHorizontally(carousel, Math.ceil(delta));\n            }\n        },\n        [],\n    );\n\n    /** Выравнивание шага по левой части карусели. */\n    const alignStepLeft = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepLeft: number) => {\n            if (delta < 0) {\n                // Текущий шаг – не первый, необходимо показать предыдущий шаг.\n                if (step.previousElementSibling) {\n                    delta -= stepLeft - step.previousElementSibling.getBoundingClientRect().left;\n                }\n                scrollSmoothHorizontally(carousel, Math.floor(delta));\n            }\n        },\n        [],\n    );\n\n    /** Выравнивание шага по центру карусели. */\n    const alignStepCenter = useCallback((carousel: HTMLDivElement, delta: number) => {\n        if (delta) {\n            scrollSmoothHorizontally(carousel, delta);\n        }\n    }, []);\n\n    /** Выравнивание шага в карусели. */\n    const alignStep = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement) => {\n            const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();\n            const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();\n            const carouselCenter = carouselLeft + carouselWidth / 2;\n            const stepCenter = stepLeft + stepWidth / 2;\n\n            if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {\n                alignStepCenter(carousel, stepCenter - carouselCenter);\n            } else if (carouselCenter > stepCenter) {\n                alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);\n            } else if (carouselCenter < stepCenter) {\n                alignStepRight(carousel, step, stepRight - carouselRight, stepRight);\n            }\n        },\n        [alignStepCenter, alignStepLeft, alignStepRight],\n    );\n\n    useEffect(() => {\n        if (selectedStepId) {\n            const { current: carousel } = carouselRef;\n            const step = stepRefs.current[selectedStepId];\n\n            if (carousel && step) {\n                alignStep(carousel, step);\n            }\n        }\n    }, [selectedStepId, alignStep]);\n\n    return (\n        <CarouselExtended\n            className={clsx(styles.stepperCarousel, sizeToClassNameMap[size], className)}\n            buttonPrev={renderPrevButton}\n            buttonNext={renderNextButton}\n            stepPrev={state.stepPrev}\n            stepNext={state.stepNext}\n            ref={carouselRef}\n        >\n            <StepperExtended selectedStepId={selectedStepId} size={size} {...restProps}>\n                {steps.map(({ label, ...step }, index) => {\n                    return (\n                        <StepperExtended.Step\n                            key={step.id}\n                            forwardedRef={(instance) => (stepRefs.current[step.id] = instance)}\n                            {...step}\n                            isInActiveStep={index > selectedIndex}\n                        >\n                            {label}\n                        </StepperExtended.Step>\n                    );\n                })}\n            </StepperExtended>\n        </CarouselExtended>\n    );\n};\n\nStepper.Step = StepperStep;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { CarouselExtended, ICarouselExtendedButtonProvideProps } from \"../CarouselExtended/CarouselExtended\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { StepperExtended } from \"./StepperExtended\";\nimport { StepperStep } from \"./StepperStep\";\nimport { createSizeToClassNameMap, scrollSmoothHorizontally } from \"../../utils\";\nimport { IStepperProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport styles from \"./styles/Stepper.module.less\";\n\n/** Внутренние составляющие Stepper. */\ninterface IStepperComposition {\n    Step: typeof StepperStep;\n}\n\n/** Направление прокрутки ленты шагов. */\ntype TStepperScrollDirection = \"prev\" | \"next\";\n\n/** Соответствие размера имени класса. */\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Доля ширины видимой области ленты, на которую прокручивает один клик по кнопке. */\nconst SCROLL_STEP_RATIO = 0.3;\n\n/** Соответствие направления прокрутки имени класса. */\nconst DIRECTION_TO_CLASS_NAME_MAP: Record<TStepperScrollDirection, string> = {\n    prev: styles.prev,\n    next: styles.next,\n};\n\n/** Соответствие направления прокрутки иконке кнопки. */\nconst DIRECTION_TO_ICON_MAP: Record<TStepperScrollDirection, React.ReactNode> = {\n    prev: <CaretleftStrokeSrvIcon24 paletteIndex={5} />,\n    next: <CaretrightStrokeSrvIcon24 paletteIndex={5} />,\n};\n\n/** Свойства кнопки прокрутки ленты шагов. */\ninterface IStepperScrollButtonProps extends ICarouselExtendedButtonProvideProps {\n    /** Направление прокрутки. */\n    direction: TStepperScrollDirection;\n    /** Размер Stepper — от него зависит размер кнопки. */\n    size: EComponentSize;\n}\n\n/**\n * Кнопка прокрутки ленты шагов. Рендерится по запросу CarouselExtended, который передаёт\n * `hidden` (прокрутка не нужна), `disabled` (достигнут край) и `onClick`.\n * Из таб-порядка исключена (`tabIndex = -1`): до любого шага можно дойти клавиатурой и без неё.\n */\nconst StepperScrollButton = ({ direction, size, hidden, ...restButtonProps }: IStepperScrollButtonProps) =>\n    hidden ? null : (\n        <div className={clsx(styles.stepperButtonWrapper, DIRECTION_TO_CLASS_NAME_MAP[direction])}>\n            <ButtonIcon\n                className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                tabIndex={-1}\n                {...restButtonProps}\n            >\n                {DIRECTION_TO_ICON_MAP[direction]}\n            </ButtonIcon>\n        </div>\n    );\n\n/**\n * Прокручивает ленту так, чтобы шаг прижался к правому краю видимой области.\n * Если справа есть следующий шаг, лента подтягивается ещё и на него — подсказка, что лента не кончилась.\n */\nconst alignStepRight = (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepRight: number): void => {\n    if (delta <= 0) {\n        return;\n    }\n\n    const nextStep = step.nextElementSibling;\n    // Текущий шаг – не последний, необходимо показать следующий шаг.\n    const scrollAmount = nextStep ? delta - (stepRight - nextStep.getBoundingClientRect().right) : delta;\n\n    scrollSmoothHorizontally(carousel, Math.ceil(scrollAmount));\n};\n\n/**\n * Прокручивает ленту так, чтобы шаг прижался к левому краю видимой области.\n * Если слева есть предыдущий шаг, лента подтягивается ещё и на него — подсказка, что лента не кончилась.\n */\nconst alignStepLeft = (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepLeft: number): void => {\n    if (delta >= 0) {\n        return;\n    }\n\n    const prevStep = step.previousElementSibling;\n    // Текущий шаг – не первый, необходимо показать предыдущий шаг.\n    const scrollAmount = prevStep ? delta - (stepLeft - prevStep.getBoundingClientRect().left) : delta;\n\n    scrollSmoothHorizontally(carousel, Math.floor(scrollAmount));\n};\n\n/** Прокручивает ленту так, чтобы шаг встал по центру видимой области. */\nconst alignStepCenter = (carousel: HTMLDivElement, delta: number): void => {\n    if (delta) {\n        scrollSmoothHorizontally(carousel, delta);\n    }\n};\n\n/**\n * Подводит выбранный шаг в видимую область ленты.\n * На узких экранах шаг центрируется, на широких — прижимается к ближайшему краю.\n */\nconst alignStep = (carousel: HTMLDivElement, step: HTMLLIElement): void => {\n    const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();\n    const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();\n    const carouselCenter = carouselLeft + carouselWidth / 2;\n    const stepCenter = stepLeft + stepWidth / 2;\n\n    if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {\n        alignStepCenter(carousel, stepCenter - carouselCenter);\n    } else if (carouselCenter > stepCenter) {\n        alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);\n    } else if (carouselCenter < stepCenter) {\n        alignStepRight(carousel, step, stepRight - carouselRight, stepRight);\n    }\n};\n\n/** Компонент Stepper, список шагов */\nexport const Stepper: React.FC<IStepperProps> & IStepperComposition = ({\n    className,\n    steps,\n    size = EComponentSize.MD,\n    selectedStepId,\n    ...restProps\n}) => {\n    const [scrollStep, setScrollStep] = useState(0);\n    const carouselRef = useRef<HTMLDivElement>(null);\n    const stepRefs = useRef<Record<string, HTMLLIElement | null>>({});\n    const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);\n\n    const renderPrevButton = useCallback(\n        (buttonProps: ICarouselExtendedButtonProvideProps) => (\n            <StepperScrollButton {...buttonProps} direction=\"prev\" size={size} />\n        ),\n        [size],\n    );\n\n    const renderNextButton = useCallback(\n        (buttonProps: ICarouselExtendedButtonProvideProps) => (\n            <StepperScrollButton {...buttonProps} direction=\"next\" size={size} />\n        ),\n        [size],\n    );\n\n    useEffect(() => {\n        const carouselNode = carouselRef.current;\n\n        if (carouselNode === null) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            setScrollStep(entries[0].contentRect.width * SCROLL_STEP_RATIO);\n        });\n\n        resizeObserver.observe(carouselNode);\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!selectedStepId) {\n            return;\n        }\n\n        const carousel = carouselRef.current;\n        const step = stepRefs.current[selectedStepId];\n\n        if (carousel && step) {\n            alignStep(carousel, step);\n        }\n    }, [selectedStepId]);\n\n    /** Запоминает узел шага, чтобы подвести его в видимую область при выборе. */\n    const setStepRef = (id: string) => (instance: HTMLLIElement | null) => {\n        if (instance === null) {\n            delete stepRefs.current[id];\n        } else {\n            stepRefs.current[id] = instance;\n        }\n    };\n\n    return (\n        <CarouselExtended\n            className={clsx(styles.stepperCarousel, sizeToClassNameMap[size], className)}\n            buttonPrev={renderPrevButton}\n            buttonNext={renderNextButton}\n            stepPrev={scrollStep}\n            stepNext={scrollStep}\n            ref={carouselRef}\n        >\n            <StepperExtended selectedStepId={selectedStepId} size={size} {...restProps}>\n                {steps.map(({ label, ...step }, index) => (\n                    <StepperExtended.Step\n                        key={step.id}\n                        forwardedRef={setStepRef(step.id)}\n                        {...step}\n                        isInActiveStep={index > selectedIndex}\n                    >\n                        {label}\n                    </StepperExtended.Step>\n                ))}\n            </StepperExtended>\n        </CarouselExtended>\n    );\n};\n\nStepper.Step = StepperStep;\n"],"names":[],"mappings":"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"}

package/components/Stepper/StepperExtended.js

@@ -1,30 +1,51 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React__default, { useMemo, useCallback } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { StepperStep } from "./StepperStep.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
+import { setForwardedRef } from "../../helpers/setForwardedRef.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const stepperExtended = "stepperExtended__c63acc01";
+const stepperExtended = "stepperExtended__3ab0ca58";
 const styles = {
   stepperExtended
 };
-const StepperExtended = ({
-  children,
-  className,
-  size = EComponentSize.LG,
-  onSelectStep,
-  selectedStepId,
-  forwardedRef,
-  ...rest
-}) => {
-  const classNames = clsx(styles.stepperExtended, className);
-  const contextValue = useMemo(
-    () => ({ selectedId: selectedStepId, size, onSelectStep }),
-    [selectedStepId, size, onSelectStep]
-  );
-  return /* @__PURE__ */ jsx(StepperExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { className: classNames, role: "tablist", ...rest, ref: forwardedRef, children }) });
-};
-StepperExtended.Step = StepperStep;
+const StepperExtendedRoot = React__default.forwardRef(
+  ({
+    children,
+    className,
+    size = EComponentSize.MD,
+    onSelectStep,
+    selectedStepId,
+    forwardedRef,
+    ...htmlOlAttributes
+  }, ref) => {
+    const contextValue = useMemo(
+      () => ({ selectedId: selectedStepId, size, onSelectStep }),
+      [selectedStepId, size, onSelectStep]
+    );
+    const setRef = useCallback(
+      (instance) => {
+        setForwardedRef(ref, instance);
+        setForwardedRef(forwardedRef, instance);
+      },
+      [ref, forwardedRef]
+    );
+    return /* @__PURE__ */ jsx(StepperExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx(styles.stepperExtended, className),
+        role: "tablist",
+        ...htmlOlAttributes,
+        ref: setRef,
+        children
+      }
+    ) });
+  }
+);
+StepperExtendedRoot.displayName = "StepperExtended";
+const StepperExtended = Object.assign(StepperExtendedRoot, {
+  Step: StepperStep
+});
 export {
   StepperExtended
 };

package/components/Stepper/StepperExtended.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperExtended.js","sources":["../../../src/components/Stepper/StepperExtended.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperExtendedContext } from \"./StepperExtendedContext\";\nimport { IStepperExtendedProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/StepperExtended.module.less\";\n\n/** Внутренние составляющие StepperExtended. */\ninterface IStepperExtendedComposition {\n    Step: typeof StepperStep;\n}\n\n/** Компонент StepperExtended, расширенная версия Stepper. */\nexport const StepperExtended: React.FC<IStepperExtendedProps> & IStepperExtendedComposition = ({\n    children,\n    className,\n    size = EComponentSize.LG,\n    onSelectStep,\n    selectedStepId,\n    forwardedRef,\n    ...rest\n}) => {\n    const classNames = clsx(styles.stepperExtended, className);\n\n    const contextValue = useMemo(\n        () => ({ selectedId: selectedStepId, size, onSelectStep }),\n        [selectedStepId, size, onSelectStep],\n    );\n\n    return (\n        <StepperExtendedContext.Provider value={contextValue}>\n            <ol className={classNames} role=\"tablist\" {...rest} ref={forwardedRef}>\n                {children}\n            </ol>\n        </StepperExtendedContext.Provider>\n    );\n};\n\nStepperExtended.Step = StepperStep;\n"],"names":[],"mappings":";;;;;;;;;;AAcO,MAAM,kBAAiF,CAAC;AAAA,EAC3F;AAAA,EACA;AAAA,EACA,OAAO,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,aAAa,KAAK,OAAO,iBAAiB,SAAS;AAEzD,QAAM,eAAe;AAAA,IACjB,OAAO,EAAE,YAAY,gBAAgB,MAAM,aAAA;AAAA,IAC3C,CAAC,gBAAgB,MAAM,YAAY;AAAA,EAAA;AAGvC,6BACK,uBAAuB,UAAvB,EAAgC,OAAO,cACpC,UAAA,oBAAC,MAAA,EAAG,WAAW,YAAY,MAAK,WAAW,GAAG,MAAM,KAAK,cACpD,UACL,GACJ;AAER;AAEA,gBAAgB,OAAO;"}
+{"version":3,"file":"StepperExtended.js","sources":["../../../src/components/Stepper/StepperExtended.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperExtendedContext } from \"./StepperExtendedContext\";\nimport { IStepperExtendedProps } from \"./types\";\nimport { setForwardedRef } from \"../../helpers/setForwardedRef\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/StepperExtended.module.less\";\n\n/** Внутренние составляющие StepperExtended. */\ninterface IStepperExtendedComposition {\n    Step: typeof StepperStep;\n}\n\nconst StepperExtendedRoot = React.forwardRef<HTMLOListElement, IStepperExtendedProps>(\n    (\n        {\n            children,\n            className,\n            size = EComponentSize.MD,\n            onSelectStep,\n            selectedStepId,\n            forwardedRef,\n            ...htmlOlAttributes\n        },\n        ref,\n    ) => {\n        const contextValue = useMemo(\n            () => ({ selectedId: selectedStepId, size, onSelectStep }),\n            [selectedStepId, size, onSelectStep],\n        );\n\n        // Компонент поддерживает и ref, и исторический prop forwardedRef — оба указывают на один и тот же <ol>.\n        const setRef = useCallback(\n            (instance: HTMLOListElement | null) => {\n                setForwardedRef(ref, instance);\n                setForwardedRef(forwardedRef, instance);\n            },\n            [ref, forwardedRef],\n        );\n\n        return (\n            <StepperExtendedContext.Provider value={contextValue}>\n                <ol\n                    className={clsx(styles.stepperExtended, className)}\n                    role=\"tablist\"\n                    {...htmlOlAttributes}\n                    ref={setRef}\n                >\n                    {children}\n                </ol>\n            </StepperExtendedContext.Provider>\n        );\n    },\n);\n\nStepperExtendedRoot.displayName = \"StepperExtended\";\n\n/**\n * Компонент StepperExtended, базовый степпер: список шагов без карусели и кнопок прокрутки.\n * Шаги потребитель передаёт сам через `StepperExtended.Step`. Готовый вариант с прокруткой — `Stepper`.\n */\n// Тип объявлен явно: без аннотации declaration emit падает с TS4023 — выведенный тип\n// сослался бы на внутренний интерфейс композиции из StepperStep, который не экспортируется.\nexport const StepperExtended: React.ForwardRefExoticComponent<\n    IStepperExtendedProps & React.RefAttributes<HTMLOListElement>\n> &\n    IStepperExtendedComposition = Object.assign(StepperExtendedRoot, {\n    Step: StepperStep,\n} satisfies IStepperExtendedComposition);\n"],"names":["React"],"mappings":";;;;;;;;;;;AAcA,MAAM,sBAAsBA,eAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,eAAe;AAAA,MACjB,OAAO,EAAE,YAAY,gBAAgB,MAAM,aAAA;AAAA,MAC3C,CAAC,gBAAgB,MAAM,YAAY;AAAA,IAAA;AAIvC,UAAM,SAAS;AAAA,MACX,CAAC,aAAsC;AACnC,wBAAgB,KAAK,QAAQ;AAC7B,wBAAgB,cAAc,QAAQ;AAAA,MAC1C;AAAA,MACA,CAAC,KAAK,YAAY;AAAA,IAAA;AAGtB,WACI,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,cACpC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,QACjD,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,KAAK;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AAEA,oBAAoB,cAAc;AAQ3B,MAAM,kBAGqB,OAAO,OAAO,qBAAqB;AAAA,EACjE,MAAM;AACV,CAAuC;"}

package/components/Stepper/StepperExtendedContext.js

@@ -1,7 +1,7 @@
 import React__default from "react";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 const StepperExtendedContext = React__default.createContext({
-  size: EComponentSize.LG,
+  size: EComponentSize.MD,
   selectedId: void 0,
   onSelectStep: () => {
   }

package/components/Stepper/StepperExtendedContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperExtendedContext.js","sources":["../../../src/components/Stepper/StepperExtendedContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"../../enums\";\n\n/** Контекст компонента StepperExtended. */\nexport interface IStepperExtendedContext {\n    /** Размер Stepper. */\n    size: EComponentSize;\n    /** Уникальный идентификатор выбранного шага. */\n    selectedId?: string;\n    /** Обработчик выбора шага. */\n    onSelectStep: (selectedId: string) => void;\n}\n\n/** Контекст в StepperExtended. */\nexport const StepperExtendedContext = React.createContext<IStepperExtendedContext>({\n    size: EComponentSize.LG,\n    selectedId: undefined,\n    onSelectStep: () => {},\n});\n"],"names":["React"],"mappings":";;AAcO,MAAM,yBAAyBA,eAAM,cAAuC;AAAA,EAC/E,MAAM,eAAe;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc,MAAM;AAAA,EAAC;AACzB,CAAC;"}
+{"version":3,"file":"StepperExtendedContext.js","sources":["../../../src/components/Stepper/StepperExtendedContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"../../enums\";\n\n/** Значение контекста StepperExtended: его читает каждый StepperExtended.Step. */\nexport interface IStepperExtendedContext {\n    /** Размер шагов. */\n    size: EComponentSize;\n    /** Уникальный идентификатор выбранного шага. */\n    selectedId?: string;\n    /** Обработчик выбора шага. */\n    onSelectStep: (selectedId: string) => void;\n}\n\n/** Контекст StepperExtended. Через barrel не экспортируется — это внутренняя деталь компонента. */\nexport const StepperExtendedContext = React.createContext<IStepperExtendedContext>({\n    size: EComponentSize.MD,\n    selectedId: undefined,\n    onSelectStep: () => {},\n});\n"],"names":["React"],"mappings":";;AAcO,MAAM,yBAAyBA,eAAM,cAAuC;AAAA,EAC/E,MAAM,eAAe;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc,MAAM;AAAA,EAAC;AACzB,CAAC;"}

package/components/Stepper/StepperStep.js

@@ -7,7 +7,7 @@ import { isKey } from "../../utils/keyboard.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
 import { EFocusSource } from "../../enums/EFocusSource.js";
 import { EStepperStepType } from "./enums.js";
-import { s as styles, S as StepperStepArrowBorder } from "../../chunks/StepperStepArrowBorder-DDMmOSKy.js";
+import { s as styles, S as StepperStepArrowBorder } from "../../chunks/StepperStepArrowBorder-DcVhkAKh.js";
 import { IconWrapper } from "../IconWrapper/IconWrapper.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const StepperStep = ({
@@ -92,7 +92,7 @@ const StepperStep = ({
     }
   };
   const renderIcon = () => /* @__PURE__ */ jsx(IconWrapper, { className: styles.icon, disabled: !!disabled, children: icon });
-  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: styles.content, "data-tx": "1.47.0", children: [
+  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: styles.content, "data-tx": "1.49.0", children: [
     icon && renderIcon(),
     children
   ] });

package/components/Stepper/StepperStepArrowBorder.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../enums/EComponentSize.js";
-import { S } from "../../chunks/StepperStepArrowBorder-DDMmOSKy.js";
+import { S } from "../../chunks/StepperStepArrowBorder-DcVhkAKh.js";
 export {
   S as StepperStepArrowBorder
 };

package/components/Suggest/SuggestMobileDropdownContent.js

@@ -4,7 +4,7 @@ import { useSuggestContext } from "./SuggestContext.js";
 import "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
 import "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-B9cIx_8A.js";
+import "../../chunks/DropdownListItem-DjQdo1YB.js";
 import "../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../Dropdown/mobile/DropdownMobileBody.js";
 import { DropdownMobileClose } from "../Dropdown/mobile/DropdownMobileClose.js";
@@ -21,8 +21,8 @@ import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-const suggestDropdownMobileBody = "suggestDropdownMobileBody__1fdce350";
-const suggestDropdownMobileNoOptionsText = "suggestDropdownMobileNoOptionsText__63c3fdb2";
+const suggestDropdownMobileBody = "suggestDropdownMobileBody__2489588b";
+const suggestDropdownMobileNoOptionsText = "suggestDropdownMobileNoOptionsText__03614acb";
 const styles = {
   suggestDropdownMobileBody,
   suggestDropdownMobileNoOptionsText

package/components/SuggestField/SuggestField.js

@@ -2,7 +2,7 @@ import "./desktop/SuggestFieldDesktopDropdown.js";
 import { SuggestFieldDesktop } from "./desktop/SuggestFieldDesktop.js";
 import { SuggestFieldMobile } from "./mobile/SuggestFieldMobile.js";
 import "./mobile/SuggestFieldMobileDropdown.js";
-import "../../chunks/SuggestFieldMobileDropdownHint-BESIIDZs.js";
+import "../../chunks/SuggestFieldMobileDropdownHint-CmXk_YrF.js";
 import { jsx } from "react/jsx-runtime";
 import { MobileView } from "../MobileView/MobileView.js";
 import "../FormField/components/FormFieldClear.js";