@sberbusiness/triplex-next 1.33.0 → 1.35.0

package/components/SMSField/components/RefreshIcon.js

@@ -1,35 +1,54 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import { c as P } from "../../../chunks/vendor-D5cfSbgz.js";
-import { s as o } from "../../../chunks/SMSField.module-BjG_FEkT.js";
-import { EComponentSize as u } from "../../../enums/EComponentSize.js";
-const r = "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", d = "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", v = Math.PI / 180, e = Math.PI * 2, M = (c) => (c = c % 360, c = c < 0 ? 360 + c : c, c * v), n = M(-8), h = M(-19), m = h < n ? e - (n - h) : h - n, p = (c, t) => Math.round(c * Math.cos(t) * 1e3) / 1e3, f = (c, t) => Math.round(c * Math.sin(t) * 1e3) / 1e3, w = (c, t, a, l) => "M" + c + " " + t + // Смещаем перо в центр окружности.
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { s as styles } from "../../../chunks/SMSField.module-DZA3Nplj.js";
+import { EComponentSize } from "../../../enums/EComponentSize.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;
+const radiansInCircle = Math.PI * 2;
+const deg2rad = (deg) => {
+  deg = deg % 360;
+  deg = deg < 0 ? 360 + deg : deg;
+  return deg * radInOneDeg;
+};
+const startAnge = deg2rad(-8);
+const endAngle = deg2rad(-19);
+const diff = endAngle < startAnge ? radiansInCircle - (startAnge - endAngle) : endAngle - startAnge;
+const ra2X = (r, a) => Math.round(r * Math.cos(a) * 1e3) / 1e3;
+const ra2Y = (r, a) => Math.round(r * Math.sin(a) * 1e3) / 1e3;
+const calculateSectorPath = (centerX, centerY, radius, percent) => "M" + centerX + " " + centerY + // Смещаем перо в центр окружности.
 "L" + // Рисуем горизонтальную линию вправо в начало сектора.
-(c + p(a, n)) + // Координата X начала дуги.
-" " + (t + f(a, n)) + // Координата Y начала дуги.
+(centerX + ra2X(radius, startAnge)) + // Координата X начала дуги.
+" " + (centerY + ra2Y(radius, startAnge)) + // Координата Y начала дуги.
 "A" + // Рисуем дугу.
-a + // Радиус окружности дуги по оси X.
-" " + a + // Радиус окружности дуги по оси Y.
+radius + // Радиус окружности дуги по оси X.
+" " + radius + // Радиус окружности дуги по оси Y.
 " 0 " + // Смещение центра по оси X.
-(l > 0.5 ? "1" : "0") + // Флаг отрисовки длинной дуги (если 0 то короткой).
+(percent > 0.5 ? "1" : "0") + // Флаг отрисовки длинной дуги (если 0 то короткой).
 " 1 " + // Рисовать по часовой стрелке.
-(c + p(a, (n + l * m) % e)) + // Координата X конца дуги.
-" " + (t + f(a, (n + l * m) % e)) + // Координата Y конца дуги.
-"Z", C = (c) => {
-  const t = Math.round(Math.min(c.percent, 0.999) * 1e3) / 1e3, a = P({
-    [o.disabled]: c.disabled,
-    [o.empty]: !c.disabled
+(centerX + ra2X(radius, (startAnge + percent * diff) % radiansInCircle)) + // Координата X конца дуги.
+" " + (centerY + ra2Y(radius, (startAnge + percent * diff) % radiansInCircle)) + // Координата Y конца дуги.
+"Z";
+const RefreshIcon = (props) => {
+  const percent = Math.round(Math.min(props.percent, 0.999) * 1e3) / 1e3;
+  const classNames = clsx({
+    [styles.disabled]: props.disabled,
+    [styles.empty]: !props.disabled
   });
-  return c.size === u.LG ? /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", focusable: "false", children: [
-    /* @__PURE__ */ s("clipPath", { id: `clipFrontLG${t}`, children: /* @__PURE__ */ s("path", { d: w(16, 16, 18, t) }) }),
-    /* @__PURE__ */ s("path", { className: a, d }),
-    /* @__PURE__ */ s("path", { className: o.full, d, clipPath: `url(#clipFrontLG${t})` })
-  ] }) : /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", focusable: "false", children: [
-    /* @__PURE__ */ s("clipPath", { id: `clipFront${t}`, children: /* @__PURE__ */ s("path", { d: w(10, 10, 14, t) }) }),
-    /* @__PURE__ */ s("path", { className: a, d: r }),
-    /* @__PURE__ */ s("path", { className: o.full, d: r, clipPath: `url(#clipFront${t})` })
+  if (props.size === EComponentSize.LG) {
+    return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", focusable: "false", children: [
+      /* @__PURE__ */ jsx("clipPath", { id: `clipFrontLG${percent}`, children: /* @__PURE__ */ jsx("path", { d: calculateSectorPath(16, 16, 18, percent) }) }),
+      /* @__PURE__ */ jsx("path", { className: classNames, d: bigIconPath }),
+      /* @__PURE__ */ jsx("path", { className: styles.full, d: bigIconPath, clipPath: `url(#clipFrontLG${percent})` })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", focusable: "false", children: [
+    /* @__PURE__ */ jsx("clipPath", { id: `clipFront${percent}`, children: /* @__PURE__ */ jsx("path", { d: calculateSectorPath(10, 10, 14, percent) }) }),
+    /* @__PURE__ */ jsx("path", { className: classNames, d: iconPath }),
+    /* @__PURE__ */ jsx("path", { className: styles.full, d: iconPath, clipPath: `url(#clipFront${percent})` })
   ] });
 };
 export {
-  C as RefreshIcon
+  RefreshIcon
 };
 //# sourceMappingURL=RefreshIcon.js.map

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

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

package/components/SMSField/components/SMSFieldInput.js

@@ -1,63 +1,81 @@
-import { jsxs as n, jsx as m } from "react/jsx-runtime";
-import { c as _ } from "../../../chunks/vendor-D5cfSbgz.js";
-import g, { useContext as v } from "react";
-import { EFormFieldStatus as l } from "../../FormField/enums.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import React__default, { useContext } from "react";
+import { EFormFieldStatus } from "../../FormField/enums.js";
 import "../../FormField/components/FormFieldClear.js";
-import { FormFieldCounter as M } from "../../FormField/components/FormFieldCounter.js";
-import { FormFieldDescription as T } from "../../FormField/components/FormFieldDescription.js";
-import { F as j } from "../../../chunks/FormFieldInput-CxAdhoLS.js";
+import { FormFieldCounter } from "../../FormField/components/FormFieldCounter.js";
+import { FormFieldDescription } from "../../FormField/components/FormFieldDescription.js";
+import { F as FormFieldInput } from "../../../chunks/FormFieldInput-oyG8nnC2.js";
 import "../../FormField/components/FormFieldLabel.js";
 import "../../FormField/components/FormFieldMaskedInput.js";
 import "../../FormField/components/FormFieldPostfix.js";
 import "../../FormField/components/FormFieldPrefix.js";
 import "../../FormField/components/FormFieldTarget.js";
 import "../../FormField/components/FormFieldTextarea.js";
-import { FormField as y } from "../../FormField/FormField.js";
-import { FormGroup as z } from "../../FormGroup/FormGroup.js";
-import { SMSFieldContext as A } from "../SMSFieldContext.js";
-import { s as L } from "../../../chunks/SMSField.module-BjG_FEkT.js";
-import { EVENT_KEY_CODES as O } from "../../../utils/keyboard.js";
-const k = new RegExp(/^[0-9]*$/), w = g.forwardRef(
-  ({ className: f, counter: r, description: s, disabled: u, maxLength: c = 8, onChange: o, onKeyDown: e, placeholder: F, ...E }, S) => {
+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-DZA3Nplj.js";
+import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
+const regExp = new RegExp(/^[0-9]*$/);
+const SMSFieldInput = React__default.forwardRef(
+  ({ className, counter, description, disabled, maxLength = 8, onChange, onKeyDown, placeholder, ...restProps }, ref) => {
     const {
-      code: a,
-      disabled: C,
-      disabledSubmit: h,
-      error: x,
-      onChangeCode: N,
-      onSubmitCode: R,
-      size: b,
-      sizeClassName: p
-    } = v(A), D = C || u, I = _(L.input, p, f);
-    let i = l.DEFAULT;
-    return D && (i = l.DISABLED), x && (i = l.ERROR), /* @__PURE__ */ n(z, { children: [
-      /* @__PURE__ */ m(y, { className: p, onKeyDown: (t) => {
-        t.keyCode === O.ENTER && !h && R(a), e == null || e(t);
-      }, size: b, status: i, children: /* @__PURE__ */ m(
-        j,
+      code,
+      disabled: allDisabled,
+      disabledSubmit,
+      error,
+      onChangeCode,
+      onSubmitCode,
+      size,
+      sizeClassName
+    } = useContext(SMSFieldContext);
+    const inputDisabled = allDisabled || disabled;
+    const inputClassName = clsx(styles.input, sizeClassName, className);
+    let status = EFormFieldStatus.DEFAULT;
+    if (inputDisabled) {
+      status = EFormFieldStatus.DISABLED;
+    }
+    if (error) {
+      status = EFormFieldStatus.ERROR;
+    }
+    const handleChange = (e) => {
+      const value = e.target.value;
+      if (!regExp.test(value)) {
+        return;
+      }
+      onChangeCode(value);
+      onChange == null ? void 0 : onChange(e);
+    };
+    const handleKeyDown = (e) => {
+      if (e.keyCode === EVENT_KEY_CODES.ENTER && !disabledSubmit) {
+        onSubmitCode(code);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(e);
+    };
+    return /* @__PURE__ */ jsxs(FormGroup, { children: [
+      /* @__PURE__ */ jsx(FormField, { className: sizeClassName, onKeyDown: handleKeyDown, size, status, children: /* @__PURE__ */ jsx(
+        FormFieldInput,
         {
           autoComplete: "off",
-          className: I,
-          maxLength: c,
-          onChange: (t) => {
-            const d = t.target.value;
-            k.test(d) && (N(d), o == null || o(t));
-          },
-          placeholder: F,
-          ref: S,
-          value: a,
-          ...E
+          className: inputClassName,
+          maxLength,
+          onChange: handleChange,
+          placeholder,
+          ref,
+          value: code,
+          ...restProps
         }
       ) }),
-      s || r ? /* @__PURE__ */ n(T, { children: [
-        s,
-        r ? /* @__PURE__ */ m(M, { children: r }) : null
+      description || counter ? /* @__PURE__ */ jsxs(FormFieldDescription, { children: [
+        description,
+        counter ? /* @__PURE__ */ jsx(FormFieldCounter, { children: counter }) : null
       ] }) : null
     ] });
   }
 );
-w.displayName = "SMSFieldInput";
+SMSFieldInput.displayName = "SMSFieldInput";
 export {
-  w as SMSFieldInput
+  SMSFieldInput
 };
 //# sourceMappingURL=SMSFieldInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SMSFieldInput.js","sources":["../../../../src/components/SMSField/components/SMSFieldInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } 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 React.InputHTMLAttributes<HTMLInputElement> {\n    /** Счётчик символов */\n    counter?: React.ReactNode;\n    /** Описание поля ввода */\n    description?: React.ReactNode;\n}\n\nconst regExp = new RegExp(/^[0-9]*$/);\n\nexport const SMSFieldInput = React.forwardRef<HTMLInputElement, ISMSFieldInputProps>(\n    (\n        { className, counter, description, disabled, maxLength = 8, onChange, onKeyDown, placeholder, ...restProps },\n        ref,\n    ) => {\n        const {\n            code,\n            disabled: allDisabled,\n            disabledSubmit,\n            error,\n            onChangeCode,\n            onSubmitCode,\n            size,\n            sizeClassName,\n        } = useContext(SMSFieldContext);\n\n        const inputDisabled = allDisabled || disabled;\n        const inputClassName = clsx(styles.input, sizeClassName, className);\n\n        let status = EFormFieldStatus.DEFAULT;\n\n        if (inputDisabled) {\n            status = EFormFieldStatus.DISABLED;\n        }\n\n        if (error) {\n            status = EFormFieldStatus.ERROR;\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        /** Обработчик нажатия клавиши 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                        onChange={handleChange}\n                        placeholder={placeholder}\n                        ref={ref}\n                        value={code}\n                        {...restProps}\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":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,SAAS,IAAI,OAAO,UAAU;AAE7B,MAAM,gBAAgBA,eAAM;AAAA,EAC/B,CACI,EAAE,WAAW,SAAS,aAAa,UAAU,YAAY,GAAG,UAAU,WAAW,aAAa,GAAG,UAAA,GACjG,QACC;AACD,UAAM;AAAA,MACF;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACA,WAAW,eAAe;AAE9B,UAAM,gBAAgB,eAAe;AACrC,UAAM,iBAAiB,KAAK,OAAO,OAAO,eAAe,SAAS;AAElE,QAAI,SAAS,iBAAiB;AAE9B,QAAI,eAAe;AACf,eAAS,iBAAiB;AAAA,IAC9B;AAEA,QAAI,OAAO;AACP,eAAS,iBAAiB;AAAA,IAC9B;AAGA,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,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,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACN,GAAG;AAAA,QAAA;AAAA,MAAA,GAEZ;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,39 +1,51 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as I } from "../../../chunks/vendor-D5cfSbgz.js";
-import { forwardRef as M, useContext as N, useMemo as y } from "react";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { forwardRef, useContext, useMemo } from "react";
 import "../../Button/Button.js";
 import "../../Button/ButtonBase.js";
-import { ButtonIcon as B } from "../../Button/ButtonIcon.js";
+import { ButtonIcon } from "../../Button/ButtonIcon.js";
 import "../../Button/ButtonDropdown.js";
 import "../../Button/ButtonDropdownExtended.js";
-import { EButtonIconShape as F } from "../../Button/enums.js";
-import { SMSFieldContext as u } from "../SMSFieldContext.js";
-import { RefreshIcon as z } from "./RefreshIcon.js";
-import { s as m } from "../../../chunks/SMSField.module-BjG_FEkT.js";
-const D = M(
-  ({ className: l, disabled: r, countdownTime: e, countdownTimeLeft: s, onClick: t, onRefresh: p, ...f }, n) => {
-    const { disabled: o, error: c, size: h, sizeClassName: d, tooltipId: S } = N(u), b = s > 0, a = o && !c || r || b, R = I(m.btnRefresh, d, l, {
-      [m.disabled]: a
-    }), x = y(() => s >= e || o || r ? 0 : (e - s) / e, [e, s, o, r]);
-    return /* @__PURE__ */ i(
-      B,
+import { EButtonIconShape } from "../../Button/enums.js";
+import { SMSFieldContext } from "../SMSFieldContext.js";
+import { RefreshIcon } from "./RefreshIcon.js";
+import { s as styles } from "../../../chunks/SMSField.module-DZA3Nplj.js";
+const SMSFieldRefresh = forwardRef(
+  ({ className, disabled, countdownTime, countdownTimeLeft, onClick, onRefresh, ...restProps }, ref) => {
+    const { disabled: allDisabled, error, size, sizeClassName, tooltipId } = useContext(SMSFieldContext);
+    const isSmsCountdownTicking = countdownTimeLeft > 0;
+    const refreshDisabled = allDisabled && !error || disabled || isSmsCountdownTicking;
+    const refreshClassName = clsx(styles.btnRefresh, sizeClassName, className, {
+      [styles.disabled]: refreshDisabled
+    });
+    const percent = useMemo(() => {
+      if (countdownTimeLeft >= countdownTime || allDisabled || disabled) {
+        return 0;
+      } else {
+        return (countdownTime - countdownTimeLeft) / countdownTime;
+      }
+    }, [countdownTime, countdownTimeLeft, allDisabled, disabled]);
+    const handleClick = (event) => {
+      onRefresh();
+      onClick == null ? void 0 : onClick(event);
+    };
+    return /* @__PURE__ */ jsx(
+      ButtonIcon,
       {
-        "aria-describedby": S,
-        className: R,
-        disabled: a,
-        onClick: (C) => {
-          p(), t == null || t(C);
-        },
-        ref: n,
-        shape: F.SQUIRCLE,
-        ...f,
-        children: /* @__PURE__ */ i(z, { percent: x || 0, size: h, disabled: !!(o || r) })
+        "aria-describedby": tooltipId,
+        className: refreshClassName,
+        disabled: refreshDisabled,
+        onClick: handleClick,
+        ref,
+        shape: EButtonIconShape.SQUIRCLE,
+        ...restProps,
+        children: /* @__PURE__ */ jsx(RefreshIcon, { percent: percent || 0, size, disabled: Boolean(allDisabled || disabled) })
       }
     );
   }
 );
-D.displayName = "SMSFieldRefresh";
+SMSFieldRefresh.displayName = "SMSFieldRefresh";
 export {
-  D as SMSFieldRefresh
+  SMSFieldRefresh
 };
 //# sourceMappingURL=SMSFieldRefresh.js.map

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

@@ -0,0 +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 { 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, disabled, countdownTime, countdownTimeLeft, onClick, onRefresh, ...restProps }, ref) => {\n        const { disabled: allDisabled, error, size, sizeClassName, tooltipId } = useContext(SMSFieldContext);\n\n        const isSmsCountdownTicking = countdownTimeLeft > 0;\n        const refreshDisabled = (allDisabled && !error) || 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 || allDisabled || disabled) {\n                return 0;\n            } else {\n                return (countdownTime - countdownTimeLeft) / countdownTime;\n            }\n        }, [countdownTime, countdownTimeLeft, allDisabled, disabled]);\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(allDisabled || disabled)} />\n            </ButtonIcon>\n        );\n    },\n);\n\nSMSFieldRefresh.displayName = \"SMSFieldRefresh\";\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBO,MAAM,kBAAkB;AAAA,EAC3B,CAAC,EAAE,WAAW,UAAU,eAAe,mBAAmB,SAAS,WAAW,GAAG,UAAA,GAAa,QAAQ;AAClG,UAAM,EAAE,UAAU,aAAa,OAAO,MAAM,eAAe,UAAA,IAAc,WAAW,eAAe;AAEnG,UAAM,wBAAwB,oBAAoB;AAClD,UAAM,kBAAmB,eAAe,CAAC,SAAU,YAAY;AAC/D,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,eAAe,UAAU;AAC/D,eAAO;AAAA,MACX,OAAO;AACH,gBAAQ,gBAAgB,qBAAqB;AAAA,MACjD;AAAA,IACJ,GAAG,CAAC,eAAe,mBAAmB,aAAa,QAAQ,CAAC;AAG5D,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,eAAe,QAAQ,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxG;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/SMSField/components/SMSFieldSubmit.js

@@ -1,43 +1,48 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as S } from "../../../chunks/vendor-D5cfSbgz.js";
-import { useContext as f, useEffect as C } from "react";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { useContext, useEffect } from "react";
 import "../../Button/Button.js";
 import "../../Button/ButtonBase.js";
-import { ButtonIcon as h } from "../../Button/ButtonIcon.js";
+import { ButtonIcon } from "../../Button/ButtonIcon.js";
 import "../../Button/ButtonDropdown.js";
 import "../../Button/ButtonDropdownExtended.js";
-import { EButtonIconShape as x } from "../../Button/enums.js";
-import { SMSFieldContext as I } from "../SMSFieldContext.js";
-import { SubmitIcon as N } from "./SubmitIcon.js";
-import { s } from "../../../chunks/SMSField.module-BjG_FEkT.js";
-const D = ({ className: r, disabled: a, onClick: i, ...l }) => {
+import { EButtonIconShape } from "../../Button/enums.js";
+import { SMSFieldContext } from "../SMSFieldContext.js";
+import { SubmitIcon } from "./SubmitIcon.js";
+import { s as styles } from "../../../chunks/SMSField.module-DZA3Nplj.js";
+const SMSFieldSubmit = ({ className, disabled, onClick, ...restProps }) => {
   const {
-    code: t,
-    disabled: d,
-    onSubmitCode: p,
-    setDisabledSubmit: e,
-    size: c,
-    sizeClassName: n
-  } = f(I), o = d || a || t === "", b = S(s.btnSubmit, { [s.active]: !!t }, n, r);
-  return C(() => {
-    e(o);
-  }, [o, e]), /* @__PURE__ */ m(
-    h,
+    code,
+    disabled: allDisabled,
+    onSubmitCode,
+    setDisabledSubmit,
+    size,
+    sizeClassName
+  } = useContext(SMSFieldContext);
+  const submitDisabled = allDisabled || 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: !!t,
-      className: b,
-      disabled: o,
-      onClick: (u) => {
-        p(t), i == null || i(u);
-      },
-      shape: x.CIRCLE,
-      ...l,
-      children: /* @__PURE__ */ m(N, { size: c })
+      active: !!code,
+      className: submitClassName,
+      disabled: submitDisabled,
+      onClick: handleClick,
+      shape: EButtonIconShape.CIRCLE,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(SubmitIcon, { size })
     }
   );
 };
-D.displayName = "SMSFieldSubmit";
+SMSFieldSubmit.displayName = "SMSFieldSubmit";
 export {
-  D as SMSFieldSubmit
+  SMSFieldSubmit
 };
 //# sourceMappingURL=SMSFieldSubmit.js.map

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

@@ -0,0 +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 { 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 {\n        code,\n        disabled: allDisabled,\n        onSubmitCode,\n        setDisabledSubmit,\n        size,\n        sizeClassName,\n    } = useContext(SMSFieldContext);\n\n    const submitDisabled = allDisabled || 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":";;;;;;;;;;;;AAWO,MAAM,iBAAiD,CAAC,EAAE,WAAW,UAAU,SAAS,GAAG,gBAAgB;AAC9G,QAAM;AAAA,IACF;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACA,WAAW,eAAe;AAE9B,QAAM,iBAAiB,eAAe,YAAY,SAAS;AAC3D,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;"}

package/components/SMSField/components/SMSFieldTooltip.js

@@ -1,38 +1,43 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { useContext as T, useEffect as f } from "react";
-import { SMSFieldContext as n } from "../SMSFieldContext.js";
-import { ETooltipSize as S, ETooltipAlign as a } from "../../Tooltip/enums.js";
-import { Tooltip as i } from "../../Tooltip/Tooltip.js";
-import { u } from "../../../chunks/vendor-D5cfSbgz.js";
-const c = ({
-  children: l,
-  id: o,
-  message: p,
-  targetRef: m,
-  ...s
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from "react";
+import { SMSFieldContext } from "../SMSFieldContext.js";
+import { ETooltipSize, ETooltipAlign } from "../../Tooltip/enums.js";
+import { Tooltip } from "../../Tooltip/Tooltip.js";
+import { u as uniqueId } from "../../../chunks/vendor-Bco_z_Yi.js";
+const SMSFieldTooltip = ({
+  children,
+  id,
+  message,
+  targetRef,
+  ...restProps
 }) => {
-  const { tooltipId: t, setTooltipId: e } = T(n);
-  return f(() => {
-    o === void 0 ? e(u()) : o !== t && e(o);
-  }, [o]), /* @__PURE__ */ d(
-    i,
+  const { tooltipId, setTooltipId } = useContext(SMSFieldContext);
+  useEffect(() => {
+    if (id === void 0) {
+      setTooltipId(uniqueId());
+    } else if (id !== tooltipId) {
+      setTooltipId(id);
+    }
+  }, [id]);
+  return /* @__PURE__ */ jsxs(
+    Tooltip,
     {
-      alignTip: a.START,
-      disableAdaptiveMode: !0,
-      id: t,
-      size: S.SM,
-      targetRef: m,
+      alignTip: ETooltipAlign.START,
+      disableAdaptiveMode: true,
+      id: tooltipId,
+      size: ETooltipSize.SM,
+      targetRef,
       toggleType: "hover",
-      ...s,
+      ...restProps,
       children: [
-        /* @__PURE__ */ r(i.Body, { children: p }),
-        /* @__PURE__ */ r(i.Target, { children: l })
+        /* @__PURE__ */ jsx(Tooltip.Body, { children: message }),
+        /* @__PURE__ */ jsx(Tooltip.Target, { children })
       ]
     }
   );
 };
-c.displayName = "SMSFieldTooltip";
+SMSFieldTooltip.displayName = "SMSFieldTooltip";
 export {
-  c as SMSFieldTooltip
+  SMSFieldTooltip
 };
 //# sourceMappingURL=SMSFieldTooltip.js.map

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

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

package/components/SMSField/components/SubmitIcon.js

@@ -1,19 +1,24 @@
-import { jsx as C } from "react/jsx-runtime";
-import { EComponentSize as i } from "../../../enums/EComponentSize.js";
-const o = ({ size: e }) => e === i.LG ? /* @__PURE__ */ C("svg", { width: "26", height: "26", viewBox: "0 0 26 26", children: /* @__PURE__ */ C(
-  "path",
-  {
-    d: "M13 0C5.82 0 0 5.82 0 13C0 20.17 5.82 26 13 26C20.17 26 26 20.17 26 13C26 5.82 20.17 0 13 0ZM14.7 6.29L20.7 12.29C20.9 12.48 21 12.72 21 13C21 13.27 20.9 13.51 20.7 13.7L14.7 19.7C14.31 20.1 13.68 20.1 13.29 19.7C12.89 19.31 12.89 18.68 13.29 18.29L17.58 14L6 14C5.43 14 5 13.56 5 13C5 12.44 5.43 12 6 12L17.58 12L13.29 7.7C12.89 7.31 12.89 6.68 13.29 6.29C13.68 5.89 14.31 5.89 14.7 6.29Z",
-    fillRule: "evenodd"
+import { jsx } from "react/jsx-runtime";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
+const SubmitIcon = ({ size }) => {
+  if (size === EComponentSize.LG) {
+    return /* @__PURE__ */ jsx("svg", { width: "26", height: "26", viewBox: "0 0 26 26", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M13 0C5.82 0 0 5.82 0 13C0 20.17 5.82 26 13 26C20.17 26 26 20.17 26 13C26 5.82 20.17 0 13 0ZM14.7 6.29L20.7 12.29C20.9 12.48 21 12.72 21 13C21 13.27 20.9 13.51 20.7 13.7L14.7 19.7C14.31 20.1 13.68 20.1 13.29 19.7C12.89 19.31 12.89 18.68 13.29 18.29L17.58 14L6 14C5.43 14 5 13.56 5 13C5 12.44 5.43 12 6 12L17.58 12L13.29 7.7C12.89 7.31 12.89 6.68 13.29 6.29C13.68 5.89 14.31 5.89 14.7 6.29Z",
+        fillRule: "evenodd"
+      }
+    ) });
   }
-) }) : /* @__PURE__ */ C("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ C(
-  "path",
-  {
-    d: "M10 0C4.47 0 0 4.47 0 10C0 15.52 4.47 20 10 20C15.52 20 20 15.52 20 10C20 4.47 15.52 0 10 0ZM15.71 9.28L15.8 9.38 15.87 9.49 15.91 9.61C16.02 9.86 16.02 10.13 15.91 10.37C15.87 10.5 15.8 10.61 15.71 10.7L10.71 15.7C10.52 15.89 10.26 16 10 16C9.73 16 9.47 15.89 9.29 15.7C9.1 15.51 8.99 15.26 8.99 14.99C8.99 14.72 9.1 14.47 9.29 14.28L12.59 10.99L5 10.99C4.44 10.99 4 10.55 4 9.99C4 9.44 4.44 9 5 9L12.59 9L9.29 5.71C9.03 5.45 8.93 5.08 9.03 4.74C9.12 4.39 9.39 4.12 9.74 4.03C10.08 3.94 10.45 4.04 10.71 4.29L15.71 9.28Z",
-    fillRule: "evenodd"
-  }
-) });
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M10 0C4.47 0 0 4.47 0 10C0 15.52 4.47 20 10 20C15.52 20 20 15.52 20 10C20 4.47 15.52 0 10 0ZM15.71 9.28L15.8 9.38 15.87 9.49 15.91 9.61C16.02 9.86 16.02 10.13 15.91 10.37C15.87 10.5 15.8 10.61 15.71 10.7L10.71 15.7C10.52 15.89 10.26 16 10 16C9.73 16 9.47 15.89 9.29 15.7C9.1 15.51 8.99 15.26 8.99 14.99C8.99 14.72 9.1 14.47 9.29 14.28L12.59 10.99L5 10.99C4.44 10.99 4 10.55 4 9.99C4 9.44 4.44 9 5 9L12.59 9L9.29 5.71C9.03 5.45 8.93 5.08 9.03 4.74C9.12 4.39 9.39 4.12 9.74 4.03C10.08 3.94 10.45 4.04 10.71 4.29L15.71 9.28Z",
+      fillRule: "evenodd"
+    }
+  ) });
+};
 export {
-  o as SubmitIcon
+  SubmitIcon
 };
 //# sourceMappingURL=SubmitIcon.js.map

package/components/SMSField/components/SubmitIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitIcon.js","sources":["../../../../src/components/SMSField/components/SubmitIcon.tsx"],"sourcesContent":["import { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\n\n/** Внешние свойства компонента. */\ninterface IProps {\n    /** Размер иконки */\n    size: EComponentSize;\n}\n\nexport const SubmitIcon: React.FC<IProps> = ({ size }: IProps) => {\n    if (size === EComponentSize.LG) {\n        return (\n            <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\">\n                <path\n                    d=\"M13 0C5.82 0 0 5.82 0 13C0 20.17 5.82 26 13 26C20.17 26 26 20.17 26 13C26 5.82 20.17 0 13 0ZM14.7 6.29L20.7 12.29C20.9 12.48 21 12.72 21 13C21 13.27 20.9 13.51 20.7 13.7L14.7 19.7C14.31 20.1 13.68 20.1 13.29 19.7C12.89 19.31 12.89 18.68 13.29 18.29L17.58 14L6 14C5.43 14 5 13.56 5 13C5 12.44 5.43 12 6 12L17.58 12L13.29 7.7C12.89 7.31 12.89 6.68 13.29 6.29C13.68 5.89 14.31 5.89 14.7 6.29Z\"\n                    fillRule=\"evenodd\"\n                />\n            </svg>\n        );\n    }\n\n    return (\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n            <path\n                d=\"M10 0C4.47 0 0 4.47 0 10C0 15.52 4.47 20 10 20C15.52 20 20 15.52 20 10C20 4.47 15.52 0 10 0ZM15.71 9.28L15.8 9.38 15.87 9.49 15.91 9.61C16.02 9.86 16.02 10.13 15.91 10.37C15.87 10.5 15.8 10.61 15.71 10.7L10.71 15.7C10.52 15.89 10.26 16 10 16C9.73 16 9.47 15.89 9.29 15.7C9.1 15.51 8.99 15.26 8.99 14.99C8.99 14.72 9.1 14.47 9.29 14.28L12.59 10.99L5 10.99C4.44 10.99 4 10.55 4 9.99C4 9.44 4.44 9 5 9L12.59 9L9.29 5.71C9.03 5.45 8.93 5.08 9.03 4.74C9.12 4.39 9.39 4.12 9.74 4.03C10.08 3.94 10.45 4.04 10.71 4.29L15.71 9.28Z\"\n                fillRule=\"evenodd\"\n            />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;AAQO,MAAM,aAA+B,CAAC,EAAE,WAAmB;AAC9D,MAAI,SAAS,eAAe,IAAI;AAC5B,+BACK,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAChC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,UAAS;AAAA,MAAA;AAAA,IAAA,GAEjB;AAAA,EAER;AAEA,6BACK,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAChC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEjB;AAER;"}

package/components/SMSField/index.js

@@ -1,13 +1,13 @@
-import { SMSField as r } from "./SMSField.js";
-import { SMSFieldInput as t } from "./components/SMSFieldInput.js";
-import { SMSFieldTooltip as p } from "./components/SMSFieldTooltip.js";
-import { SMSFieldSubmit as l } from "./components/SMSFieldSubmit.js";
-import { SMSFieldRefresh as d } from "./components/SMSFieldRefresh.js";
+import { SMSField } from "./SMSField.js";
+import { SMSFieldInput } from "./components/SMSFieldInput.js";
+import { SMSFieldTooltip } from "./components/SMSFieldTooltip.js";
+import { SMSFieldSubmit } from "./components/SMSFieldSubmit.js";
+import { SMSFieldRefresh } from "./components/SMSFieldRefresh.js";
 export {
-  r as SMSField,
-  t as SMSFieldInput,
-  d as SMSFieldRefresh,
-  l as SMSFieldSubmit,
-  p as SMSFieldTooltip
+  SMSField,
+  SMSFieldInput,
+  SMSFieldRefresh,
+  SMSFieldSubmit,
+  SMSFieldTooltip
 };
 //# sourceMappingURL=index.js.map

package/components/SMSField/index.js.map

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

package/components/SMSField/types.js.map

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