@sberbusiness/triplex-next 0.50.0 → 0.52.0

package/components/SMSField/SMSField.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
 import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
-import { useState } from "react";
 import { EFormFieldStatus } from "../FormField/enums.js";
 import "../FormField/components/FormFieldClear.js";
 import "../FormField/components/FormFieldCounter.js";
@@ -13,52 +13,65 @@ import "../FormField/components/FormFieldPrefix.js";
 import "../FormField/components/FormFieldTarget.js";
 import "../FormField/components/FormFieldTextarea.js";
 import "../FormField/FormField.js";
+import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { SMSFieldContext } from "./SMSFieldContext.js";
 import { SMSFieldInput } from "./components/SMSFieldInput.js";
 import { SMSFieldRefresh } from "./components/SMSFieldRefresh.js";
 import { SMSFieldSubmit } from "./components/SMSFieldSubmit.js";
 import { SMSFieldTooltip } from "./components/SMSFieldTooltip.js";
-import { s as styles } from "../../chunks/SMSField.module-i85fdYR2.js";
-import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const SMSField = (props) => {
-  const {
-    children,
-    className,
-    code,
-    onChangeCode,
-    onSubmitCode,
-    size,
-    status = EFormFieldStatus.DEFAULT,
-    ...htmlDivAttributes
-  } = props;
-  const [disabledSubmit, setDisabledSubmit] = useState(true);
-  const [tooltipId, setTooltipId] = useState();
-  const classSMSField = clsx(styles.smsField, className);
-  return /* @__PURE__ */ jsx(
-    SMSFieldContext.Provider,
-    {
-      value: {
-        code,
-        disabledSubmit,
-        onChangeCode,
-        onSubmitCode,
-        setDisabledSubmit,
-        setTooltipId,
-        size,
-        sizeClassName: sizeToClassNameMap[size],
-        status,
-        tooltipId
-      },
-      children: /* @__PURE__ */ jsx("div", { className: classSMSField, ...htmlDivAttributes, "data-tx": "0.50.0", children })
-    }
-  );
-};
+import { s as styles } from "../../chunks/SMSField.module-BEYAnwKA.js";
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
+const SMSField = Object.assign(
+  React.forwardRef((props, ref) => {
+    const {
+      children,
+      className,
+      code,
+      onChangeCode,
+      onSubmitCode,
+      size,
+      status = EFormFieldStatus.DEFAULT,
+      ...htmlDivAttributes
+    } = props;
+    const [disabledSubmit, setDisabledSubmit] = useState(true);
+    const [tooltipId, setTooltipId] = useState();
+    const classSMSField = clsx(styles.smsField, className);
+    return /* @__PURE__ */ jsx(
+      SMSFieldContext.Provider,
+      {
+        value: {
+          code,
+          disabledSubmit,
+          onChangeCode,
+          onSubmitCode,
+          setDisabledSubmit,
+          setTooltipId,
+          size,
+          sizeClassName: SIZE_TO_CLASS_NAME_MAP[size],
+          status,
+          tooltipId
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classSMSField,
+            ...htmlDivAttributes,
+            "data-tx": "0.52.0",
+            ref,
+            children
+          }
+        )
+      }
+    );
+  }),
+  {
+    Tooltip: SMSFieldTooltip,
+    Refresh: SMSFieldRefresh,
+    Input: SMSFieldInput,
+    Submit: SMSFieldSubmit
+  }
+);
 SMSField.displayName = "SMSField";
-SMSField.Tooltip = SMSFieldTooltip;
-SMSField.Refresh = SMSFieldRefresh;
-SMSField.Input = SMSFieldInput;
-SMSField.Submit = SMSFieldSubmit;
 export {
   SMSField
 };

package/components/SMSField/SMSField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSField.js","sources":["../../../src/components/SMSField/SMSField.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState } from \"react\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport { ISMSFieldProps } from \"@sberbusiness/triplex-next/components/SMSField/types\";\nimport { SMSFieldInput } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldInput\";\nimport { SMSFieldRefresh } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldRefresh\";\nimport { SMSFieldSubmit } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldSubmit\";\nimport { SMSFieldTooltip } from \"@sberbusiness/triplex-next/components/SMSField/components/SMSFieldTooltip\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Внутренние составляющие SMSField. */\ninterface ISMSFieldComposition {\n    Tooltip: typeof SMSFieldTooltip;\n    Refresh: typeof SMSFieldRefresh;\n    Input: typeof SMSFieldInput;\n    Submit: typeof SMSFieldSubmit;\n}\n\n/** Компонент для ввода СМС. */\nexport const SMSField: React.FC<ISMSFieldProps> & ISMSFieldComposition = (props) => {\n    const {\n        children,\n        className,\n        code,\n        onChangeCode,\n        onSubmitCode,\n        size,\n        status = EFormFieldStatus.DEFAULT,\n        ...htmlDivAttributes\n    } = props;\n\n    const [disabledSubmit, setDisabledSubmit] = useState(true);\n    const [tooltipId, setTooltipId] = useState<string>();\n    const classSMSField = clsx(styles.smsField, className);\n\n    return (\n        <SMSFieldContext.Provider\n            value={{\n                code,\n                disabledSubmit,\n                onChangeCode,\n                onSubmitCode,\n                setDisabledSubmit,\n                setTooltipId,\n                size,\n                sizeClassName: sizeToClassNameMap[size],\n                status,\n                tooltipId,\n            }}\n        >\n            <div className={classSMSField} {...htmlDivAttributes} data-tx={process.env.npm_package_version}>\n                {children}\n            </div>\n        </SMSFieldContext.Provider>\n    );\n};\n\nSMSField.displayName = \"SMSField\";\nSMSField.Tooltip = SMSFieldTooltip;\nSMSField.Refresh = SMSFieldRefresh;\nSMSField.Input = SMSFieldInput;\nSMSField.Submit = SMSFieldSubmit;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,qBAAqB,yBAAyB,MAAM;AAWnD,MAAM,WAA4D,CAAC,UAAU;AAChF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,iBAAiB;AAAA,IAC1B,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,IAAI;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAA;AAClC,QAAM,gBAAgB,KAAK,OAAO,UAAU,SAAS;AAErD,SACI;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,mBAAmB,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,MAAA;AAAA,MAGJ,UAAA,oBAAC,OAAA,EAAI,WAAW,eAAgB,GAAG,mBAAmB,WAAS,UAC1D,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,UAAU;AACnB,SAAS,QAAQ;AACjB,SAAS,SAAS;"}
+{"version":3,"file":"SMSField.js","sources":["../../../src/components/SMSField/SMSField.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { SMSFieldContext } from \"./SMSFieldContext\";\nimport { ISMSFieldProps } from \"./types\";\nimport { SMSFieldInput } from \"./components/SMSFieldInput\";\nimport { SMSFieldRefresh } from \"./components/SMSFieldRefresh\";\nimport { SMSFieldSubmit } from \"./components/SMSFieldSubmit\";\nimport { SMSFieldTooltip } from \"./components/SMSFieldTooltip\";\nimport styles from \"./styles/SMSField.module.less\";\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Компонент для ввода СМС. Ref указывает на корневой div. */\nexport const SMSField = Object.assign(\n    React.forwardRef<HTMLDivElement, ISMSFieldProps>((props, ref) => {\n        const {\n            children,\n            className,\n            code,\n            onChangeCode,\n            onSubmitCode,\n            size,\n            status = EFormFieldStatus.DEFAULT,\n            ...htmlDivAttributes\n        } = props;\n\n        const [disabledSubmit, setDisabledSubmit] = useState(true);\n        const [tooltipId, setTooltipId] = useState<string>();\n        const classSMSField = clsx(styles.smsField, className);\n\n        return (\n            <SMSFieldContext.Provider\n                value={{\n                    code,\n                    disabledSubmit,\n                    onChangeCode,\n                    onSubmitCode,\n                    setDisabledSubmit,\n                    setTooltipId,\n                    size,\n                    sizeClassName: SIZE_TO_CLASS_NAME_MAP[size],\n                    status,\n                    tooltipId,\n                }}\n            >\n                <div\n                    className={classSMSField}\n                    {...htmlDivAttributes}\n                    data-tx={process.env.npm_package_version}\n                    ref={ref}\n                >\n                    {children}\n                </div>\n            </SMSFieldContext.Provider>\n        );\n    }),\n    {\n        Tooltip: SMSFieldTooltip,\n        Refresh: SMSFieldRefresh,\n        Input: SMSFieldInput,\n        Submit: SMSFieldSubmit,\n    },\n);\n\nSMSField.displayName = \"SMSField\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,yBAAyB,yBAAyB,MAAM;AAGvD,MAAM,WAAW,OAAO;AAAA,EAC3B,MAAM,WAA2C,CAAC,OAAO,QAAQ;AAC7D,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,iBAAiB;AAAA,MAC1B,GAAG;AAAA,IAAA,IACH;AAEJ,UAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,IAAI;AACzD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAA;AAClC,UAAM,gBAAgB,KAAK,OAAO,UAAU,SAAS;AAErD,WACI;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACG,OAAO;AAAA,UACH;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAe,uBAAuB,IAAI;AAAA,UAC1C;AAAA,UACA;AAAA,QAAA;AAAA,QAGJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,YACV,GAAG;AAAA,YACJ,WAAS;AAAA,YACT;AAAA,YAEC;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAGZ,CAAC;AAAA,EACD;AAAA,IACI,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEhB;AAEA,SAAS,cAAc;"}

package/components/SMSField/components/RefreshIcon.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
-import { s as styles } from "../../../chunks/SMSField.module-i85fdYR2.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
+import { s as styles } from "../../../chunks/SMSField.module-BEYAnwKA.js";
 const iconPath = "M2 10c0-4.42 3.58-8 8-8 2.52 0 4.77 1.16 6.24 3H13.5c-.56 0-1 .44-1 1 0 .55.44 1 1 1h5c.55 0 1-.45 1-1V1c0-.56-.45-1-1-1-.56 0-1 .44-1 1v2.38A10.02 10.02 0 0 0 10 0C4.47 0 0 4.47 0 10c0 5.52 4.47 10 10 10 5.52 0 10-4.48 10-10 0-.56-.45-1-1-1-.56 0-1 .44-1 1 0 4.41-3.59 8-8 8-4.42 0-8-3.59-8-8";
 const bigIconPath = "M27 16c0 .81-.09 1.61-.27 2.39a10.9 10.9 0 0 1-1.54 3.65c-.41.62-.88 1.2-1.42 1.73-.53.54-1.11 1.01-1.73 1.42a10.906 10.906 0 0 1-3.65 1.54c-.78.18-1.58.27-2.39.27q-1.23 0-2.4-.27a10.9 10.9 0 0 1-3.65-1.54c-.62-.41-1.2-.88-1.73-1.42-.54-.53-1.01-1.11-1.42-1.73a10.906 10.906 0 0 1-1.54-3.65C5.08 17.61 5 16.81 5 16c0-.82.08-1.62.26-2.4A10.9 10.9 0 0 1 6.8 9.95c.41-.62.88-1.2 1.42-1.73.53-.54 1.11-1.01 1.73-1.42a10.906 10.906 0 0 1 3.65-1.54C14.38 5.08 15.18 5 16 5a11.1 11.1 0 0 1 2.93.39c.44.12.86.27 1.27.44.47.19.93.42 1.37.68.39.23.75.47 1.1.74.4.31.78.64 1.14 1 .06.06.12.13.19.2V6c0-.57.44-1 1-1s1 .43 1 1v5c0 .66-.34 1-1 1h-5c-.56 0-1-.44-1-1 0-.57.44-1 1-1h2.7c-.1-.12-.21-.23-.31-.34-.3-.3-.61-.58-.95-.83-.28-.21-.57-.41-.88-.59a8.753 8.753 0 0 0-3-1.11C17.05 7.04 16.53 7 16 7c-.69 0-1.35.07-2 .22-.52.11-1.02.27-1.51.48-.5.21-.97.47-1.42.76a9 9 0 0 0-2.61 2.61c-.29.45-.55.92-.76 1.42-.21.49-.37.99-.48 1.51A8.8 8.8 0 0 0 7 16c0 .68.07 1.34.22 1.99.11.52.27 1.02.48 1.51.21.5.47.97.76 1.42q.51.78 1.17 1.44c.45.44.92.83 1.44 1.17.45.29.92.55 1.42.76.49.21.99.37 1.51.48a8.803 8.803 0 0 0 3.99 0c.52-.11 1.02-.27 1.51-.48.5-.21.97-.47 1.42-.76a9 9 0 0 0 2.61-2.61c.29-.45.55-.92.76-1.42.21-.49.37-.99.48-1.51.15-.65.23-1.31.23-1.99 0-.57.44-1 1-1s1 .43 1 1";
 const radInOneDeg = Math.PI / 180;

package/components/SMSField/components/RefreshIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshIcon.js","sources":["../../../../src/components/SMSField/components/RefreshIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\n\nconst iconPath =\n    \"M2 10c0-4.42 3.58-8 8-8 2.52 0 4.77 1.16 6.24 3H13.5c-.56 0-1 .44-1 1 0 .55.44 1 1 1h5c.55 0 1-.45 1-1V1c0-.56-.45-1-1-1-.56 0-1 .44-1 1v2.38A10.02 10.02 0 0 0 10 0C4.47 0 0 4.47 0 10c0 5.52 4.47 10 10 10 5.52 0 10-4.48 10-10 0-.56-.45-1-1-1-.56 0-1 .44-1 1 0 4.41-3.59 8-8 8-4.42 0-8-3.59-8-8\";\n\nconst bigIconPath =\n    \"M27 16c0 .81-.09 1.61-.27 2.39a10.9 10.9 0 0 1-1.54 3.65c-.41.62-.88 1.2-1.42 1.73-.53.54-1.11 1.01-1.73 1.42a10.906 10.906 0 0 1-3.65 1.54c-.78.18-1.58.27-2.39.27q-1.23 0-2.4-.27a10.9 10.9 0 0 1-3.65-1.54c-.62-.41-1.2-.88-1.73-1.42-.54-.53-1.01-1.11-1.42-1.73a10.906 10.906 0 0 1-1.54-3.65C5.08 17.61 5 16.81 5 16c0-.82.08-1.62.26-2.4A10.9 10.9 0 0 1 6.8 9.95c.41-.62.88-1.2 1.42-1.73.53-.54 1.11-1.01 1.73-1.42a10.906 10.906 0 0 1 3.65-1.54C14.38 5.08 15.18 5 16 5a11.1 11.1 0 0 1 2.93.39c.44.12.86.27 1.27.44.47.19.93.42 1.37.68.39.23.75.47 1.1.74.4.31.78.64 1.14 1 .06.06.12.13.19.2V6c0-.57.44-1 1-1s1 .43 1 1v5c0 .66-.34 1-1 1h-5c-.56 0-1-.44-1-1 0-.57.44-1 1-1h2.7c-.1-.12-.21-.23-.31-.34-.3-.3-.61-.58-.95-.83-.28-.21-.57-.41-.88-.59a8.753 8.753 0 0 0-3-1.11C17.05 7.04 16.53 7 16 7c-.69 0-1.35.07-2 .22-.52.11-1.02.27-1.51.48-.5.21-.97.47-1.42.76a9 9 0 0 0-2.61 2.61c-.29.45-.55.92-.76 1.42-.21.49-.37.99-.48 1.51A8.8 8.8 0 0 0 7 16c0 .68.07 1.34.22 1.99.11.52.27 1.02.48 1.51.21.5.47.97.76 1.42q.51.78 1.17 1.44c.45.44.92.83 1.44 1.17.45.29.92.55 1.42.76.49.21.99.37 1.51.48a8.803 8.803 0 0 0 3.99 0c.52-.11 1.02-.27 1.51-.48.5-.21.97-.47 1.42-.76a9 9 0 0 0 2.61-2.61c.29-.45.55-.92.76-1.42.21-.49.37-.99.48-1.51.15-.65.23-1.31.23-1.99 0-.57.44-1 1-1s1 .43 1 1\";\n\n/** Внешние свойства компонента. */\ninterface IProps {\n    /** Признак блокировки компонента. */\n    disabled: boolean;\n    /** Процент заполнения иконки (выражается в долях единицы от 0 до 1). */\n    percent: number;\n    /** Размер иконки */\n    size: EComponentSize;\n}\n\nconst radInOneDeg = Math.PI / 180; // Радиан в одном градусе.\nconst radiansInCircle = Math.PI * 2; // Радиан в окружности.\n// Перевод градусов в радианы.\nconst deg2rad = (deg: number) => {\n    deg = deg % 360; // У круга только 360 градусов.\n    deg = deg < 0 ? 360 + deg : deg; // Отрицательный угол равносилен положительному получаемому прибавлением отрицательного угла к 360;\n    return deg * radInOneDeg; // Ну и под конец нормализованный угол переводим в радианы.\n};\nconst startAnge = deg2rad(-8); // Угол, с которого начинается отрисовка сектора - маски (иконка не строго горизонтально начинается, а на 8 градусов выше).\nconst endAngle = deg2rad(-19); // Угол, которым заканчивается отрисовка сектора - маски (выше горизонтали на 19 градусов).\nconst diff = endAngle < startAnge ? radiansInCircle - (startAnge - endAngle) : endAngle - startAnge; // Разница между углами в радианах.\nconst ra2X = (r: number, a: number) => Math.round(r * Math.cos(a) * 1000) / 1000; // По радиусу и углу определяем координату X.\nconst ra2Y = (r: number, a: number) => Math.round(r * Math.sin(a) * 1000) / 1000; // По радиусу и углу определяем координату Y.\n\n/**\n * Рисует сектор средствами svg-path, начиная с правой горизонтали и далее по часовой стрелке в зависимости от процентажа (0.99 - Практически полный круг).\n *\n * @param {number} centerX Координата X центра окружности.\n * @param {number} centerY Координата Y центра окружности.\n * @param {number} radius Радиус окружности.\n * @param {number} percent На сколько процентов от окружности рисовать сектор.\n */\nconst calculateSectorPath = (centerX: number, centerY: number, radius: number, percent: number) =>\n    \"M\" +\n    centerX +\n    \" \" +\n    centerY + // Смещаем перо в центр окружности.\n    \"L\" +\n    // Рисуем горизонтальную линию вправо в начало сектора.\n    (centerX + ra2X(radius, startAnge)) + // Координата X начала дуги.\n    \" \" +\n    (centerY + ra2Y(radius, startAnge)) + // Координата Y начала дуги.\n    \"A\" + // Рисуем дугу.\n    radius + // Радиус окружности дуги по оси X.\n    \" \" +\n    radius + // Радиус окружности дуги по оси Y.\n    \" 0 \" + // Смещение центра по оси X.\n    (percent > 0.5 ? \"1\" : \"0\") + // Флаг отрисовки длинной дуги (если 0 то короткой).\n    \" 1 \" + // Рисовать по часовой стрелке.\n    (centerX + ra2X(radius, (startAnge + percent * diff) % radiansInCircle)) + // Координата X конца дуги.\n    \" \" +\n    (centerY + ra2Y(radius, (startAnge + percent * diff) % radiansInCircle)) + // Координата Y конца дуги.\n    \"Z\"; // Замыкаем линию.\n\n/** Компонент для радиальной закраски иконки другим цветом. */\nexport const RefreshIcon: React.FC<IProps> = (props: IProps) => {\n    const percent = Math.round(Math.min(props.percent, 0.999) * 1000) / 1000;\n    const classNames = clsx({\n        [styles.disabled]: props.disabled,\n        [styles.empty]: !props.disabled,\n    });\n\n    if (props.size === EComponentSize.LG) {\n        return (\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" focusable=\"false\">\n                <clipPath id={`clipFrontLG${percent}`}>\n                    <path d={calculateSectorPath(16, 16, 18, percent)} />\n                </clipPath>\n\n                <path className={classNames} d={bigIconPath} />\n                <path className={styles.full} d={bigIconPath} clipPath={`url(#clipFrontLG${percent})`} />\n            </svg>\n        );\n    }\n\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" focusable=\"false\">\n            <clipPath id={`clipFront${percent}`}>\n                <path d={calculateSectorPath(10, 10, 14, percent)} />\n            </clipPath>\n\n            <path className={classNames} d={iconPath} />\n            <path className={styles.full} d={iconPath} clipPath={`url(#clipFront${percent})`} />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,WACF;AAEJ,MAAM,cACF;AAYJ,MAAM,cAAc,KAAK,KAAK;AAC9B,MAAM,kBAAkB,KAAK,KAAK;AAElC,MAAM,UAAU,CAAC,QAAgB;AAC7B,QAAM,MAAM;AACZ,QAAM,MAAM,IAAI,MAAM,MAAM;AAC5B,SAAO,MAAM;AACjB;AACA,MAAM,YAAY,QAAQ,EAAE;AAC5B,MAAM,WAAW,QAAQ,GAAG;AAC5B,MAAM,OAAO,WAAW,YAAY,mBAAmB,YAAY,YAAY,WAAW;AAC1F,MAAM,OAAO,CAAC,GAAW,MAAc,KAAK,MAAM,IAAI,KAAK,IAAI,CAAC,IAAI,GAAI,IAAI;AAC5E,MAAM,OAAO,CAAC,GAAW,MAAc,KAAK,MAAM,IAAI,KAAK,IAAI,CAAC,IAAI,GAAI,IAAI;AAU5E,MAAM,sBAAsB,CAAC,SAAiB,SAAiB,QAAgB,YAC3E,MACA,UACA,MACA;AACA;AAAA,CAEC,UAAU,KAAK,QAAQ,SAAS;AACjC,OACC,UAAU,KAAK,QAAQ,SAAS;AACjC;AACA;AACA,MACA;AACA;AAAA,CACC,UAAU,MAAM,MAAM;AACvB;AAAA,CACC,UAAU,KAAK,SAAS,YAAY,UAAU,QAAQ,eAAe;AACtE,OACC,UAAU,KAAK,SAAS,YAAY,UAAU,QAAQ,eAAe;AACtE;AAGG,MAAM,cAAgC,CAAC,UAAkB;AAC5D,QAAM,UAAU,KAAK,MAAM,KAAK,IAAI,MAAM,SAAS,KAAK,IAAI,GAAI,IAAI;AACpE,QAAM,aAAa,KAAK;AAAA,IACpB,CAAC,OAAO,QAAQ,GAAG,MAAM;AAAA,IACzB,CAAC,OAAO,KAAK,GAAG,CAAC,MAAM;AAAA,EAAA,CAC1B;AAED,MAAI,MAAM,SAAS,eAAe,IAAI;AAClC,WACI,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,WAAU,SACzF,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAS,IAAI,cAAc,OAAO,IAC/B,UAAA,oBAAC,QAAA,EAAK,GAAG,oBAAoB,IAAI,IAAI,IAAI,OAAO,GAAG,GACvD;AAAA,MAEA,oBAAC,QAAA,EAAK,WAAW,YAAY,GAAG,aAAa;AAAA,MAC7C,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAM,GAAG,aAAa,UAAU,mBAAmB,OAAO,IAAA,CAAK;AAAA,IAAA,GAC3F;AAAA,EAER;AAEA,SACI,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,WAAU,SACzF,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAS,IAAI,YAAY,OAAO,IAC7B,UAAA,oBAAC,QAAA,EAAK,GAAG,oBAAoB,IAAI,IAAI,IAAI,OAAO,GAAG,GACvD;AAAA,IAEA,oBAAC,QAAA,EAAK,WAAW,YAAY,GAAG,UAAU;AAAA,IAC1C,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAM,GAAG,UAAU,UAAU,iBAAiB,OAAO,IAAA,CAAK;AAAA,EAAA,GACtF;AAER;"}
+{"version":3,"file":"RefreshIcon.js","sources":["../../../../src/components/SMSField/components/RefreshIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport styles from \"../styles/SMSField.module.less\";\n\nconst iconPath =\n    \"M2 10c0-4.42 3.58-8 8-8 2.52 0 4.77 1.16 6.24 3H13.5c-.56 0-1 .44-1 1 0 .55.44 1 1 1h5c.55 0 1-.45 1-1V1c0-.56-.45-1-1-1-.56 0-1 .44-1 1v2.38A10.02 10.02 0 0 0 10 0C4.47 0 0 4.47 0 10c0 5.52 4.47 10 10 10 5.52 0 10-4.48 10-10 0-.56-.45-1-1-1-.56 0-1 .44-1 1 0 4.41-3.59 8-8 8-4.42 0-8-3.59-8-8\";\n\nconst bigIconPath =\n    \"M27 16c0 .81-.09 1.61-.27 2.39a10.9 10.9 0 0 1-1.54 3.65c-.41.62-.88 1.2-1.42 1.73-.53.54-1.11 1.01-1.73 1.42a10.906 10.906 0 0 1-3.65 1.54c-.78.18-1.58.27-2.39.27q-1.23 0-2.4-.27a10.9 10.9 0 0 1-3.65-1.54c-.62-.41-1.2-.88-1.73-1.42-.54-.53-1.01-1.11-1.42-1.73a10.906 10.906 0 0 1-1.54-3.65C5.08 17.61 5 16.81 5 16c0-.82.08-1.62.26-2.4A10.9 10.9 0 0 1 6.8 9.95c.41-.62.88-1.2 1.42-1.73.53-.54 1.11-1.01 1.73-1.42a10.906 10.906 0 0 1 3.65-1.54C14.38 5.08 15.18 5 16 5a11.1 11.1 0 0 1 2.93.39c.44.12.86.27 1.27.44.47.19.93.42 1.37.68.39.23.75.47 1.1.74.4.31.78.64 1.14 1 .06.06.12.13.19.2V6c0-.57.44-1 1-1s1 .43 1 1v5c0 .66-.34 1-1 1h-5c-.56 0-1-.44-1-1 0-.57.44-1 1-1h2.7c-.1-.12-.21-.23-.31-.34-.3-.3-.61-.58-.95-.83-.28-.21-.57-.41-.88-.59a8.753 8.753 0 0 0-3-1.11C17.05 7.04 16.53 7 16 7c-.69 0-1.35.07-2 .22-.52.11-1.02.27-1.51.48-.5.21-.97.47-1.42.76a9 9 0 0 0-2.61 2.61c-.29.45-.55.92-.76 1.42-.21.49-.37.99-.48 1.51A8.8 8.8 0 0 0 7 16c0 .68.07 1.34.22 1.99.11.52.27 1.02.48 1.51.21.5.47.97.76 1.42q.51.78 1.17 1.44c.45.44.92.83 1.44 1.17.45.29.92.55 1.42.76.49.21.99.37 1.51.48a8.803 8.803 0 0 0 3.99 0c.52-.11 1.02-.27 1.51-.48.5-.21.97-.47 1.42-.76a9 9 0 0 0 2.61-2.61c.29-.45.55-.92.76-1.42.21-.49.37-.99.48-1.51.15-.65.23-1.31.23-1.99 0-.57.44-1 1-1s1 .43 1 1\";\n\n/** Внешние свойства компонента. */\ninterface IProps {\n    /** Признак блокировки компонента. */\n    disabled: boolean;\n    /** Процент заполнения иконки (выражается в долях единицы от 0 до 1). */\n    percent: number;\n    /** Размер иконки */\n    size: EComponentSize;\n}\n\nconst radInOneDeg = Math.PI / 180; // Радиан в одном градусе.\nconst radiansInCircle = Math.PI * 2; // Радиан в окружности.\n// Перевод градусов в радианы.\nconst deg2rad = (deg: number) => {\n    deg = deg % 360; // У круга только 360 градусов.\n    deg = deg < 0 ? 360 + deg : deg; // Отрицательный угол равносилен положительному получаемому прибавлением отрицательного угла к 360;\n    return deg * radInOneDeg; // Ну и под конец нормализованный угол переводим в радианы.\n};\nconst startAnge = deg2rad(-8); // Угол, с которого начинается отрисовка сектора - маски (иконка не строго горизонтально начинается, а на 8 градусов выше).\nconst endAngle = deg2rad(-19); // Угол, которым заканчивается отрисовка сектора - маски (выше горизонтали на 19 градусов).\nconst diff = endAngle < startAnge ? radiansInCircle - (startAnge - endAngle) : endAngle - startAnge; // Разница между углами в радианах.\nconst ra2X = (r: number, a: number) => Math.round(r * Math.cos(a) * 1000) / 1000; // По радиусу и углу определяем координату X.\nconst ra2Y = (r: number, a: number) => Math.round(r * Math.sin(a) * 1000) / 1000; // По радиусу и углу определяем координату Y.\n\n/**\n * Рисует сектор средствами svg-path, начиная с правой горизонтали и далее по часовой стрелке в зависимости от процентажа (0.99 - Практически полный круг).\n *\n * @param {number} centerX Координата X центра окружности.\n * @param {number} centerY Координата Y центра окружности.\n * @param {number} radius Радиус окружности.\n * @param {number} percent На сколько процентов от окружности рисовать сектор.\n */\nconst calculateSectorPath = (centerX: number, centerY: number, radius: number, percent: number) =>\n    \"M\" +\n    centerX +\n    \" \" +\n    centerY + // Смещаем перо в центр окружности.\n    \"L\" +\n    // Рисуем горизонтальную линию вправо в начало сектора.\n    (centerX + ra2X(radius, startAnge)) + // Координата X начала дуги.\n    \" \" +\n    (centerY + ra2Y(radius, startAnge)) + // Координата Y начала дуги.\n    \"A\" + // Рисуем дугу.\n    radius + // Радиус окружности дуги по оси X.\n    \" \" +\n    radius + // Радиус окружности дуги по оси Y.\n    \" 0 \" + // Смещение центра по оси X.\n    (percent > 0.5 ? \"1\" : \"0\") + // Флаг отрисовки длинной дуги (если 0 то короткой).\n    \" 1 \" + // Рисовать по часовой стрелке.\n    (centerX + ra2X(radius, (startAnge + percent * diff) % radiansInCircle)) + // Координата X конца дуги.\n    \" \" +\n    (centerY + ra2Y(radius, (startAnge + percent * diff) % radiansInCircle)) + // Координата Y конца дуги.\n    \"Z\"; // Замыкаем линию.\n\n/** Компонент для радиальной закраски иконки другим цветом. */\nexport const RefreshIcon: React.FC<IProps> = (props: IProps) => {\n    const percent = Math.round(Math.min(props.percent, 0.999) * 1000) / 1000;\n    const classNames = clsx({\n        [styles.disabled]: props.disabled,\n        [styles.empty]: !props.disabled,\n    });\n\n    if (props.size === EComponentSize.LG) {\n        return (\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" focusable=\"false\">\n                <clipPath id={`clipFrontLG${percent}`}>\n                    <path d={calculateSectorPath(16, 16, 18, percent)} />\n                </clipPath>\n\n                <path className={classNames} d={bigIconPath} />\n                <path className={styles.full} d={bigIconPath} clipPath={`url(#clipFrontLG${percent})`} />\n            </svg>\n        );\n    }\n\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" focusable=\"false\">\n            <clipPath id={`clipFront${percent}`}>\n                <path d={calculateSectorPath(10, 10, 14, percent)} />\n            </clipPath>\n\n            <path className={classNames} d={iconPath} />\n            <path className={styles.full} d={iconPath} clipPath={`url(#clipFront${percent})`} />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,WACF;AAEJ,MAAM,cACF;AAYJ,MAAM,cAAc,KAAK,KAAK;AAC9B,MAAM,kBAAkB,KAAK,KAAK;AAElC,MAAM,UAAU,CAAC,QAAgB;AAC7B,QAAM,MAAM;AACZ,QAAM,MAAM,IAAI,MAAM,MAAM;AAC5B,SAAO,MAAM;AACjB;AACA,MAAM,YAAY,QAAQ,EAAE;AAC5B,MAAM,WAAW,QAAQ,GAAG;AAC5B,MAAM,OAAO,WAAW,YAAY,mBAAmB,YAAY,YAAY,WAAW;AAC1F,MAAM,OAAO,CAAC,GAAW,MAAc,KAAK,MAAM,IAAI,KAAK,IAAI,CAAC,IAAI,GAAI,IAAI;AAC5E,MAAM,OAAO,CAAC,GAAW,MAAc,KAAK,MAAM,IAAI,KAAK,IAAI,CAAC,IAAI,GAAI,IAAI;AAU5E,MAAM,sBAAsB,CAAC,SAAiB,SAAiB,QAAgB,YAC3E,MACA,UACA,MACA;AACA;AAAA,CAEC,UAAU,KAAK,QAAQ,SAAS;AACjC,OACC,UAAU,KAAK,QAAQ,SAAS;AACjC;AACA;AACA,MACA;AACA;AAAA,CACC,UAAU,MAAM,MAAM;AACvB;AAAA,CACC,UAAU,KAAK,SAAS,YAAY,UAAU,QAAQ,eAAe;AACtE,OACC,UAAU,KAAK,SAAS,YAAY,UAAU,QAAQ,eAAe;AACtE;AAGG,MAAM,cAAgC,CAAC,UAAkB;AAC5D,QAAM,UAAU,KAAK,MAAM,KAAK,IAAI,MAAM,SAAS,KAAK,IAAI,GAAI,IAAI;AACpE,QAAM,aAAa,KAAK;AAAA,IACpB,CAAC,OAAO,QAAQ,GAAG,MAAM;AAAA,IACzB,CAAC,OAAO,KAAK,GAAG,CAAC,MAAM;AAAA,EAAA,CAC1B;AAED,MAAI,MAAM,SAAS,eAAe,IAAI;AAClC,WACI,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,WAAU,SACzF,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAS,IAAI,cAAc,OAAO,IAC/B,UAAA,oBAAC,QAAA,EAAK,GAAG,oBAAoB,IAAI,IAAI,IAAI,OAAO,GAAG,GACvD;AAAA,MAEA,oBAAC,QAAA,EAAK,WAAW,YAAY,GAAG,aAAa;AAAA,MAC7C,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAM,GAAG,aAAa,UAAU,mBAAmB,OAAO,IAAA,CAAK;AAAA,IAAA,GAC3F;AAAA,EAER;AAEA,SACI,qBAAC,OAAA,EAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,WAAU,SACzF,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAS,IAAI,YAAY,OAAO,IAC7B,UAAA,oBAAC,QAAA,EAAK,GAAG,oBAAoB,IAAI,IAAI,IAAI,OAAO,GAAG,GACvD;AAAA,IAEA,oBAAC,QAAA,EAAK,WAAW,YAAY,GAAG,UAAU;AAAA,IAC1C,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAM,GAAG,UAAU,UAAU,iBAAiB,OAAO,IAAA,CAAK;AAAA,EAAA,GACtF;AAER;"}

package/components/SMSField/components/SMSFieldInput.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import React, { useContext, useState } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { EFormFieldStatus } from "../../FormField/enums.js";
 import "../../FormField/components/FormFieldClear.js";
 import { FormFieldCounter } from "../../FormField/components/FormFieldCounter.js";
@@ -14,10 +14,10 @@ import "../../FormField/components/FormFieldTarget.js";
 import "../../FormField/components/FormFieldTextarea.js";
 import { FormField } from "../../FormField/FormField.js";
 import { FormGroup } from "../../FormGroup/FormGroup.js";
-import { SMSFieldContext } from "../SMSFieldContext.js";
-import { s as styles } from "../../../chunks/SMSField.module-i85fdYR2.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-const regExp = new RegExp(/^[0-9]*$/);
+import { SMSFieldContext } from "../SMSFieldContext.js";
+import { s as styles } from "../../../chunks/SMSField.module-BEYAnwKA.js";
+const DIGITS_REGEXP = /^[0-9]*$/;
 const SMSFieldInput = React.forwardRef(
   ({
     className,
@@ -42,30 +42,30 @@ const SMSFieldInput = React.forwardRef(
       { [styles.errorPlaceholder]: showErrorText },
       className
     );
-    const handleChange = (e) => {
-      const value = e.target.value;
-      if (!regExp.test(value)) {
+    const handleChange = (event) => {
+      const value = event.target.value;
+      if (!DIGITS_REGEXP.test(value)) {
         return;
       }
       onChangeCode(value);
-      onChange == null ? void 0 : onChange(e);
+      onChange == null ? void 0 : onChange(event);
     };
-    const handleFocus = (e) => {
+    const handleFocus = (event) => {
       setFocused(true);
-      onFocus == null ? void 0 : onFocus(e);
+      onFocus == null ? void 0 : onFocus(event);
     };
-    const handleBlur = (e) => {
+    const handleBlur = (event) => {
       setFocused(false);
-      onBlur == null ? void 0 : onBlur(e);
+      onBlur == null ? void 0 : onBlur(event);
     };
-    const handleKeyDown = (e) => {
-      if (e.keyCode === EVENT_KEY_CODES.ENTER && !disabledSubmit) {
+    const handleKeyDown = (event) => {
+      if (event.keyCode === EVENT_KEY_CODES.ENTER && !disabledSubmit) {
         onSubmitCode(code);
       }
-      onKeyDown == null ? void 0 : onKeyDown(e);
+      onKeyDown == null ? void 0 : onKeyDown(event);
     };
     return /* @__PURE__ */ jsxs(FormGroup, { children: [
-      /* @__PURE__ */ jsx(FormField, { className: sizeClassName, onKeyDown: handleKeyDown, size, status, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(FormField, { className: sizeClassName, size, status, children: /* @__PURE__ */ jsx(
         FormFieldInput,
         {
           autoComplete: "off",
@@ -74,6 +74,7 @@ const SMSFieldInput = React.forwardRef(
           onBlur: handleBlur,
           onChange: handleChange,
           onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
           placeholder: showErrorText ? errorText : placeholder,
           ref,
           value: code,

package/components/SMSField/components/SMSFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSFieldInput.js","sources":["../../../../src/components/SMSField/components/SMSFieldInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useState } from \"react\";\nimport {\n    EFormFieldStatus,\n    FormField,\n    FormFieldCounter,\n    FormFieldDescription,\n    FormFieldInput,\n} from \"@sberbusiness/triplex-next/components/FormField\";\nimport { FormGroup } from \"@sberbusiness/triplex-next/components/FormGroup\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\n\n/** Свойства SMSField.Input. */\nexport interface ISMSFieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\"> {\n    /** Счётчик символов */\n    counter?: React.ReactNode;\n    /** Описание поля ввода */\n    description?: React.ReactNode;\n    /** Текст ошибки. Отображается вместо placeholder в статусе EFormFieldStatus.ERROR, пока поле не в фокусе. */\n    errorText?: string;\n}\n\nconst regExp = new RegExp(/^[0-9]*$/);\n\nexport const SMSFieldInput = React.forwardRef<HTMLInputElement, ISMSFieldInputProps>(\n    (\n        {\n            className,\n            counter,\n            description,\n            errorText,\n            maxLength = 8,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { code, disabledSubmit, onChangeCode, onSubmitCode, size, sizeClassName, status } =\n            useContext(SMSFieldContext);\n\n        const [focused, setFocused] = useState(false);\n\n        const error = status === EFormFieldStatus.ERROR;\n\n        const showErrorText = error && !focused && Boolean(errorText);\n\n        const inputClassName = clsx(\n            styles.input,\n            sizeClassName,\n            { [styles.errorPlaceholder]: showErrorText },\n            className,\n        );\n\n        /** Обработчик ввода sms-кода. */\n        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n            const value = e.target.value;\n            if (!regExp.test(value)) {\n                return;\n            }\n            onChangeCode(value);\n            onChange?.(e);\n        };\n\n        /** Обработчик получения фокуса. */\n        const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(e);\n        };\n\n        /** Обработчик потери фокуса. */\n        const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(e);\n        };\n\n        /** Обработчик нажатия клавиши Enter (для отправки sms-кода). */\n        const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n            if (e.keyCode === EVENT_KEY_CODES.ENTER && !disabledSubmit) {\n                onSubmitCode(code);\n            }\n            onKeyDown?.(e);\n        };\n\n        return (\n            <FormGroup>\n                <FormField className={sizeClassName} onKeyDown={handleKeyDown} size={size} status={status}>\n                    <FormFieldInput\n                        autoComplete=\"off\"\n                        className={inputClassName}\n                        maxLength={maxLength}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        onFocus={handleFocus}\n                        placeholder={showErrorText ? errorText : placeholder}\n                        ref={ref}\n                        value={code}\n                        {...restProps}\n                        aria-invalid={error || undefined}\n                    />\n                </FormField>\n\n                {description || counter ? (\n                    <FormFieldDescription>\n                        {description}\n                        {counter ? <FormFieldCounter>{counter}</FormFieldCounter> : null}\n                    </FormFieldDescription>\n                ) : null}\n            </FormGroup>\n        );\n    },\n);\n\nSMSFieldInput.displayName = \"SMSFieldInput\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,MAAM,SAAS,IAAI,OAAO,UAAU;AAE7B,MAAM,gBAAgB,MAAM;AAAA,EAC/B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,EAAE,MAAM,gBAAgB,cAAc,cAAc,MAAM,eAAe,OAAA,IAC3E,WAAW,eAAe;AAE9B,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,QAAQ,WAAW,iBAAiB;AAE1C,UAAM,gBAAgB,SAAS,CAAC,WAAW,QAAQ,SAAS;AAE5D,UAAM,iBAAiB;AAAA,MACnB,OAAO;AAAA,MACP;AAAA,MACA,EAAE,CAAC,OAAO,gBAAgB,GAAG,cAAA;AAAA,MAC7B;AAAA,IAAA;AAIJ,UAAM,eAAe,CAAC,MAA2C;AAC7D,YAAM,QAAQ,EAAE,OAAO;AACvB,UAAI,CAAC,OAAO,KAAK,KAAK,GAAG;AACrB;AAAA,MACJ;AACA,mBAAa,KAAK;AAClB,2CAAW;AAAA,IACf;AAGA,UAAM,cAAc,CAAC,MAA0C;AAC3D,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAGA,UAAM,aAAa,CAAC,MAA0C;AAC1D,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAGA,UAAM,gBAAgB,CAAC,MAA6C;AAChE,UAAI,EAAE,YAAY,gBAAgB,SAAS,CAAC,gBAAgB;AACxD,qBAAa,IAAI;AAAA,MACrB;AACA,6CAAY;AAAA,IAChB;AAEA,gCACK,WAAA,EACG,UAAA;AAAA,MAAA,oBAAC,aAAU,WAAW,eAAe,WAAW,eAAe,MAAY,QACvE,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAa;AAAA,UACb,WAAW;AAAA,UACX;AAAA,UACA,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,aAAa,gBAAgB,YAAY;AAAA,UACzC;AAAA,UACA,OAAO;AAAA,UACN,GAAG;AAAA,UACJ,gBAAc,SAAS;AAAA,QAAA;AAAA,MAAA,GAE/B;AAAA,MAEC,eAAe,UACZ,qBAAC,sBAAA,EACI,UAAA;AAAA,QAAA;AAAA,QACA,UAAU,oBAAC,kBAAA,EAAkB,UAAA,QAAA,CAAQ,IAAsB;AAAA,MAAA,EAAA,CAChE,IACA;AAAA,IAAA,GACR;AAAA,EAER;AACJ;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"SMSFieldInput.js","sources":["../../../../src/components/SMSField/components/SMSFieldInput.tsx"],"sourcesContent":["import React, { useContext, useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n    EFormFieldStatus,\n    FormField,\n    FormFieldCounter,\n    FormFieldDescription,\n    FormFieldInput,\n} from \"@sberbusiness/triplex-next/components/FormField\";\nimport { FormGroup } from \"@sberbusiness/triplex-next/components/FormGroup\";\nimport { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { SMSFieldContext } from \"../SMSFieldContext\";\nimport styles from \"../styles/SMSField.module.less\";\n\n/** Свойства SMSField.Input. */\nexport interface ISMSFieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"disabled\"> {\n    /** Счётчик символов. */\n    counter?: React.ReactNode;\n    /** Описание поля ввода. */\n    description?: React.ReactNode;\n    /** Текст ошибки. Отображается вместо placeholder в статусе EFormFieldStatus.ERROR, пока поле не в фокусе. */\n    errorText?: string;\n}\n\nconst DIGITS_REGEXP = /^[0-9]*$/;\n\n/** Поле ввода кода: принимает только цифры, значение берёт из code корневого SMSField. Ref указывает на input. */\nexport const SMSFieldInput = React.forwardRef<HTMLInputElement, ISMSFieldInputProps>(\n    (\n        {\n            className,\n            counter,\n            description,\n            errorText,\n            maxLength = 8,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { code, disabledSubmit, onChangeCode, onSubmitCode, size, sizeClassName, status } =\n            useContext(SMSFieldContext);\n\n        const [focused, setFocused] = useState(false);\n\n        const error = status === EFormFieldStatus.ERROR;\n\n        const showErrorText = error && !focused && Boolean(errorText);\n\n        const inputClassName = clsx(\n            styles.input,\n            sizeClassName,\n            { [styles.errorPlaceholder]: showErrorText },\n            className,\n        );\n\n        const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n            const value = event.target.value;\n            if (!DIGITS_REGEXP.test(value)) {\n                return;\n            }\n            onChangeCode(value);\n            onChange?.(event);\n        };\n\n        const handleFocus: React.FocusEventHandler<HTMLInputElement> = (event) => {\n            setFocused(true);\n            onFocus?.(event);\n        };\n\n        const handleBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {\n            setFocused(false);\n            onBlur?.(event);\n        };\n\n        // Enter отправляет код, только если доступна SMSField.Submit.\n        const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n            if (event.keyCode === EVENT_KEY_CODES.ENTER && !disabledSubmit) {\n                onSubmitCode(code);\n            }\n            onKeyDown?.(event);\n        };\n\n        return (\n            <FormGroup>\n                <FormField className={sizeClassName} size={size} status={status}>\n                    <FormFieldInput\n                        autoComplete=\"off\"\n                        className={inputClassName}\n                        maxLength={maxLength}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        onFocus={handleFocus}\n                        onKeyDown={handleKeyDown}\n                        placeholder={showErrorText ? errorText : placeholder}\n                        ref={ref}\n                        value={code}\n                        {...restProps}\n                        aria-invalid={error || undefined}\n                    />\n                </FormField>\n\n                {description || counter ? (\n                    <FormFieldDescription>\n                        {description}\n                        {counter ? <FormFieldCounter>{counter}</FormFieldCounter> : null}\n                    </FormFieldDescription>\n                ) : null}\n            </FormGroup>\n        );\n    },\n);\n\nSMSFieldInput.displayName = \"SMSFieldInput\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB;AAGf,MAAM,gBAAgB,MAAM;AAAA,EAC/B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,EAAE,MAAM,gBAAgB,cAAc,cAAc,MAAM,eAAe,OAAA,IAC3E,WAAW,eAAe;AAE9B,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,QAAQ,WAAW,iBAAiB;AAE1C,UAAM,gBAAgB,SAAS,CAAC,WAAW,QAAQ,SAAS;AAE5D,UAAM,iBAAiB;AAAA,MACnB,OAAO;AAAA,MACP;AAAA,MACA,EAAE,CAAC,OAAO,gBAAgB,GAAG,cAAA;AAAA,MAC7B;AAAA,IAAA;AAGJ,UAAM,eAA2D,CAAC,UAAU;AACxE,YAAM,QAAQ,MAAM,OAAO;AAC3B,UAAI,CAAC,cAAc,KAAK,KAAK,GAAG;AAC5B;AAAA,MACJ;AACA,mBAAa,KAAK;AAClB,2CAAW;AAAA,IACf;AAEA,UAAM,cAAyD,CAAC,UAAU;AACtE,iBAAW,IAAI;AACf,yCAAU;AAAA,IACd;AAEA,UAAM,aAAwD,CAAC,UAAU;AACrE,iBAAW,KAAK;AAChB,uCAAS;AAAA,IACb;AAGA,UAAM,gBAA8D,CAAC,UAAU;AAC3E,UAAI,MAAM,YAAY,gBAAgB,SAAS,CAAC,gBAAgB;AAC5D,qBAAa,IAAI;AAAA,MACrB;AACA,6CAAY;AAAA,IAChB;AAEA,gCACK,WAAA,EACG,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU,WAAW,eAAe,MAAY,QAC7C,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAa;AAAA,UACb,WAAW;AAAA,UACX;AAAA,UACA,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,aAAa,gBAAgB,YAAY;AAAA,UACzC;AAAA,UACA,OAAO;AAAA,UACN,GAAG;AAAA,UACJ,gBAAc,SAAS;AAAA,QAAA;AAAA,MAAA,GAE/B;AAAA,MAEC,eAAe,UACZ,qBAAC,sBAAA,EACI,UAAA;AAAA,QAAA;AAAA,QACA,UAAU,oBAAC,kBAAA,EAAkB,UAAA,QAAA,CAAQ,IAAsB;AAAA,MAAA,EAAA,CAChE,IACA;AAAA,IAAA,GACR;AAAA,EAER;AACJ;AAEA,cAAc,cAAc;"}

package/components/SMSField/components/SMSFieldRefresh.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
-import { forwardRef, useContext, useMemo } from "react";
 import "../../Button/Button.js";
 import { ButtonIcon } from "../../Button/ButtonIcon.js";
 import "../../Button/ButtonDropdown.js";
@@ -20,23 +20,16 @@ import "../../FormField/components/FormFieldTextarea.js";
 import "../../FormField/FormField.js";
 import { SMSFieldContext } from "../SMSFieldContext.js";
 import { RefreshIcon } from "./RefreshIcon.js";
-import { s as styles } from "../../../chunks/SMSField.module-i85fdYR2.js";
+import { s as styles } from "../../../chunks/SMSField.module-BEYAnwKA.js";
 const SMSFieldRefresh = forwardRef(
   ({ className, countdownTime, countdownTimeLeft, disabled, onClick, onRefresh, ...restProps }, ref) => {
     const { size, sizeClassName, status, tooltipId } = useContext(SMSFieldContext);
-    const fieldDisabled = status === EFormFieldStatus.DISABLED;
-    const isSmsCountdownTicking = countdownTimeLeft > 0;
-    const refreshDisabled = fieldDisabled || disabled || isSmsCountdownTicking;
+    const iconDisabled = status === EFormFieldStatus.DISABLED || Boolean(disabled);
+    const refreshDisabled = iconDisabled || countdownTimeLeft > 0;
     const refreshClassName = clsx(styles.btnRefresh, sizeClassName, className, {
       [styles.disabled]: refreshDisabled
     });
-    const percent = useMemo(() => {
-      if (countdownTimeLeft >= countdownTime || fieldDisabled || disabled) {
-        return 0;
-      } else {
-        return (countdownTime - countdownTimeLeft) / countdownTime;
-      }
-    }, [countdownTime, countdownTimeLeft, disabled, fieldDisabled]);
+    const percent = iconDisabled || countdownTimeLeft >= countdownTime ? 0 : (countdownTime - countdownTimeLeft) / countdownTime;
     const handleClick = (event) => {
       onRefresh();
       onClick == null ? void 0 : onClick(event);
@@ -51,7 +44,7 @@ const SMSFieldRefresh = forwardRef(
         ref,
         shape: EButtonIconShape.SQUIRCLE,
         ...restProps,
-        children: /* @__PURE__ */ jsx(RefreshIcon, { percent: percent || 0, size, disabled: Boolean(fieldDisabled || disabled) })
+        children: /* @__PURE__ */ jsx(RefreshIcon, { percent, size, disabled: iconDisabled })
       }
     );
   }

package/components/SMSField/components/SMSFieldRefresh.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSFieldRefresh.js","sources":["../../../../src/components/SMSField/components/SMSFieldRefresh.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useContext, useMemo } from \"react\";\nimport { EButtonIconShape } from \"@sberbusiness/triplex-next/components/Button\";\nimport { ButtonIcon } from \"@sberbusiness/triplex-next/components/Button/ButtonIcon\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport { RefreshIcon } from \"@sberbusiness/triplex-next/components/SMSField/components/RefreshIcon\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\n\n/** Свойства SMSField.Refresh. */\nexport interface ISMSFieldRefreshProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    /** Число секунд обратного отсчета. */\n    countdownTime: number;\n    /** Число оставшихся секунд обратного отсчета. */\n    countdownTimeLeft: number;\n    /** Обработчик запроса кода. */\n    onRefresh: () => void;\n}\n\nexport const SMSFieldRefresh = forwardRef<HTMLButtonElement, ISMSFieldRefreshProps>(\n    ({ className, countdownTime, countdownTimeLeft, disabled, onClick, onRefresh, ...restProps }, ref) => {\n        const { size, sizeClassName, status, tooltipId } = useContext(SMSFieldContext);\n\n        const fieldDisabled = status === EFormFieldStatus.DISABLED;\n        const isSmsCountdownTicking = countdownTimeLeft > 0;\n        const refreshDisabled = fieldDisabled || disabled || isSmsCountdownTicking;\n        const refreshClassName = clsx(styles.btnRefresh, sizeClassName, className, {\n            [styles.disabled]: refreshDisabled,\n        });\n\n        // Проценты выражаются в долях единицы.\n        const percent = useMemo(() => {\n            if (countdownTimeLeft >= countdownTime || fieldDisabled || disabled) {\n                return 0;\n            } else {\n                return (countdownTime - countdownTimeLeft) / countdownTime;\n            }\n        }, [countdownTime, countdownTimeLeft, disabled, fieldDisabled]);\n\n        /** Обработчик запроса sms-кода. */\n        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            onRefresh();\n            onClick?.(event);\n        };\n\n        return (\n            <ButtonIcon\n                aria-describedby={tooltipId}\n                className={refreshClassName}\n                disabled={refreshDisabled}\n                onClick={handleClick}\n                ref={ref}\n                shape={EButtonIconShape.SQUIRCLE}\n                {...restProps}\n            >\n                <RefreshIcon percent={percent || 0} size={size} disabled={Boolean(fieldDisabled || disabled)} />\n            </ButtonIcon>\n        );\n    },\n);\n\nSMSFieldRefresh.displayName = \"SMSFieldRefresh\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,kBAAkB;AAAA,EAC3B,CAAC,EAAE,WAAW,eAAe,mBAAmB,UAAU,SAAS,WAAW,GAAG,UAAA,GAAa,QAAQ;AAClG,UAAM,EAAE,MAAM,eAAe,QAAQ,UAAA,IAAc,WAAW,eAAe;AAE7E,UAAM,gBAAgB,WAAW,iBAAiB;AAClD,UAAM,wBAAwB,oBAAoB;AAClD,UAAM,kBAAkB,iBAAiB,YAAY;AACrD,UAAM,mBAAmB,KAAK,OAAO,YAAY,eAAe,WAAW;AAAA,MACvE,CAAC,OAAO,QAAQ,GAAG;AAAA,IAAA,CACtB;AAGD,UAAM,UAAU,QAAQ,MAAM;AAC1B,UAAI,qBAAqB,iBAAiB,iBAAiB,UAAU;AACjE,eAAO;AAAA,MACX,OAAO;AACH,gBAAQ,gBAAgB,qBAAqB;AAAA,MACjD;AAAA,IACJ,GAAG,CAAC,eAAe,mBAAmB,UAAU,aAAa,CAAC;AAG9D,UAAM,cAAc,CAAC,UAA+C;AAChE,gBAAA;AACA,yCAAU;AAAA,IACd;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkB;AAAA,QAClB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA,OAAO,iBAAiB;AAAA,QACvB,GAAG;AAAA,QAEJ,UAAA,oBAAC,aAAA,EAAY,SAAS,WAAW,GAAG,MAAY,UAAU,QAAQ,iBAAiB,QAAQ,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1G;AACJ;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"SMSFieldRefresh.js","sources":["../../../../src/components/SMSField/components/SMSFieldRefresh.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { EButtonIconShape } from \"@sberbusiness/triplex-next/components/Button\";\nimport { ButtonIcon } from \"@sberbusiness/triplex-next/components/Button/ButtonIcon\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { SMSFieldContext } from \"../SMSFieldContext\";\nimport { RefreshIcon } from \"./RefreshIcon\";\nimport styles from \"../styles/SMSField.module.less\";\n\n/** Свойства SMSField.Refresh. */\nexport interface ISMSFieldRefreshProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    /** Число секунд обратного отсчета. */\n    countdownTime: number;\n    /** Число оставшихся секунд обратного отсчета. */\n    countdownTimeLeft: number;\n    /** Обработчик запроса кода. */\n    onRefresh: () => void;\n}\n\n/** Кнопка повторного запроса кода с индикатором обратного отсчёта. Ref указывает на button. */\nexport const SMSFieldRefresh = forwardRef<HTMLButtonElement, ISMSFieldRefreshProps>(\n    ({ className, countdownTime, countdownTimeLeft, disabled, onClick, onRefresh, ...restProps }, ref) => {\n        const { size, sizeClassName, status, tooltipId } = useContext(SMSFieldContext);\n\n        const iconDisabled = status === EFormFieldStatus.DISABLED || Boolean(disabled);\n        const refreshDisabled = iconDisabled || countdownTimeLeft > 0;\n        const refreshClassName = clsx(styles.btnRefresh, sizeClassName, className, {\n            [styles.disabled]: refreshDisabled,\n        });\n        // Доля прошедшего времени обратного отсчёта, от 0 до 1.\n        const percent =\n            iconDisabled || countdownTimeLeft >= countdownTime\n                ? 0\n                : (countdownTime - countdownTimeLeft) / countdownTime;\n\n        const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n            onRefresh();\n            onClick?.(event);\n        };\n\n        return (\n            <ButtonIcon\n                aria-describedby={tooltipId}\n                className={refreshClassName}\n                disabled={refreshDisabled}\n                onClick={handleClick}\n                ref={ref}\n                shape={EButtonIconShape.SQUIRCLE}\n                {...restProps}\n            >\n                <RefreshIcon percent={percent} size={size} disabled={iconDisabled} />\n            </ButtonIcon>\n        );\n    },\n);\n\nSMSFieldRefresh.displayName = \"SMSFieldRefresh\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,kBAAkB;AAAA,EAC3B,CAAC,EAAE,WAAW,eAAe,mBAAmB,UAAU,SAAS,WAAW,GAAG,UAAA,GAAa,QAAQ;AAClG,UAAM,EAAE,MAAM,eAAe,QAAQ,UAAA,IAAc,WAAW,eAAe;AAE7E,UAAM,eAAe,WAAW,iBAAiB,YAAY,QAAQ,QAAQ;AAC7E,UAAM,kBAAkB,gBAAgB,oBAAoB;AAC5D,UAAM,mBAAmB,KAAK,OAAO,YAAY,eAAe,WAAW;AAAA,MACvE,CAAC,OAAO,QAAQ,GAAG;AAAA,IAAA,CACtB;AAED,UAAM,UACF,gBAAgB,qBAAqB,gBAC/B,KACC,gBAAgB,qBAAqB;AAEhD,UAAM,cAA0D,CAAC,UAAU;AACvE,gBAAA;AACA,yCAAU;AAAA,IACd;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkB;AAAA,QAClB,WAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA,OAAO,iBAAiB;AAAA,QACvB,GAAG;AAAA,QAEJ,UAAA,oBAAC,aAAA,EAAY,SAAkB,MAAY,UAAU,aAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/E;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/SMSField/components/SMSFieldSubmit.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import React, { useContext, useEffect } from "react";
 import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
-import { useContext, useEffect } from "react";
 import "../../Button/Button.js";
 import { ButtonIcon } from "../../Button/ButtonIcon.js";
 import "../../Button/ButtonDropdown.js";
@@ -20,32 +20,35 @@ import "../../FormField/components/FormFieldTextarea.js";
 import "../../FormField/FormField.js";
 import { SMSFieldContext } from "../SMSFieldContext.js";
 import { SubmitIcon } from "./SubmitIcon.js";
-import { s as styles } from "../../../chunks/SMSField.module-i85fdYR2.js";
-const SMSFieldSubmit = ({ className, disabled, onClick, ...restProps }) => {
-  const { code, onSubmitCode, setDisabledSubmit, size, sizeClassName, status } = useContext(SMSFieldContext);
-  const fieldDisabled = status === EFormFieldStatus.DISABLED;
-  const submitDisabled = fieldDisabled || disabled || code === "";
-  const submitClassName = clsx(styles.btnSubmit, { [styles.active]: !!code }, sizeClassName, className);
-  useEffect(() => {
-    setDisabledSubmit(submitDisabled);
-  }, [submitDisabled, setDisabledSubmit]);
-  const handleClick = (event) => {
-    onSubmitCode(code);
-    onClick == null ? void 0 : onClick(event);
-  };
-  return /* @__PURE__ */ jsx(
-    ButtonIcon,
-    {
-      active: !!code,
-      className: submitClassName,
-      disabled: submitDisabled,
-      onClick: handleClick,
-      shape: EButtonIconShape.CIRCLE,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(SubmitIcon, { size })
-    }
-  );
-};
+import { s as styles } from "../../../chunks/SMSField.module-BEYAnwKA.js";
+const SMSFieldSubmit = React.forwardRef(
+  ({ className, disabled, onClick, ...restProps }, ref) => {
+    const { code, onSubmitCode, setDisabledSubmit, size, sizeClassName, status } = useContext(SMSFieldContext);
+    const hasCode = code !== "";
+    const submitDisabled = status === EFormFieldStatus.DISABLED || disabled || !hasCode;
+    const submitClassName = clsx(styles.btnSubmit, { [styles.active]: hasCode }, sizeClassName, className);
+    useEffect(() => {
+      setDisabledSubmit(submitDisabled);
+    }, [submitDisabled, setDisabledSubmit]);
+    const handleClick = (event) => {
+      onSubmitCode(code);
+      onClick == null ? void 0 : onClick(event);
+    };
+    return /* @__PURE__ */ jsx(
+      ButtonIcon,
+      {
+        active: hasCode,
+        className: submitClassName,
+        disabled: submitDisabled,
+        onClick: handleClick,
+        ref,
+        shape: EButtonIconShape.CIRCLE,
+        ...restProps,
+        children: /* @__PURE__ */ jsx(SubmitIcon, { size })
+      }
+    );
+  }
+);
 SMSFieldSubmit.displayName = "SMSFieldSubmit";
 export {
   SMSFieldSubmit

package/components/SMSField/components/SMSFieldSubmit.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSFieldSubmit.js","sources":["../../../../src/components/SMSField/components/SMSFieldSubmit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useContext } from \"react\";\nimport { EButtonIconShape } from \"@sberbusiness/triplex-next/components/Button\";\nimport { ButtonIcon } from \"@sberbusiness/triplex-next/components/Button/ButtonIcon\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport { SubmitIcon } from \"@sberbusiness/triplex-next/components/SMSField/components/SubmitIcon\";\nimport styles from \"@sberbusiness/triplex-next/components/SMSField/styles/SMSField.module.less\";\n\n/** Свойства SMSField.Submit. */\nexport interface ISMSFieldSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const SMSFieldSubmit: React.FC<ISMSFieldSubmitProps> = ({ className, disabled, onClick, ...restProps }) => {\n    const { code, onSubmitCode, setDisabledSubmit, size, sizeClassName, status } = useContext(SMSFieldContext);\n\n    const fieldDisabled = status === EFormFieldStatus.DISABLED;\n    const submitDisabled = fieldDisabled || disabled || code === \"\";\n    const submitClassName = clsx(styles.btnSubmit, { [styles.active]: !!code }, sizeClassName, className);\n\n    useEffect(() => {\n        setDisabledSubmit(submitDisabled);\n    }, [submitDisabled, setDisabledSubmit]);\n\n    /** Обработчик отправки sms-кода. */\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onSubmitCode(code);\n        onClick?.(event);\n    };\n\n    return (\n        <ButtonIcon\n            active={!!code}\n            className={submitClassName}\n            disabled={submitDisabled}\n            onClick={handleClick}\n            shape={EButtonIconShape.CIRCLE}\n            {...restProps}\n        >\n            <SubmitIcon size={size} />\n        </ButtonIcon>\n    );\n};\n\nSMSFieldSubmit.displayName = \"SMSFieldSubmit\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,iBAAiD,CAAC,EAAE,WAAW,UAAU,SAAS,GAAG,gBAAgB;AAC9G,QAAM,EAAE,MAAM,cAAc,mBAAmB,MAAM,eAAe,OAAA,IAAW,WAAW,eAAe;AAEzG,QAAM,gBAAgB,WAAW,iBAAiB;AAClD,QAAM,iBAAiB,iBAAiB,YAAY,SAAS;AAC7D,QAAM,kBAAkB,KAAK,OAAO,WAAW,EAAE,CAAC,OAAO,MAAM,GAAG,CAAC,CAAC,QAAQ,eAAe,SAAS;AAEpG,YAAU,MAAM;AACZ,sBAAkB,cAAc;AAAA,EACpC,GAAG,CAAC,gBAAgB,iBAAiB,CAAC;AAGtC,QAAM,cAAc,CAAC,UAA+C;AAChE,iBAAa,IAAI;AACjB,uCAAU;AAAA,EACd;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,CAAC,CAAC;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO,iBAAiB;AAAA,MACvB,GAAG;AAAA,MAEJ,UAAA,oBAAC,cAAW,KAAA,CAAY;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"SMSFieldSubmit.js","sources":["../../../../src/components/SMSField/components/SMSFieldSubmit.tsx"],"sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { EButtonIconShape } from \"@sberbusiness/triplex-next/components/Button\";\nimport { ButtonIcon } from \"@sberbusiness/triplex-next/components/Button/ButtonIcon\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField\";\nimport { SMSFieldContext } from \"../SMSFieldContext\";\nimport { SubmitIcon } from \"./SubmitIcon\";\nimport styles from \"../styles/SMSField.module.less\";\n\n/** Свойства SMSField.Submit. */\nexport interface ISMSFieldSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\n/** Кнопка отправки кода. Недоступна при пустом коде или статусе DISABLED. Ref указывает на button. */\nexport const SMSFieldSubmit = React.forwardRef<HTMLButtonElement, ISMSFieldSubmitProps>(\n    ({ className, disabled, onClick, ...restProps }, ref) => {\n        const { code, onSubmitCode, setDisabledSubmit, size, sizeClassName, status } = useContext(SMSFieldContext);\n\n        const hasCode = code !== \"\";\n        const submitDisabled = status === EFormFieldStatus.DISABLED || disabled || !hasCode;\n        const submitClassName = clsx(styles.btnSubmit, { [styles.active]: hasCode }, sizeClassName, className);\n\n        useEffect(() => {\n            setDisabledSubmit(submitDisabled);\n        }, [submitDisabled, setDisabledSubmit]);\n\n        const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {\n            onSubmitCode(code);\n            onClick?.(event);\n        };\n\n        return (\n            <ButtonIcon\n                active={hasCode}\n                className={submitClassName}\n                disabled={submitDisabled}\n                onClick={handleClick}\n                ref={ref}\n                shape={EButtonIconShape.CIRCLE}\n                {...restProps}\n            >\n                <SubmitIcon size={size} />\n            </ButtonIcon>\n        );\n    },\n);\n\nSMSFieldSubmit.displayName = \"SMSFieldSubmit\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,iBAAiB,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,UAAU,SAAS,GAAG,UAAA,GAAa,QAAQ;AACrD,UAAM,EAAE,MAAM,cAAc,mBAAmB,MAAM,eAAe,OAAA,IAAW,WAAW,eAAe;AAEzG,UAAM,UAAU,SAAS;AACzB,UAAM,iBAAiB,WAAW,iBAAiB,YAAY,YAAY,CAAC;AAC5E,UAAM,kBAAkB,KAAK,OAAO,WAAW,EAAE,CAAC,OAAO,MAAM,GAAG,WAAW,eAAe,SAAS;AAErG,cAAU,MAAM;AACZ,wBAAkB,cAAc;AAAA,IACpC,GAAG,CAAC,gBAAgB,iBAAiB,CAAC;AAEtC,UAAM,cAA0D,CAAC,UAAU;AACvE,mBAAa,IAAI;AACjB,yCAAU;AAAA,IACd;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT;AAAA,QACA,OAAO,iBAAiB;AAAA,QACvB,GAAG;AAAA,QAEJ,UAAA,oBAAC,cAAW,KAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpC;AACJ;AAEA,eAAe,cAAc;"}

package/components/SMSField/components/SMSFieldTooltip.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useContext, useEffect } from "react";
-import { SMSFieldContext } from "../SMSFieldContext.js";
+import { useContext, useState, useEffect } from "react";
 import { ETooltipSize, ETooltipAlign } from "../../Tooltip/enums.js";
 import { Tooltip } from "../../Tooltip/Tooltip.js";
+import { SMSFieldContext } from "../SMSFieldContext.js";
 import { u as uniqueId } from "../../../chunks/vendor-Bf_-FiU6.js";
 const SMSFieldTooltip = ({
   children,
@@ -11,14 +11,12 @@ const SMSFieldTooltip = ({
   targetRef,
   ...restProps
 }) => {
-  const { tooltipId, setTooltipId } = useContext(SMSFieldContext);
+  const { setTooltipId } = useContext(SMSFieldContext);
+  const [generatedId] = useState(() => uniqueId());
+  const tooltipId = id ?? generatedId;
   useEffect(() => {
-    if (id === void 0) {
-      setTooltipId(uniqueId());
-    } else if (id !== tooltipId) {
-      setTooltipId(id);
-    }
-  }, [id]);
+    setTooltipId(tooltipId);
+  }, [tooltipId, setTooltipId]);
   return /* @__PURE__ */ jsxs(
     Tooltip,
     {

package/components/SMSField/components/SMSFieldTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSFieldTooltip.js","sources":["../../../../src/components/SMSField/components/SMSFieldTooltip.tsx"],"sourcesContent":["import { uniqueId } from \"lodash-es\";\nimport React, { useEffect, useContext } from \"react\";\nimport { SMSFieldContext } from \"@sberbusiness/triplex-next/components/SMSField/SMSFieldContext\";\nimport { ETooltipAlign, ETooltipSize } from \"@sberbusiness/triplex-next/components/Tooltip/enums\";\nimport { Tooltip } from \"@sberbusiness/triplex-next/components/Tooltip/Tooltip\";\nimport { ITooltipProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\nimport { TestProps } from \"@sberbusiness/triplex-next/types/CoreTypes\";\n\n/** Свойства SMSField.Tooltip. */\nexport interface ISMSFieldTooltipProps\n    extends Partial<Omit<ITooltipProps, \"children\" | \"targetRef\">>,\n        Pick<ITooltipProps, \"targetRef\">,\n        TestProps {\n    children: React.ReactElement;\n    /** Текст подсказки. */\n    message: string;\n}\n\nexport const SMSFieldTooltip: React.FC<ISMSFieldTooltipProps> = ({\n    children,\n    id,\n    message,\n    targetRef,\n    ...restProps\n}) => {\n    const { tooltipId, setTooltipId } = useContext(SMSFieldContext);\n\n    useEffect(() => {\n        if (id === undefined) {\n            setTooltipId(uniqueId());\n        } else if (id !== tooltipId) {\n            setTooltipId(id);\n        }\n    }, [id]);\n\n    return (\n        <Tooltip\n            alignTip={ETooltipAlign.START}\n            disableAdaptiveMode\n            id={tooltipId}\n            size={ETooltipSize.SM}\n            targetRef={targetRef}\n            toggleType=\"hover\"\n            {...restProps}\n        >\n            <Tooltip.Body>{message}</Tooltip.Body>\n            <Tooltip.Target>{children}</Tooltip.Target>\n        </Tooltip>\n    );\n};\n\nSMSFieldTooltip.displayName = \"SMSFieldTooltip\";\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,kBAAmD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,WAAW,iBAAiB,WAAW,eAAe;AAE9D,YAAU,MAAM;AACZ,QAAI,OAAO,QAAW;AAClB,mBAAa,UAAU;AAAA,IAC3B,WAAW,OAAO,WAAW;AACzB,mBAAa,EAAE;AAAA,IACnB;AAAA,EACJ,GAAG,CAAC,EAAE,CAAC;AAEP,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,UAAU,cAAc;AAAA,MACxB,qBAAmB;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,aAAa;AAAA,MACnB;AAAA,MACA,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAQ,MAAR,EAAc,UAAA,QAAA,CAAQ;AAAA,QACvB,oBAAC,QAAQ,QAAR,EAAgB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtC;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"SMSFieldTooltip.js","sources":["../../../../src/components/SMSField/components/SMSFieldTooltip.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport { ETooltipAlign, ETooltipSize } from \"@sberbusiness/triplex-next/components/Tooltip/enums\";\nimport { Tooltip } from \"@sberbusiness/triplex-next/components/Tooltip/Tooltip\";\nimport { ITooltipProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\nimport { TestProps } from \"@sberbusiness/triplex-next/types/CoreTypes\";\nimport { SMSFieldContext } from \"../SMSFieldContext\";\n\n/** Свойства SMSField.Tooltip. */\nexport interface ISMSFieldTooltipProps\n    extends Partial<Omit<ITooltipProps, \"children\" | \"targetRef\">>, Pick<ITooltipProps, \"targetRef\">, TestProps {\n    /** Целевой элемент подсказки, обычно SMSField.Refresh. */\n    children: React.ReactElement;\n    /** Текст подсказки. */\n    message: string;\n}\n\n/** Подсказка к кнопке SMSField.Refresh. Передаёт свой id в контекст SMSField для aria-describedby кнопки. */\nexport const SMSFieldTooltip: React.FC<ISMSFieldTooltipProps> = ({\n    children,\n    id,\n    message,\n    targetRef,\n    ...restProps\n}) => {\n    const { setTooltipId } = useContext(SMSFieldContext);\n    const [generatedId] = useState(() => uniqueId());\n    const tooltipId = id ?? generatedId;\n\n    useEffect(() => {\n        setTooltipId(tooltipId);\n    }, [tooltipId, setTooltipId]);\n\n    return (\n        <Tooltip\n            alignTip={ETooltipAlign.START}\n            disableAdaptiveMode\n            id={tooltipId}\n            size={ETooltipSize.SM}\n            targetRef={targetRef}\n            toggleType=\"hover\"\n            {...restProps}\n        >\n            <Tooltip.Body>{message}</Tooltip.Body>\n            <Tooltip.Target>{children}</Tooltip.Target>\n        </Tooltip>\n    );\n};\n\nSMSFieldTooltip.displayName = \"SMSFieldTooltip\";\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,kBAAmD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,aAAA,IAAiB,WAAW,eAAe;AACnD,QAAM,CAAC,WAAW,IAAI,SAAS,MAAM,UAAU;AAC/C,QAAM,YAAY,MAAM;AAExB,YAAU,MAAM;AACZ,iBAAa,SAAS;AAAA,EAC1B,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,UAAU,cAAc;AAAA,MACxB,qBAAmB;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,aAAa;AAAA,MACnB;AAAA,MACA,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAQ,MAAR,EAAc,UAAA,QAAA,CAAQ;AAAA,QACvB,oBAAC,QAAQ,QAAR,EAAgB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtC;AAEA,gBAAgB,cAAc;"}

package/components/SegmentedControl/SegmentedControl.js

@@ -5,14 +5,14 @@ import React from "react";
 import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
-const segmentedControl = "segmentedControl__7dcb8c9f";
-const general1 = "general1__af31a0df";
-const secondary1 = "secondary1__1d3c71cd";
-const general2 = "general2__30c65b03";
-const secondary2 = "secondary2__6664d0eb";
-const sm = "sm__297963ee";
-const md = "md__f56bbb40";
-const lg = "lg__ac21569d";
+const segmentedControl = "segmentedControl__853e5c2a";
+const general1 = "general1__33a5440e";
+const secondary1 = "secondary1__84a6413e";
+const general2 = "general2__d81ed794";
+const secondary2 = "secondary2__1800d1e3";
+const sm = "sm__9698ff24";
+const md = "md__30d4cbcd";
+const lg = "lg__47306b0b";
 const styles = {
   segmentedControl,
   general1,
@@ -67,7 +67,7 @@ const SegmentedControl = Object.assign(
             disabled: Boolean(disabled),
             onSegmentSelect: handleSegmentSelect
           },
-          children: /* @__PURE__ */ jsx("div", { className: classNames, ...rest, "data-tx": "0.50.0", ref, children })
+          children: /* @__PURE__ */ jsx("div", { className: classNames, ...rest, "data-tx": "0.52.0", ref, children })
         }
       );
     }

package/components/SegmentedControl/SegmentedControlSegment.js

@@ -6,9 +6,9 @@ import { IconWrapper } from "../IconWrapper/IconWrapper.js";
 import { ESegmentedControlType } from "./enums.js";
 import { SegmentedControlContext } from "./SegmentedControlContext.js";
 import { isSegmentSelected, getSegmentTitle } from "./utils.js";
-const segmentedControlSegment = "segmentedControlSegment__d18f80e9";
-const selected = "selected__1f6e1ea4";
-const content = "content__026c33e1";
+const segmentedControlSegment = "segmentedControlSegment__64344f1f";
+const selected = "selected__c07392a8";
+const content = "content__485b31e5";
 const styles = {
   segmentedControlSegment,
   selected,

package/components/SelectExtendedField/SelectExtendedField.js

@@ -6,7 +6,7 @@ import { KeyDownListener } from "../KeyDownListener/KeyDownListener.js";
 import "../KeyDownListener/ComposedKeyDownListener.js";
 import { SelectExtendedFieldTarget } from "./components/SelectExtendedFieldTarget.js";
 import { SelectExtendedFieldDropdown } from "./components/SelectExtendedFieldDropdown.js";
-const selectExtendedField = "selectExtendedField__bb1dafdd";
+const selectExtendedField = "selectExtendedField__c07e27b3";
 const styles = {
   selectExtendedField
 };

package/components/SelectExtendedField/components/SelectExtendedFieldDropdown.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-DnBotWoU.js";
+import "../../../chunks/DropdownListItem-B220hwlD.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";

package/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js

@@ -3,7 +3,7 @@ import { SelectExtendedField } from "../SelectExtendedField.js";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-DnBotWoU.js";
+import "../../../chunks/DropdownListItem-B220hwlD.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../Dropdown/mobile/DropdownMobileBody.js";
 import { DropdownMobileClose } from "../../Dropdown/mobile/DropdownMobileClose.js";