@sberbusiness/triplex-next 0.39.0 → 0.41.0

package/components/FocusTrapExtended/FocusTrapExtended.js

@@ -1,31 +1,43 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
-import { F as FocusTrap } from "../../chunks/vendor-DKrjZZwJ.js";
-const FocusTrapExtended = ({ focusTrapOptions, ...restProps }) => {
+import { useState, useRef } from "react";
+import { F as FocusTrap } from "../../chunks/vendor-BtZO8a0z.js";
+const FocusTrapExtended = ({
+  paused: externalPaused,
+  focusTrapOptions,
+  ...restProps
+}) => {
+  const [paused, setPaused] = useState(false);
   const outsideClickRef = useRef(false);
   return /* @__PURE__ */ jsx(
     FocusTrap,
     {
       ...restProps,
+      paused: externalPaused ?? paused,
       focusTrapOptions: {
         ...focusTrapOptions,
+        onActivate: () => {
+          var _a;
+          outsideClickRef.current = false;
+          setPaused(false);
+          (_a = focusTrapOptions == null ? void 0 : focusTrapOptions.onActivate) == null ? void 0 : _a.call(focusTrapOptions);
+        },
         clickOutsideDeactivates: (event) => {
-          if (typeof (focusTrapOptions == null ? void 0 : focusTrapOptions.clickOutsideDeactivates) === "function") {
-            const deactivates = focusTrapOptions.clickOutsideDeactivates(event);
+          if ((focusTrapOptions == null ? void 0 : focusTrapOptions.clickOutsideDeactivates) !== void 0) {
+            const deactivates = typeof focusTrapOptions.clickOutsideDeactivates === "function" ? focusTrapOptions.clickOutsideDeactivates(event) : focusTrapOptions.clickOutsideDeactivates;
             if (deactivates) {
               outsideClickRef.current = true;
             }
             return deactivates;
           }
           outsideClickRef.current = true;
-          return true;
+          setPaused(true);
+          return false;
         },
         setReturnFocus: (node) => {
           const outsideClick = outsideClickRef.current;
           outsideClickRef.current = false;
-          if (typeof (focusTrapOptions == null ? void 0 : focusTrapOptions.setReturnFocus) === "function") {
-            const userResult = focusTrapOptions.setReturnFocus(node);
-            return outsideClick && userResult === node ? false : userResult;
+          if ((focusTrapOptions == null ? void 0 : focusTrapOptions.setReturnFocus) !== void 0) {
+            return typeof focusTrapOptions.setReturnFocus === "function" ? focusTrapOptions.setReturnFocus(node) : focusTrapOptions.setReturnFocus;
           }
           if (outsideClick) {
             return false;

package/components/FocusTrapExtended/FocusTrapExtended.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusTrapExtended.js","sources":["../../../src/components/FocusTrapExtended/FocusTrapExtended.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport FocusTrap from \"focus-trap-react\";\n\n/** Свойства компонента FocusTrapExtended. */\nexport interface IFocusTrapExtendedProps extends FocusTrap.Props {}\n\n/**\n * Обёртка над `FocusTrap`, которая управляет возвратом фокуса в зависимости от сценария закрытия.\n *\n * **Ключевые особенности:**\n * - По умолчанию активирует опцию `clickOutsideDeactivates`.\n * - Если ловушка фокуса закрывается изнутри, фокус автоматически возвращается на элемент, который её активировал.\n * - Если деактивация происходит из-за клика снаружи, фокус не перехватывается.\n */\nexport const FocusTrapExtended: React.FC<IFocusTrapExtendedProps> = ({ focusTrapOptions, ...restProps }) => {\n    const outsideClickRef = useRef(false);\n\n    return (\n        <FocusTrap\n            {...restProps}\n            focusTrapOptions={{\n                ...focusTrapOptions,\n                clickOutsideDeactivates: (event) => {\n                    if (typeof focusTrapOptions?.clickOutsideDeactivates === \"function\") {\n                        const deactivates = focusTrapOptions.clickOutsideDeactivates(event);\n                        if (deactivates) {\n                            outsideClickRef.current = true;\n                        }\n                        return deactivates;\n                    }\n\n                    outsideClickRef.current = true;\n                    return true;\n                },\n                setReturnFocus: (node) => {\n                    const outsideClick = outsideClickRef.current;\n                    outsideClickRef.current = false;\n\n                    if (typeof focusTrapOptions?.setReturnFocus === \"function\") {\n                        const userResult = focusTrapOptions.setReturnFocus(node);\n                        // Если был внешний клик и пользователь вернул node, подавляем возврат.\n                        return outsideClick && userResult === node ? false : userResult;\n                    }\n\n                    if (outsideClick) {\n                        return false;\n                    }\n\n                    return node;\n                },\n            }}\n        />\n    );\n};\n"],"names":[],"mappings":";;;AAcO,MAAM,oBAAuD,CAAC,EAAE,kBAAkB,GAAG,gBAAgB;AACxG,QAAM,kBAAkB,OAAO,KAAK;AAEpC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,kBAAkB;AAAA,QACd,GAAG;AAAA,QACH,yBAAyB,CAAC,UAAU;AAChC,cAAI,QAAO,qDAAkB,6BAA4B,YAAY;AACjE,kBAAM,cAAc,iBAAiB,wBAAwB,KAAK;AAClE,gBAAI,aAAa;AACb,8BAAgB,UAAU;AAAA,YAC9B;AACA,mBAAO;AAAA,UACX;AAEA,0BAAgB,UAAU;AAC1B,iBAAO;AAAA,QACX;AAAA,QACA,gBAAgB,CAAC,SAAS;AACtB,gBAAM,eAAe,gBAAgB;AACrC,0BAAgB,UAAU;AAE1B,cAAI,QAAO,qDAAkB,oBAAmB,YAAY;AACxD,kBAAM,aAAa,iBAAiB,eAAe,IAAI;AAEvD,mBAAO,gBAAgB,eAAe,OAAO,QAAQ;AAAA,UACzD;AAEA,cAAI,cAAc;AACd,mBAAO;AAAA,UACX;AAEA,iBAAO;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"FocusTrapExtended.js","sources":["../../../src/components/FocusTrapExtended/FocusTrapExtended.tsx"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport FocusTrap from \"focus-trap-react\";\n\n/** Свойства компонента FocusTrapExtended. */\nexport interface IFocusTrapExtendedProps extends FocusTrap.Props {}\n\n/**\n * Расширенная обёртка над `FocusTrap`, управляющая возвратом фокуса в зависимости от сценария закрытия.\n *\n * **Ключевые особенности:**\n * - По умолчанию обрабатывает внешний клик через `clickOutsideDeactivates` и переводит ловушку на паузу.\n * - Автоматически возвращает фокус на триггер при закрытии изнутри, но не перехватывает его при клике снаружи.\n * - Вместо полного уничтожения нативного инстанса ловушки при кликах снаружи, компонент переводит текущую ловушку на\n *   паузу. Это изолирует стек ловушек и предотвращает ложный перехват фокуса предыдущими ловушками фокуса (ниже по\n *   стеку).\n */\nexport const FocusTrapExtended: React.FC<IFocusTrapExtendedProps> = ({\n    paused: externalPaused,\n    focusTrapOptions,\n    ...restProps\n}) => {\n    const [paused, setPaused] = useState(false);\n    const outsideClickRef = useRef(false);\n\n    return (\n        <FocusTrap\n            {...restProps}\n            paused={externalPaused ?? paused}\n            focusTrapOptions={{\n                ...focusTrapOptions,\n                onActivate: () => {\n                    outsideClickRef.current = false;\n                    // Сбрасываем паузу, так как при закрытии без unmount локальный стейт сохраняет true\n                    setPaused(false);\n                    focusTrapOptions?.onActivate?.();\n                },\n                clickOutsideDeactivates: (event) => {\n                    if (focusTrapOptions?.clickOutsideDeactivates !== undefined) {\n                        const deactivates =\n                            typeof focusTrapOptions.clickOutsideDeactivates === \"function\"\n                                ? focusTrapOptions.clickOutsideDeactivates(event)\n                                : focusTrapOptions.clickOutsideDeactivates;\n\n                        if (deactivates) {\n                            // Фиксируем клик только если внешнее правило действительно разрешило деактивацию\n                            outsideClickRef.current = true;\n                        }\n                        return deactivates;\n                    }\n\n                    outsideClickRef.current = true;\n                    setPaused(true);\n                    return false;\n                },\n                setReturnFocus: (node) => {\n                    const outsideClick = outsideClickRef.current;\n                    outsideClickRef.current = false;\n\n                    if (focusTrapOptions?.setReturnFocus !== undefined) {\n                        return typeof focusTrapOptions.setReturnFocus === \"function\"\n                            ? focusTrapOptions.setReturnFocus(node)\n                            : focusTrapOptions.setReturnFocus;\n                    }\n\n                    // Если клик был снаружи, возвращать фокус не нужно\n                    if (outsideClick) {\n                        return false;\n                    }\n                    return node;\n                },\n            }}\n        />\n    );\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,oBAAuD,CAAC;AAAA,EACjE,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,kBAAkB,OAAO,KAAK;AAEpC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,QAAQ,kBAAkB;AAAA,MAC1B,kBAAkB;AAAA,QACd,GAAG;AAAA,QACH,YAAY,MAAM;;AACd,0BAAgB,UAAU;AAE1B,oBAAU,KAAK;AACf,qEAAkB,eAAlB;AAAA,QACJ;AAAA,QACA,yBAAyB,CAAC,UAAU;AAChC,eAAI,qDAAkB,6BAA4B,QAAW;AACzD,kBAAM,cACF,OAAO,iBAAiB,4BAA4B,aAC9C,iBAAiB,wBAAwB,KAAK,IAC9C,iBAAiB;AAE3B,gBAAI,aAAa;AAEb,8BAAgB,UAAU;AAAA,YAC9B;AACA,mBAAO;AAAA,UACX;AAEA,0BAAgB,UAAU;AAC1B,oBAAU,IAAI;AACd,iBAAO;AAAA,QACX;AAAA,QACA,gBAAgB,CAAC,SAAS;AACtB,gBAAM,eAAe,gBAAgB;AACrC,0BAAgB,UAAU;AAE1B,eAAI,qDAAkB,oBAAmB,QAAW;AAChD,mBAAO,OAAO,iBAAiB,mBAAmB,aAC5C,iBAAiB,eAAe,IAAI,IACpC,iBAAiB;AAAA,UAC3B;AAGA,cAAI,cAAc;AACd,mBAAO;AAAA,UACX;AACA,iBAAO;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}

package/components/Footer/Footer.js

@@ -5,7 +5,7 @@ import "./components/FooterDescriptionControls.js";
 import "./components/FooterDescriptionContent.js";
 const Footer = Object.assign(
   React.forwardRef(function Footer2({ children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { ...rest, "data-tx": "0.39.0", ref, children });
+    return /* @__PURE__ */ jsx("div", { ...rest, "data-tx": "0.41.0", ref, children });
   }),
   {
     Description: FooterDescription

package/components/Footer/components/FooterDescription.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { FooterDescriptionContent } from "./FooterDescriptionContent.js";
 import { FooterDescriptionControls } from "./FooterDescriptionControls.js";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/Footer.module-DUTwBl0x.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/Footer.module-BVlnkdmW.js";
 const FooterDescription = Object.assign(
   React.forwardRef(function FooterDescription2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.footerDescription, className), ...rest, ref, children });

package/components/Footer/components/FooterDescriptionContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/Footer.module-DUTwBl0x.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/Footer.module-BVlnkdmW.js";
 const FooterDescriptionContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.footerDescriptionContent, className), ...rest, ref, children })
 );

package/components/Footer/components/FooterDescriptionControls.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/Footer.module-DUTwBl0x.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/Footer.module-BVlnkdmW.js";
 const FooterDescriptionControls = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.footerDescriptionControls, className), ...rest, ref, children })
 );

package/components/FormField/FormField.js

@@ -1,39 +1,39 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useState, useMemo } from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldContext } from "./FormFieldContext.js";
 import { TARGET_PADDING_X_DEFAULT } from "./consts.js";
 import { EFormFieldStatus } from "./enums.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const formField = "formField__27a9f37e";
-const sm = "sm__3d767d74";
-const md = "md__6ba736f0";
-const lg = "lg__6e0b5ad2";
-const active = "active__b57087b6";
-const disabled = "disabled__67a97030";
-const error = "error__857f407f";
-const warning = "warning__df4352a6";
-const filled = "filled__e7f1f4b9";
+const formField = "formField__d04c99bb";
+const sm = "sm__7223949b";
+const md = "md__6f61044f";
+const lg = "lg__5881f8f2";
+const active = "active__007d4d41";
+const disabled = "disabled__4261bab8";
+const error = "error__9b9bac40";
+const warning = "warning__1253d373";
+const filled = "filled__a6af256e";
 const styles = {
   formField,
   sm,
   md,
   lg,
-  "default": "default__ff490bba",
+  "default": "default__c603551c",
   active,
   disabled,
   error,
   warning,
   filled
 };
-const statusToClassNameMap = {
+const STATUS_TO_CLASS_NAME_MAP = {
   [EFormFieldStatus.DEFAULT]: styles.default,
   [EFormFieldStatus.DISABLED]: styles.disabled,
   [EFormFieldStatus.ERROR]: styles.error,
   [EFormFieldStatus.WARNING]: styles.warning
 };
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const FormField = React.forwardRef(
   ({
     children,
@@ -50,6 +50,7 @@ const FormField = React.forwardRef(
     const [prefixWidth, setPrefixWidth] = useState(TARGET_PADDING_X_DEFAULT);
     const [filled2, setFilled] = useState(false);
     const [focused, setFocused] = useState(false);
+    const isActive = active2 || focused;
     const contextValue = useMemo(
       () => ({
         size,
@@ -60,7 +61,7 @@ const FormField = React.forwardRef(
         prefixWidth,
         filled: filled2,
         focused,
-        active: active2 || focused,
+        active: isActive,
         setTargetId,
         setLabelId,
         setPostfixWidth,
@@ -68,22 +69,22 @@ const FormField = React.forwardRef(
         setFilled,
         setFocused
       }),
-      [size, status, targetId, labelId, postfixWidth, prefixWidth, filled2, focused, active2]
+      [size, status, targetId, labelId, postfixWidth, prefixWidth, filled2, focused, isActive]
     );
     return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
       {
         className: clsx(
           styles.formField,
-          sizeToClassNameMap[size],
-          statusToClassNameMap[status],
+          SIZE_TO_CLASS_NAME_MAP[size],
+          STATUS_TO_CLASS_NAME_MAP[status],
           {
             [styles.filled]: filled2,
-            [styles.active]: active2 || focused
+            [styles.active]: isActive
           },
           className
         ),
-        "data-tx": "0.39.0",
+        "data-tx": "0.41.0",
         style: { paddingLeft: prefixWidth, paddingRight: postfixWidth, ...style },
         ...htmlDivAttributes,
         ref,
@@ -94,7 +95,6 @@ const FormField = React.forwardRef(
 );
 FormField.displayName = "FormField";
 export {
-  FormField,
-  statusToClassNameMap
+  FormField
 };
 //# sourceMappingURL=FormField.js.map

package/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldContext } from \"./FormFieldContext\";\nimport { TARGET_PADDING_X_DEFAULT } from \"./consts\";\nimport { EFormFieldStatus } from \"./enums\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { DataAttributes } from \"../../types/CoreTypes\";\nimport { createSizeToClassNameMap } from \"../../utils/classNameMaps\";\nimport styles from \"./styles/FormField.module.less\";\n\n/** Свойства компонента FormField. */\nexport interface IFormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"placeholder\">, DataAttributes {\n    /** Визуальное состояние. */\n    status?: EFormFieldStatus;\n    /** Размер. */\n    size?: EComponentSize;\n    /** Активное состояние. */\n    active?: boolean;\n}\n\nexport const statusToClassNameMap = {\n    [EFormFieldStatus.DEFAULT]: styles.default,\n    [EFormFieldStatus.DISABLED]: styles.disabled,\n    [EFormFieldStatus.ERROR]: styles.error,\n    [EFormFieldStatus.WARNING]: styles.warning,\n};\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Элемент, отображающий input/select/textarea + label. */\nexport const FormField = React.forwardRef<HTMLDivElement, IFormFieldProps>(\n    (\n        {\n            children,\n            className,\n            style,\n            size = EComponentSize.LG,\n            status = EFormFieldStatus.DEFAULT,\n            active = false,\n            ...htmlDivAttributes\n        },\n        ref,\n    ) => {\n        const [targetId, setTargetId] = useState<string>();\n        const [labelId, setLabelId] = useState<string>();\n        const [postfixWidth, setPostfixWidth] = useState(TARGET_PADDING_X_DEFAULT);\n        const [prefixWidth, setPrefixWidth] = useState(TARGET_PADDING_X_DEFAULT);\n        const [filled, setFilled] = useState(false);\n        const [focused, setFocused] = useState(false);\n\n        const contextValue = useMemo(\n            () => ({\n                size,\n                status,\n                targetId,\n                labelId,\n                postfixWidth,\n                prefixWidth,\n                filled,\n                focused,\n                active: active || focused,\n                setTargetId,\n                setLabelId,\n                setPostfixWidth,\n                setPrefixWidth,\n                setFilled,\n                setFocused,\n            }),\n            [size, status, targetId, labelId, postfixWidth, prefixWidth, filled, focused, active],\n        );\n\n        return (\n            <FormFieldContext.Provider value={contextValue}>\n                <div\n                    className={clsx(\n                        styles.formField,\n                        sizeToClassNameMap[size],\n                        statusToClassNameMap[status],\n                        {\n                            [styles.filled]: filled,\n                            [styles.active]: active || focused,\n                        },\n                        className,\n                    )}\n                    data-tx={process.env.npm_package_version}\n                    style={{ paddingLeft: prefixWidth, paddingRight: postfixWidth, ...style }}\n                    {...htmlDivAttributes}\n                    ref={ref}\n                >\n                    {children}\n                </div>\n            </FormFieldContext.Provider>\n        );\n    },\n);\n\nFormField.displayName = \"FormField\";\n"],"names":["active","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,uBAAuB;AAAA,EAChC,CAAC,iBAAiB,OAAO,GAAG,OAAO;AAAA,EACnC,CAAC,iBAAiB,QAAQ,GAAG,OAAO;AAAA,EACpC,CAAC,iBAAiB,KAAK,GAAG,OAAO;AAAA,EACjC,CAAC,iBAAiB,OAAO,GAAG,OAAO;AACvC;AAEA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,YAAY,MAAM;AAAA,EAC3B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB,SAAS,iBAAiB;AAAA,IAC1B,QAAAA,UAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,UAAU,WAAW,IAAI,SAAA;AAChC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAA;AAC9B,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,wBAAwB;AACzE,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,wBAAwB;AACvE,UAAM,CAACC,SAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,UAAM,eAAe;AAAA,MACjB,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAAA;AAAA,QACA;AAAA,QACA,QAAQD,WAAU;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ,CAAC,MAAM,QAAQ,UAAU,SAAS,cAAc,aAAaC,SAAQ,SAASD,OAAM;AAAA,IAAA;AAGxF,+BACK,iBAAiB,UAAjB,EAA0B,OAAO,cAC9B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,UACP,OAAO;AAAA,UACP,mBAAmB,IAAI;AAAA,UACvB,qBAAqB,MAAM;AAAA,UAC3B;AAAA,YACI,CAAC,OAAO,MAAM,GAAGC;AAAA,YACjB,CAAC,OAAO,MAAM,GAAGD,WAAU;AAAA,UAAA;AAAA,UAE/B;AAAA,QAAA;AAAA,QAEJ,WAAS;AAAA,QACT,OAAO,EAAE,aAAa,aAAa,cAAc,cAAc,GAAG,MAAA;AAAA,QACjE,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldContext, IFormFieldContext } from \"./FormFieldContext\";\nimport { TARGET_PADDING_X_DEFAULT } from \"./consts\";\nimport { EFormFieldStatus } from \"./enums\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { DataAttributes } from \"../../types/CoreTypes\";\nimport { createSizeToClassNameMap } from \"../../utils/classNameMaps\";\nimport styles from \"./styles/FormField.module.less\";\n\n/** Свойства компонента FormField. */\nexport interface IFormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"placeholder\">, DataAttributes {\n    /** Визуальное состояние поля. Значение DISABLED блокирует вложенные элементы ввода. По умолчанию EFormFieldStatus.DEFAULT. */\n    status?: EFormFieldStatus;\n    /** Размер поля. Прокидывается вложенным элементам через контекст. По умолчанию EComponentSize.LG. */\n    size?: EComponentSize;\n    /** Принудительно активное состояние. Поле также становится активным, когда вложенный элемент ввода в фокусе. По умолчанию false. */\n    active?: boolean;\n}\n\n/** Соответствие статуса имени класса. */\nconst STATUS_TO_CLASS_NAME_MAP = {\n    [EFormFieldStatus.DEFAULT]: styles.default,\n    [EFormFieldStatus.DISABLED]: styles.disabled,\n    [EFormFieldStatus.ERROR]: styles.error,\n    [EFormFieldStatus.WARNING]: styles.warning,\n};\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/**\n * Элемент, отображающий input/select/textarea + label.\n *\n * Является провайдером FormFieldContext: размер, статус и состояния поля (фокус, заполненность,\n * идентификаторы элемента ввода и лейбла, ширины префикса и постфикса) распространяются\n * на вложенные FormFieldLabel / FormFieldInput / FormFieldTarget и другие субкомпоненты.\n */\nexport const FormField = React.forwardRef<HTMLDivElement, IFormFieldProps>(\n    (\n        {\n            children,\n            className,\n            style,\n            size = EComponentSize.LG,\n            status = EFormFieldStatus.DEFAULT,\n            active = false,\n            ...htmlDivAttributes\n        },\n        ref,\n    ) => {\n        const [targetId, setTargetId] = useState<string>();\n        const [labelId, setLabelId] = useState<string>();\n        const [postfixWidth, setPostfixWidth] = useState(TARGET_PADDING_X_DEFAULT);\n        const [prefixWidth, setPrefixWidth] = useState(TARGET_PADDING_X_DEFAULT);\n        const [filled, setFilled] = useState(false);\n        const [focused, setFocused] = useState(false);\n\n        // Поле активно, если активность задана снаружи или вложенный элемент ввода в фокусе.\n        const isActive = active || focused;\n\n        const contextValue = useMemo<IFormFieldContext>(\n            () => ({\n                size,\n                status,\n                targetId,\n                labelId,\n                postfixWidth,\n                prefixWidth,\n                filled,\n                focused,\n                active: isActive,\n                setTargetId,\n                setLabelId,\n                setPostfixWidth,\n                setPrefixWidth,\n                setFilled,\n                setFocused,\n            }),\n            [size, status, targetId, labelId, postfixWidth, prefixWidth, filled, focused, isActive],\n        );\n\n        return (\n            <FormFieldContext.Provider value={contextValue}>\n                <div\n                    className={clsx(\n                        styles.formField,\n                        SIZE_TO_CLASS_NAME_MAP[size],\n                        STATUS_TO_CLASS_NAME_MAP[status],\n                        {\n                            [styles.filled]: filled,\n                            [styles.active]: isActive,\n                        },\n                        className,\n                    )}\n                    data-tx={process.env.npm_package_version}\n                    style={{ paddingLeft: prefixWidth, paddingRight: postfixWidth, ...style }}\n                    {...htmlDivAttributes}\n                    ref={ref}\n                >\n                    {children}\n                </div>\n            </FormFieldContext.Provider>\n        );\n    },\n);\n\nFormField.displayName = \"FormField\";\n"],"names":["active","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,2BAA2B;AAAA,EAC7B,CAAC,iBAAiB,OAAO,GAAG,OAAO;AAAA,EACnC,CAAC,iBAAiB,QAAQ,GAAG,OAAO;AAAA,EACpC,CAAC,iBAAiB,KAAK,GAAG,OAAO;AAAA,EACjC,CAAC,iBAAiB,OAAO,GAAG,OAAO;AACvC;AAGA,MAAM,yBAAyB,yBAAyB,MAAM;AASvD,MAAM,YAAY,MAAM;AAAA,EAC3B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB,SAAS,iBAAiB;AAAA,IAC1B,QAAAA,UAAS;AAAA,IACT,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,CAAC,UAAU,WAAW,IAAI,SAAA;AAChC,UAAM,CAAC,SAAS,UAAU,IAAI,SAAA;AAC9B,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,wBAAwB;AACzE,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,wBAAwB;AACvE,UAAM,CAACC,SAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,UAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,UAAM,WAAWD,WAAU;AAE3B,UAAM,eAAe;AAAA,MACjB,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAAC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEJ,CAAC,MAAM,QAAQ,UAAU,SAAS,cAAc,aAAaA,SAAQ,SAAS,QAAQ;AAAA,IAAA;AAG1F,+BACK,iBAAiB,UAAjB,EAA0B,OAAO,cAC9B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,UACP,OAAO;AAAA,UACP,uBAAuB,IAAI;AAAA,UAC3B,yBAAyB,MAAM;AAAA,UAC/B;AAAA,YACI,CAAC,OAAO,MAAM,GAAGA;AAAA,YACjB,CAAC,OAAO,MAAM,GAAG;AAAA,UAAA;AAAA,UAErB;AAAA,QAAA;AAAA,QAEJ,WAAS;AAAA,QACT,OAAO,EAAE,aAAa,aAAa,cAAc,cAAc,GAAG,MAAA;AAAA,QACjE,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AAEA,UAAU,cAAc;"}

package/components/FormField/FormFieldContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContext.js","sources":["../../../src/components/FormField/FormFieldContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { EFormFieldStatus } from \"./enums\";\n\nexport interface IFormFieldContext {\n    /** Размер поля. */\n    size: EComponentSize;\n    /** Статус поля. */\n    status: EFormFieldStatus;\n    /** Идентификатор элемента ввода. */\n    targetId: string | undefined;\n    /** Идентификатор лейбла. */\n    labelId: string | undefined;\n    /** Ширина элемента FormFieldPrefix. */\n    prefixWidth: number;\n    /** Ширина элемента FormFieldPostfix. */\n    postfixWidth: number;\n    /** Поле заполнено. */\n    filled: boolean;\n    /** Поле в фокусе. */\n    focused: boolean;\n    /** Поле активно. */\n    active: boolean;\n    /** Установка значения targetId. */\n    setTargetId: React.Dispatch<React.SetStateAction<string | undefined>>;\n    /** Установка значения labelId. */\n    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;\n    /** Установка значения postfixWidth. */\n    setPostfixWidth: React.Dispatch<React.SetStateAction<number>>;\n    /** Установка значения prefixWidth. */\n    setPrefixWidth: React.Dispatch<React.SetStateAction<number>>;\n    /** Установка значения filled. */\n    setFilled: React.Dispatch<React.SetStateAction<boolean>>;\n    /** Установка значения focused. */\n    setFocused: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const initialFormFieldContext: IFormFieldContext = {\n    size: EComponentSize.LG,\n    status: EFormFieldStatus.DEFAULT,\n    targetId: undefined,\n    labelId: undefined,\n    postfixWidth: 0,\n    prefixWidth: 0,\n    // Временный фикс для DropdownMobileHeader\n    filled: true,\n    focused: false,\n    active: false,\n    setTargetId: () => {},\n    setLabelId: () => {},\n    setPostfixWidth: () => {},\n    setPrefixWidth: () => {},\n    setFilled: () => {},\n    setFocused: () => {},\n};\n\n/**\n * Контекст поля ввода.\n */\nexport const FormFieldContext = React.createContext<IFormFieldContext>(initialFormFieldContext);\n"],"names":[],"mappings":";;;AAqCO,MAAM,0BAA6C;AAAA,EACtD,MAAM,eAAe;AAAA,EACrB,QAAQ,iBAAiB;AAAA,EACzB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA;AAAA,EAEb,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,YAAY,MAAM;AAAA,EAAC;AACvB;AAKO,MAAM,mBAAmB,MAAM,cAAiC,uBAAuB;"}
+{"version":3,"file":"FormFieldContext.js","sources":["../../../src/components/FormField/FormFieldContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"../../enums/EComponentSize\";\nimport { EFormFieldStatus } from \"./enums\";\n\n/** Значение контекста поля ввода. Провайдер — компонент FormField. */\nexport interface IFormFieldContext {\n    /** Размер поля. */\n    size: EComponentSize;\n    /** Статус поля. */\n    status: EFormFieldStatus;\n    /** Идентификатор элемента ввода. */\n    targetId: string | undefined;\n    /** Идентификатор лейбла. */\n    labelId: string | undefined;\n    /** Ширина элемента FormFieldPrefix. */\n    prefixWidth: number;\n    /** Ширина элемента FormFieldPostfix. */\n    postfixWidth: number;\n    /** Поле заполнено. */\n    filled: boolean;\n    /** Поле в фокусе. */\n    focused: boolean;\n    /** Поле активно. */\n    active: boolean;\n    /** Установка значения targetId. */\n    setTargetId: React.Dispatch<React.SetStateAction<string | undefined>>;\n    /** Установка значения labelId. */\n    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;\n    /** Установка значения postfixWidth. */\n    setPostfixWidth: React.Dispatch<React.SetStateAction<number>>;\n    /** Установка значения prefixWidth. */\n    setPrefixWidth: React.Dispatch<React.SetStateAction<number>>;\n    /** Установка значения filled. */\n    setFilled: React.Dispatch<React.SetStateAction<boolean>>;\n    /** Установка значения focused. */\n    setFocused: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/**\n * Значение контекста по умолчанию — используется субкомпонентами, отрендеренными вне FormField.\n * Сеттеры в этом случае являются no-op.\n */\nexport const initialFormFieldContext: IFormFieldContext = {\n    size: EComponentSize.LG,\n    status: EFormFieldStatus.DEFAULT,\n    targetId: undefined,\n    labelId: undefined,\n    postfixWidth: 0,\n    prefixWidth: 0,\n    // Временный фикс для DropdownMobileHeader\n    filled: true,\n    focused: false,\n    active: false,\n    setTargetId: () => {},\n    setLabelId: () => {},\n    setPostfixWidth: () => {},\n    setPrefixWidth: () => {},\n    setFilled: () => {},\n    setFocused: () => {},\n};\n\n/**\n * Контекст поля ввода.\n */\nexport const FormFieldContext = React.createContext<IFormFieldContext>(initialFormFieldContext);\n"],"names":[],"mappings":";;;AA0CO,MAAM,0BAA6C;AAAA,EACtD,MAAM,eAAe;AAAA,EACrB,QAAQ,iBAAiB;AAAA,EACzB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA;AAAA,EAEb,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,YAAY,MAAM;AAAA,EAAC;AACvB;AAKO,MAAM,mBAAmB,MAAM,cAAiC,uBAAuB;"}

package/components/FormField/FormFieldDescriptionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldDescriptionContext.js","sources":["../../../src/components/FormField/FormFieldDescriptionContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport interface IFormFieldDescriptionContext {\n    // Поле имеет счетчик символов.\n    withCounter: boolean;\n    // Установка значения withCounter.\n    setWithCounter: (withCounter: boolean) => void;\n}\n\nexport const initialFormFieldDescriptionContext: IFormFieldDescriptionContext = {\n    withCounter: false,\n    setWithCounter: () => {},\n};\n\n/**\n * Контекст описания поля ввода.\n */\nexport const FormFieldDescriptionContext = React.createContext<IFormFieldDescriptionContext>(\n    initialFormFieldDescriptionContext,\n);\n"],"names":[],"mappings":";AASO,MAAM,qCAAmE;AAAA,EAC5E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAC3B;AAKO,MAAM,8BAA8B,MAAM;AAAA,EAC7C;AACJ;"}
+{"version":3,"file":"FormFieldDescriptionContext.js","sources":["../../../src/components/FormField/FormFieldDescriptionContext.ts"],"sourcesContent":["import React from \"react\";\n\n/** Значение контекста описания поля ввода. */\nexport interface IFormFieldDescriptionContext {\n    /** Описание содержит счетчик символов (FormFieldCounter). */\n    withCounter: boolean;\n    /** Установка значения withCounter. */\n    setWithCounter: (withCounter: boolean) => void;\n}\n\n/** Значение контекста по умолчанию — используется вне FormFieldDescription. */\nexport const initialFormFieldDescriptionContext: IFormFieldDescriptionContext = {\n    withCounter: false,\n    setWithCounter: () => {},\n};\n\n/**\n * Контекст описания поля ввода.\n */\nexport const FormFieldDescriptionContext = React.createContext<IFormFieldDescriptionContext>(\n    initialFormFieldDescriptionContext,\n);\n"],"names":[],"mappings":";AAWO,MAAM,qCAAmE;AAAA,EAC5E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAC3B;AAKO,MAAM,8BAA8B,MAAM;AAAA,EAC7C;AACJ;"}

package/components/FormField/components/FormFieldClear.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useCallback } from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { ButtonIcon } from "../../Button/ButtonIcon.js";
-const formFieldClear = "formFieldClear__10a6a2a8";
+const formFieldClear = "formFieldClear__f3f68046";
 const styles = {
   formFieldClear
 };

package/components/FormField/components/FormFieldClear.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldClear.js","sources":["../../../../src/components/FormField/components/FormFieldClear.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { CrossStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { ButtonIcon } from \"../../Button/ButtonIcon\";\nimport styles from \"../styles/FormFieldClear.module.less\";\n\n/** Свойства компонета FormFieldClear. */\nexport interface IFormFieldClearProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {}\n\n/** Кнопка очищения введенного значения. */\nexport const FormFieldClear = React.forwardRef<HTMLButtonElement, IFormFieldClearProps>(\n    ({ className, onMouseDown, ...restProps }, ref) => {\n        const handleMouseDown = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n            (event) => {\n                // Предотвращаем получение фокуса.\n                event.preventDefault();\n                onMouseDown?.(event);\n            },\n            [onMouseDown],\n        );\n\n        return (\n            <ButtonIcon\n                {...restProps}\n                className={clsx(styles.formFieldClear, className)}\n                onMouseDown={handleMouseDown}\n                ref={ref}\n            >\n                <CrossStrokeSrvIcon16 paletteIndex={5} />\n            </ButtonIcon>\n        );\n    },\n);\n\nFormFieldClear.displayName = \"FormFieldClear\";\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,iBAAiB,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,aAAa,GAAG,UAAA,GAAa,QAAQ;AAC/C,UAAM,kBAAkB;AAAA,MACpB,CAAC,UAAU;AAEP,cAAM,eAAA;AACN,mDAAc;AAAA,MAClB;AAAA,MACA,CAAC,WAAW;AAAA,IAAA;AAGhB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,QAChD,aAAa;AAAA,QACb;AAAA,QAEA,UAAA,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnD;AACJ;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"FormFieldClear.js","sources":["../../../../src/components/FormField/components/FormFieldClear.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { CrossStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { ButtonIcon } from \"../../Button/ButtonIcon\";\nimport styles from \"../styles/FormFieldClear.module.less\";\n\n/** Свойства компонента FormFieldClear. */\nexport interface IFormFieldClearProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {}\n\n/**\n * Кнопка очистки введённого значения.\n *\n * Гасит установку фокуса на mousedown, чтобы поле ввода не теряло фокус при клике по кнопке.\n */\nexport const FormFieldClear = React.forwardRef<HTMLButtonElement, IFormFieldClearProps>(\n    ({ className, onMouseDown, ...restProps }, ref) => {\n        const handleMouseDown = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n            (event) => {\n                // Предотвращаем получение фокуса.\n                event.preventDefault();\n                onMouseDown?.(event);\n            },\n            [onMouseDown],\n        );\n\n        return (\n            <ButtonIcon\n                {...restProps}\n                className={clsx(styles.formFieldClear, className)}\n                onMouseDown={handleMouseDown}\n                ref={ref}\n            >\n                <CrossStrokeSrvIcon16 paletteIndex={5} />\n            </ButtonIcon>\n        );\n    },\n);\n\nFormFieldClear.displayName = \"FormFieldClear\";\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,iBAAiB,MAAM;AAAA,EAChC,CAAC,EAAE,WAAW,aAAa,GAAG,UAAA,GAAa,QAAQ;AAC/C,UAAM,kBAAkB;AAAA,MACpB,CAAC,UAAU;AAEP,cAAM,eAAA;AACN,mDAAc;AAAA,MAClB;AAAA,MACA,CAAC,WAAW;AAAA,IAAA;AAGhB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,KAAK,OAAO,gBAAgB,SAAS;AAAA,QAChD,aAAa;AAAA,QACb;AAAA,QAEA,UAAA,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnD;AACJ;AAEA,eAAe,cAAc;"}

package/components/FormField/components/FormFieldCounter.js

@@ -1,17 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext, useEffect } from "react";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldDescriptionContext } from "../FormFieldDescriptionContext.js";
-const formFieldCounter = "formFieldCounter__71f6a24b";
+const formFieldCounter = "formFieldCounter__e543b73c";
 const styles = {
   formFieldCounter
 };
-const FormFieldCounter = ({ children, ...rest }) => {
+const FormFieldCounter = ({ children, className, ...rest }) => {
   const { setWithCounter } = useContext(FormFieldDescriptionContext);
   useEffect(() => {
     setWithCounter(true);
     return () => setWithCounter(false);
-  }, []);
-  return /* @__PURE__ */ jsx("div", { className: styles.formFieldCounter, ...rest, children });
+  }, [setWithCounter]);
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.formFieldCounter, className), ...rest, children });
 };
 FormFieldCounter.displayName = "FormFieldCounter";
 export {

package/components/FormField/components/FormFieldCounter.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldCounter.js","sources":["../../../../src/components/FormField/components/FormFieldCounter.tsx"],"sourcesContent":["import React, { useEffect, useContext } from \"react\";\nimport { FormFieldDescriptionContext } from \"../FormFieldDescriptionContext\";\nimport styles from \"../styles/FormFieldCounter.module.less\";\n\n/** Свойства компонента FormFieldCounter. */\nexport interface IFormFieldCounterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Отображает дополнительную информацию под полем ввода справа, счетчик символов. */\nexport const FormFieldCounter: React.FC<IFormFieldCounterProps> = ({ children, ...rest }) => {\n    const { setWithCounter } = useContext(FormFieldDescriptionContext);\n\n    useEffect(() => {\n        setWithCounter(true);\n        return () => setWithCounter(false);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return (\n        <div className={styles.formFieldCounter} {...rest}>\n            {children}\n        </div>\n    );\n};\n\nFormFieldCounter.displayName = \"FormFieldCounter\";\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,mBAAqD,CAAC,EAAE,UAAU,GAAG,WAAW;AACzF,QAAM,EAAE,eAAA,IAAmB,WAAW,2BAA2B;AAEjE,YAAU,MAAM;AACZ,mBAAe,IAAI;AACnB,WAAO,MAAM,eAAe,KAAK;AAAA,EAErC,GAAG,CAAA,CAAE;AAEL,6BACK,OAAA,EAAI,WAAW,OAAO,kBAAmB,GAAG,MACxC,UACL;AAER;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"FormFieldCounter.js","sources":["../../../../src/components/FormField/components/FormFieldCounter.tsx"],"sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldDescriptionContext } from \"../FormFieldDescriptionContext\";\nimport styles from \"../styles/FormFieldCounter.module.less\";\n\n/** Свойства компонента FormFieldCounter. */\nexport interface IFormFieldCounterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Счётчик символов. Отображает дополнительную информацию под полем ввода справа.\n *\n * Сообщает родительскому FormFieldDescription о своём присутствии через FormFieldDescriptionContext.\n */\nexport const FormFieldCounter: React.FC<IFormFieldCounterProps> = ({ children, className, ...rest }) => {\n    const { setWithCounter } = useContext(FormFieldDescriptionContext);\n\n    useEffect(() => {\n        setWithCounter(true);\n\n        return () => setWithCounter(false);\n    }, [setWithCounter]);\n\n    return (\n        <div className={clsx(styles.formFieldCounter, className)} {...rest}>\n            {children}\n        </div>\n    );\n};\n\nFormFieldCounter.displayName = \"FormFieldCounter\";\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,mBAAqD,CAAC,EAAE,UAAU,WAAW,GAAG,WAAW;AACpG,QAAM,EAAE,eAAA,IAAmB,WAAW,2BAA2B;AAEjE,YAAU,MAAM;AACZ,mBAAe,IAAI;AAEnB,WAAO,MAAM,eAAe,KAAK;AAAA,EACrC,GAAG,CAAC,cAAc,CAAC;AAEnB,SACI,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,kBAAkB,SAAS,GAAI,GAAG,MACzD,SAAA,CACL;AAER;AAEA,iBAAiB,cAAc;"}

package/components/FormField/components/FormFieldDescription.js

@@ -1,16 +1,24 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { useState, useMemo } from "react";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldDescriptionContext } from "../FormFieldDescriptionContext.js";
-const formFieldDescription = "formFieldDescription__0e526df7";
-const withCounter = "withCounter__213be809";
+const formFieldDescription = "formFieldDescription__eed8daec";
+const withCounter = "withCounter__659f26fe";
 const styles = {
   formFieldDescription,
   withCounter
 };
-const FormFieldDescription = ({ children, ...rest }) => {
+const FormFieldDescription = ({ children, className, ...rest }) => {
   const [withCounter2, setWithCounter] = useState(false);
-  return /* @__PURE__ */ jsx(FormFieldDescriptionContext.Provider, { value: { withCounter: withCounter2, setWithCounter }, children: /* @__PURE__ */ jsx("div", { className: clsx(styles.formFieldDescription, { [styles.withCounter]: withCounter2 }), ...rest, children }) });
+  const contextValue = useMemo(() => ({ withCounter: withCounter2, setWithCounter }), [withCounter2]);
+  return /* @__PURE__ */ jsx(FormFieldDescriptionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(styles.formFieldDescription, { [styles.withCounter]: withCounter2 }, className),
+      ...rest,
+      children
+    }
+  ) });
 };
 FormFieldDescription.displayName = "FormFieldDescription";
 export {

package/components/FormField/components/FormFieldDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldDescription.js","sources":["../../../../src/components/FormField/components/FormFieldDescription.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styles from \"../styles/FormFieldDescription.module.less\";\nimport clsx from \"clsx\";\nimport { FormFieldDescriptionContext } from \"../FormFieldDescriptionContext\";\n\n/** Свойства компонента FormFieldDescription. */\nexport interface IFormFieldDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** Отображает дополнительную информацию под полем ввода. */\nexport const FormFieldDescription: React.FC<IFormFieldDescriptionProps> = ({ children, ...rest }) => {\n    const [withCounter, setWithCounter] = useState(false);\n\n    return (\n        <FormFieldDescriptionContext.Provider value={{ withCounter, setWithCounter }}>\n            <div className={clsx(styles.formFieldDescription, { [styles.withCounter]: withCounter })} {...rest}>\n                {children}\n            </div>\n        </FormFieldDescriptionContext.Provider>\n    );\n};\n\nFormFieldDescription.displayName = \"FormFieldDescription\";\n"],"names":["withCounter"],"mappings":";;;;;;;;;;AASO,MAAM,uBAA6D,CAAC,EAAE,UAAU,GAAG,WAAW;AACjG,QAAM,CAACA,cAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACI,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,EAAE,aAAAA,cAAa,kBACxD,UAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,sBAAsB,EAAE,CAAC,OAAO,WAAW,GAAGA,aAAA,CAAa,GAAI,GAAG,MACzF,SAAA,CACL,EAAA,CACJ;AAER;AAEA,qBAAqB,cAAc;"}
+{"version":3,"file":"FormFieldDescription.js","sources":["../../../../src/components/FormField/components/FormFieldDescription.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldDescriptionContext, IFormFieldDescriptionContext } from \"../FormFieldDescriptionContext\";\nimport styles from \"../styles/FormFieldDescription.module.less\";\n\n/** Свойства компонента FormFieldDescription. */\nexport interface IFormFieldDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Отображает дополнительную информацию под полем ввода.\n *\n * Является провайдером FormFieldDescriptionContext: вложенный FormFieldCounter сообщает\n * о своём присутствии, и описание перестраивает раскладку под счётчик.\n */\nexport const FormFieldDescription: React.FC<IFormFieldDescriptionProps> = ({ children, className, ...rest }) => {\n    const [withCounter, setWithCounter] = useState(false);\n    const contextValue = useMemo<IFormFieldDescriptionContext>(() => ({ withCounter, setWithCounter }), [withCounter]);\n\n    return (\n        <FormFieldDescriptionContext.Provider value={contextValue}>\n            <div\n                className={clsx(styles.formFieldDescription, { [styles.withCounter]: withCounter }, className)}\n                {...rest}\n            >\n                {children}\n            </div>\n        </FormFieldDescriptionContext.Provider>\n    );\n};\n\nFormFieldDescription.displayName = \"FormFieldDescription\";\n"],"names":["withCounter"],"mappings":";;;;;;;;;;AAcO,MAAM,uBAA6D,CAAC,EAAE,UAAU,WAAW,GAAG,WAAW;AAC5G,QAAM,CAACA,cAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,eAAe,QAAsC,OAAO,EAAE,aAAAA,cAAa,mBAAmB,CAACA,YAAW,CAAC;AAEjH,SACI,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,cACzC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,sBAAsB,EAAE,CAAC,OAAO,WAAW,GAAGA,aAAA,GAAe,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AAEA,qBAAqB,cAAc;"}

package/components/FormField/components/FormFieldInput.js

@@ -1,21 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo, useCallback, useLayoutEffect } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { isFilled } from "./utils.js";
-const formFieldInput = "formFieldInput__31221597";
-const sm = "sm__3d767d74";
-const md = "md__6ba736f0";
-const lg = "lg__6e0b5ad2";
+const formFieldInput = "formFieldInput__30849f6d";
+const sm = "sm__7223949b";
+const md = "md__6f61044f";
+const lg = "lg__5881f8f2";
 const styles = {
   formFieldInput,
   sm,
   md,
   lg
 };
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const FormFieldInput = React.forwardRef(
   ({
     id: idProp,
@@ -31,7 +31,7 @@ const FormFieldInput = React.forwardRef(
   }, ref) => {
     const { status, setFocused, setTargetId, setFilled, size } = useContext(FormFieldContext);
     const id = useMemo(() => idProp === void 0 ? uniqueId("input_") : idProp, [idProp]);
-    const classNames = clsx(styles.formFieldInput, sizeToClassNameMap[size], className);
+    const classNames = clsx(styles.formFieldInput, SIZE_TO_CLASS_NAME_MAP[size], className);
     const syncFilled = useCallback(
       (nextValue) => {
         setFilled(isFilled(nextValue));
@@ -97,9 +97,8 @@ const FormFieldInput = React.forwardRef(
     };
     if (render) {
       return render({ ...commonProps, size }, ref);
-    } else {
-      return /* @__PURE__ */ jsx("input", { ...commonProps, ref });
     }
+    return /* @__PURE__ */ jsx("input", { ...commonProps, ref });
   }
 );
 FormFieldInput.displayName = "FormFieldInput";

package/components/FormField/components/FormFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldInput.js","sources":["../../../../src/components/FormField/components/FormFieldInput.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback, useLayoutEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { EComponentSize } from \"../../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { DataAttributes } from \"../../../types/CoreTypes\";\nimport { isFilled } from \"./utils\";\nimport styles from \"../styles/FormFieldInput.module.less\";\n\n/** Свойства, передаваемые в рендер-функцию IFormFieldInputProps. */\nexport interface IFormFieldInputProvideProps extends Omit<IFormFieldInputProps, \"render\" | \"size\"> {\n    size: EComponentSize;\n}\n\n/** Свойства компонента FormFieldInput. */\nexport interface IFormFieldInputProps extends React.InputHTMLAttributes<HTMLInputElement>, DataAttributes {\n    /** Рендер-функция, в которую можно передать любой инпут с нужным функционалом (валидация ввода, маска).\n     *  Через аргументы props инпуту передастся нужная стилизация.\n     * */\n    render?: (props: IFormFieldInputProvideProps, ref?: React.Ref<HTMLInputElement>) => React.ReactElement | null;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент, отображающий input. */\nexport const FormFieldInput = React.forwardRef<HTMLInputElement, IFormFieldInputProps>(\n    (\n        {\n            id: idProp,\n            className,\n            value,\n            defaultValue,\n            onFocus,\n            onBlur,\n            onAnimationStart,\n            onChange,\n            render,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { status, setFocused, setTargetId, setFilled, size } = useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"input_\") : idProp), [idProp]);\n        const classNames = clsx(styles.formFieldInput, sizeToClassNameMap[size], className);\n\n        const syncFilled = useCallback(\n            (nextValue: IFormFieldInputProps[\"value\"]) => {\n                setFilled(isFilled(nextValue));\n            },\n            [setFilled],\n        );\n\n        useLayoutEffect(() => {\n            setTargetId(id);\n        }, [id, setTargetId]);\n\n        useLayoutEffect(() => {\n            syncFilled(value ?? defaultValue);\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        useLayoutEffect(() => {\n            if (value !== undefined) {\n                syncFilled(value);\n            }\n        }, [value, syncFilled]);\n\n        const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(true);\n                onFocus?.(event);\n            },\n            [setFocused, syncFilled, onFocus],\n        );\n\n        const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(false);\n                onBlur?.(event);\n            },\n            [setFocused, syncFilled, onBlur],\n        );\n\n        /**\n         * Обработчик начала анимации.\n         *\n         * Текущая реализация необходима для кейсов с автозаполнением:\n         * - Браузер устанавливает значение в поле при загрузке страницы;\n         * - Браузер устанавливает значение в поле при навигации пользователем по сохранённым опциям заполнения.\n         */\n        const handleAnimationStart = useCallback<React.AnimationEventHandler<HTMLInputElement>>(\n            (event) => {\n                if (event.animationName.startsWith(\"autofill-applied-hook\")) {\n                    setFilled(true);\n                } else if (event.animationName.startsWith(\"autofill-cancelled-hook\")) {\n                    // Необходимо проверить, что при отмене автозаполнения, в поле не находится значение.\n                    syncFilled(event.currentTarget.value);\n                }\n                onAnimationStart?.(event);\n            },\n            [setFilled, syncFilled, onAnimationStart],\n        );\n\n        const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                onChange?.(event);\n            },\n            [syncFilled, onChange],\n        );\n\n        const commonProps = {\n            ...restProps,\n            id,\n            className: classNames,\n            value,\n            defaultValue,\n            disabled: status === EFormFieldStatus.DISABLED,\n            onFocus: handleFocus,\n            onBlur: handleBlur,\n            onAnimationStart: handleAnimationStart,\n            onChange: handleChange,\n        };\n\n        if (render) {\n            // Рендер инпута, переданного снаружи.\n            return render({ ...commonProps, size }, ref);\n        } else {\n            // Рендер текстового инпута по-умолчанию.\n            return <input {...commonProps} ref={ref} />;\n        }\n    },\n);\n\nFormFieldInput.displayName = \"FormFieldInput\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,iBAAiB,MAAM;AAAA,EAChC,CACI;AAAA,IACI,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,EAAE,QAAQ,YAAY,aAAa,WAAW,KAAA,IAAS,WAAW,gBAAgB;AACxF,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,QAAQ,IAAI,QAAS,CAAC,MAAM,CAAC;AACvF,UAAM,aAAa,KAAK,OAAO,gBAAgB,mBAAmB,IAAI,GAAG,SAAS;AAElF,UAAM,aAAa;AAAA,MACf,CAAC,cAA6C;AAC1C,kBAAU,SAAS,SAAS,CAAC;AAAA,MACjC;AAAA,MACA,CAAC,SAAS;AAAA,IAAA;AAGd,oBAAgB,MAAM;AAClB,kBAAY,EAAE;AAAA,IAClB,GAAG,CAAC,IAAI,WAAW,CAAC;AAEpB,oBAAgB,MAAM;AAClB,iBAAW,SAAS,YAAY;AAAA,IAEpC,GAAG,CAAA,CAAE;AAEL,oBAAgB,MAAM;AAClB,UAAI,UAAU,QAAW;AACrB,mBAAW,KAAK;AAAA,MACpB;AAAA,IACJ,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,IAAI;AACf,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,YAAY,YAAY,OAAO;AAAA,IAAA;AAGpC,UAAM,aAAa;AAAA,MACf,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,KAAK;AAChB,yCAAS;AAAA,MACb;AAAA,MACA,CAAC,YAAY,YAAY,MAAM;AAAA,IAAA;AAUnC,UAAM,uBAAuB;AAAA,MACzB,CAAC,UAAU;AACP,YAAI,MAAM,cAAc,WAAW,uBAAuB,GAAG;AACzD,oBAAU,IAAI;AAAA,QAClB,WAAW,MAAM,cAAc,WAAW,yBAAyB,GAAG;AAElE,qBAAW,MAAM,cAAc,KAAK;AAAA,QACxC;AACA,6DAAmB;AAAA,MACvB;AAAA,MACA,CAAC,WAAW,YAAY,gBAAgB;AAAA,IAAA;AAG5C,UAAM,eAAe;AAAA,MACjB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,6CAAW;AAAA,MACf;AAAA,MACA,CAAC,YAAY,QAAQ;AAAA,IAAA;AAGzB,UAAM,cAAc;AAAA,MAChB,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU,WAAW,iBAAiB;AAAA,MACtC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,UAAU;AAAA,IAAA;AAGd,QAAI,QAAQ;AAER,aAAO,OAAO,EAAE,GAAG,aAAa,KAAA,GAAQ,GAAG;AAAA,IAC/C,OAAO;AAEH,aAAO,oBAAC,SAAA,EAAO,GAAG,aAAa,IAAA,CAAU;AAAA,IAC7C;AAAA,EACJ;AACJ;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"FormFieldInput.js","sources":["../../../../src/components/FormField/components/FormFieldInput.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback, useLayoutEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { EComponentSize } from \"../../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { DataAttributes } from \"../../../types/CoreTypes\";\nimport { isFilled } from \"./utils\";\nimport styles from \"../styles/FormFieldInput.module.less\";\n\n/** Свойства, передаваемые в рендер-функцию props.render компонента FormFieldInput. */\nexport interface IFormFieldInputProvideProps extends Omit<IFormFieldInputProps, \"render\" | \"size\"> {\n    /** Размер поля из FormFieldContext. */\n    size: EComponentSize;\n}\n\n/** Свойства компонента FormFieldInput. */\nexport interface IFormFieldInputProps extends React.InputHTMLAttributes<HTMLInputElement>, DataAttributes {\n    /**\n     * Рендер-функция, в которую можно передать любой инпут с нужным функционалом (валидация ввода, маска).\n     * Через аргумент props инпуту передаётся нужная стилизация, идентификатор и обработчики событий.\n     */\n    render?: (props: IFormFieldInputProvideProps, ref?: React.Ref<HTMLInputElement>) => React.ReactElement | null;\n}\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/**\n * Компонент, отображающий input.\n *\n * Синхронизирует с FormFieldContext идентификатор элемента ввода, состояния фокуса и заполненности,\n * а также блокируется, когда поле имеет статус EFormFieldStatus.DISABLED.\n */\nexport const FormFieldInput = React.forwardRef<HTMLInputElement, IFormFieldInputProps>(\n    (\n        {\n            id: idProp,\n            className,\n            value,\n            defaultValue,\n            onFocus,\n            onBlur,\n            onAnimationStart,\n            onChange,\n            render,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const { status, setFocused, setTargetId, setFilled, size } = useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"input_\") : idProp), [idProp]);\n        const classNames = clsx(styles.formFieldInput, SIZE_TO_CLASS_NAME_MAP[size], className);\n\n        const syncFilled = useCallback(\n            (nextValue: IFormFieldInputProps[\"value\"]) => {\n                setFilled(isFilled(nextValue));\n            },\n            [setFilled],\n        );\n\n        useLayoutEffect(() => {\n            setTargetId(id);\n        }, [id, setTargetId]);\n\n        // Начальная синхронизация заполненности: defaultValue учитывается только при монтировании,\n        // дальнейшие изменения value обрабатываются эффектом ниже.\n        useLayoutEffect(() => {\n            syncFilled(value ?? defaultValue);\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        useLayoutEffect(() => {\n            if (value !== undefined) {\n                syncFilled(value);\n            }\n        }, [value, syncFilled]);\n\n        const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(true);\n                onFocus?.(event);\n            },\n            [setFocused, syncFilled, onFocus],\n        );\n\n        const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(false);\n                onBlur?.(event);\n            },\n            [setFocused, syncFilled, onBlur],\n        );\n\n        /**\n         * Обработчик начала анимации.\n         *\n         * Текущая реализация необходима для кейсов с автозаполнением:\n         * - Браузер устанавливает значение в поле при загрузке страницы;\n         * - Браузер устанавливает значение в поле при навигации пользователем по сохранённым опциям заполнения.\n         */\n        const handleAnimationStart = useCallback<React.AnimationEventHandler<HTMLInputElement>>(\n            (event) => {\n                if (event.animationName.startsWith(\"autofill-applied-hook\")) {\n                    setFilled(true);\n                } else if (event.animationName.startsWith(\"autofill-cancelled-hook\")) {\n                    // Необходимо проверить, что при отмене автозаполнения, в поле не находится значение.\n                    syncFilled(event.currentTarget.value);\n                }\n                onAnimationStart?.(event);\n            },\n            [setFilled, syncFilled, onAnimationStart],\n        );\n\n        const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                onChange?.(event);\n            },\n            [syncFilled, onChange],\n        );\n\n        const commonProps = {\n            ...restProps,\n            id,\n            className: classNames,\n            value,\n            defaultValue,\n            disabled: status === EFormFieldStatus.DISABLED,\n            onFocus: handleFocus,\n            onBlur: handleBlur,\n            onAnimationStart: handleAnimationStart,\n            onChange: handleChange,\n        };\n\n        if (render) {\n            // Рендер инпута, переданного снаружи.\n            return render({ ...commonProps, size }, ref);\n        }\n\n        // Рендер текстового инпута по умолчанию.\n        return <input {...commonProps} ref={ref} />;\n    },\n);\n\nFormFieldInput.displayName = \"FormFieldInput\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2BA,MAAM,yBAAyB,yBAAyB,MAAM;AAQvD,MAAM,iBAAiB,MAAM;AAAA,EAChC,CACI;AAAA,IACI,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,EAAE,QAAQ,YAAY,aAAa,WAAW,KAAA,IAAS,WAAW,gBAAgB;AACxF,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,QAAQ,IAAI,QAAS,CAAC,MAAM,CAAC;AACvF,UAAM,aAAa,KAAK,OAAO,gBAAgB,uBAAuB,IAAI,GAAG,SAAS;AAEtF,UAAM,aAAa;AAAA,MACf,CAAC,cAA6C;AAC1C,kBAAU,SAAS,SAAS,CAAC;AAAA,MACjC;AAAA,MACA,CAAC,SAAS;AAAA,IAAA;AAGd,oBAAgB,MAAM;AAClB,kBAAY,EAAE;AAAA,IAClB,GAAG,CAAC,IAAI,WAAW,CAAC;AAIpB,oBAAgB,MAAM;AAClB,iBAAW,SAAS,YAAY;AAAA,IAEpC,GAAG,CAAA,CAAE;AAEL,oBAAgB,MAAM;AAClB,UAAI,UAAU,QAAW;AACrB,mBAAW,KAAK;AAAA,MACpB;AAAA,IACJ,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,IAAI;AACf,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,YAAY,YAAY,OAAO;AAAA,IAAA;AAGpC,UAAM,aAAa;AAAA,MACf,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,KAAK;AAChB,yCAAS;AAAA,MACb;AAAA,MACA,CAAC,YAAY,YAAY,MAAM;AAAA,IAAA;AAUnC,UAAM,uBAAuB;AAAA,MACzB,CAAC,UAAU;AACP,YAAI,MAAM,cAAc,WAAW,uBAAuB,GAAG;AACzD,oBAAU,IAAI;AAAA,QAClB,WAAW,MAAM,cAAc,WAAW,yBAAyB,GAAG;AAElE,qBAAW,MAAM,cAAc,KAAK;AAAA,QACxC;AACA,6DAAmB;AAAA,MACvB;AAAA,MACA,CAAC,WAAW,YAAY,gBAAgB;AAAA,IAAA;AAG5C,UAAM,eAAe;AAAA,MACjB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,6CAAW;AAAA,MACf;AAAA,MACA,CAAC,YAAY,QAAQ;AAAA,IAAA;AAGzB,UAAM,cAAc;AAAA,MAChB,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU,WAAW,iBAAiB;AAAA,MACtC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB;AAAA,MAClB,UAAU;AAAA,IAAA;AAGd,QAAI,QAAQ;AAER,aAAO,OAAO,EAAE,GAAG,aAAa,KAAA,GAAQ,GAAG;AAAA,IAC/C;AAGA,WAAO,oBAAC,SAAA,EAAO,GAAG,aAAa,IAAA,CAAU;AAAA,EAC7C;AACJ;AAEA,eAAe,cAAc;"}

package/components/FormField/components/FormFieldLabel.js

@@ -1,17 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo, useLayoutEffect } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { EFormFieldStatus } from "../enums.js";
 import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
-const formFieldLabel = "formFieldLabel__91a0508e";
-const sm = "sm__3d767d74";
-const md = "md__6ba736f0";
-const lg = "lg__6e0b5ad2";
-const floating = "floating__3bcadaef";
-const formFieldLabelText = "formFieldLabelText__7c89e5d9";
-const disabled = "disabled__67a97030";
+const formFieldLabel = "formFieldLabel__176800ce";
+const sm = "sm__7223949b";
+const md = "md__6f61044f";
+const lg = "lg__5881f8f2";
+const floating = "floating__13426262";
+const formFieldLabelText = "formFieldLabelText__e2e0fd61";
+const disabled = "disabled__4261bab8";
 const styles = {
   formFieldLabel,
   sm,
@@ -36,17 +36,16 @@ const FormFieldLabel = React.forwardRef(
       },
       className
     );
-    const stylesLabel = {
-      // Левая позиция элемента. Когда label по-середине инпута, позиция учитывает иконки по краям, когда сверху, позиция на все ширину поля ввода.
+    const labelStyle = {
+      // Позиции по краям учитывают ширину префикса и постфикса, чтобы лейбл не перекрывался иконками.
       left: prefixWidth || TARGET_PADDING_X_DEFAULT,
-      // Правая позиция элемента. Когда label по-середине инпута, позиция учитывает иконки по краям, когда сверху, позиция на все ширину поля ввода.
       right: postfixWidth || TARGET_PADDING_X_DEFAULT,
       ...style
     };
     useLayoutEffect(() => {
       setLabelId(id);
     }, [id, setLabelId]);
-    return /* @__PURE__ */ jsx("label", { ...restProps, id, className: classNames, htmlFor: targetId, style: stylesLabel, ref, children: /* @__PURE__ */ jsx("span", { className: styles.formFieldLabelText, children }) });
+    return /* @__PURE__ */ jsx("label", { ...restProps, id, className: classNames, htmlFor: targetId, style: labelStyle, ref, children: /* @__PURE__ */ jsx("span", { className: styles.formFieldLabelText, children }) });
   }
 );
 FormFieldLabel.displayName = "FormFieldLabel";

package/components/FormField/components/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../../../../src/components/FormField/components/FormFieldLabel.tsx"],"sourcesContent":["import React, { useContext, useMemo, useLayoutEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { TARGET_PADDING_X_DEFAULT } from \"../consts\";\nimport styles from \"../styles/FormFieldLabel.module.less\";\n\n/** Свойства компонента FormFieldLabel. */\nexport interface IFormFieldLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, \"htmlFor\"> {\n    /** Label отображается в уменьшенном виде над полем ввода/селектом. */\n    floating?: boolean;\n}\n\n// Соответствие размера имени класса.\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Лейбл поля ввода/селекта. Отображается по-середине поля ввода, когда инпут/селект имеет значение или фокус, перемещается в верхний левый угол. */\nexport const FormFieldLabel = React.forwardRef<HTMLLabelElement, IFormFieldLabelProps>(\n    ({ children, id: idProp, className, style, floating: floatingProp, ...restProps }, ref) => {\n        const { targetId, size, status, filled, active, prefixWidth, postfixWidth, setLabelId } =\n            useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"label_\") : idProp), [idProp]);\n        // Label отображается в уменьшенном виде над полем ввода/селектом.\n        const floating = floatingProp ?? (filled || active);\n\n        const classNames = clsx(\n            styles.formFieldLabel,\n            SIZE_TO_CLASS_NAME_MAP[size],\n            {\n                [styles.floating]: floating,\n                [styles.disabled]: status === EFormFieldStatus.DISABLED,\n            },\n            className,\n        );\n\n        const stylesLabel = {\n            // Левая позиция элемента. Когда label по-середине инпута, позиция учитывает иконки по краям, когда сверху, позиция на все ширину поля ввода.\n            left: prefixWidth || TARGET_PADDING_X_DEFAULT,\n            // Правая позиция элемента. Когда label по-середине инпута, позиция учитывает иконки по краям, когда сверху, позиция на все ширину поля ввода.\n            right: postfixWidth || TARGET_PADDING_X_DEFAULT,\n            ...style,\n        };\n\n        useLayoutEffect(() => {\n            setLabelId(id);\n        }, [id, setLabelId]);\n\n        return (\n            <label {...restProps} id={id} className={classNames} htmlFor={targetId} style={stylesLabel} ref={ref}>\n                <span className={styles.formFieldLabelText}>{children}</span>\n            </label>\n        );\n    },\n);\n\nFormFieldLabel.displayName = \"FormFieldLabel\";\n"],"names":["floating"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,yBAAyB,yBAAyB,MAAM;AAGvD,MAAM,iBAAiB,MAAM;AAAA,EAChC,CAAC,EAAE,UAAU,IAAI,QAAQ,WAAW,OAAO,UAAU,cAAc,GAAG,UAAA,GAAa,QAAQ;AACvF,UAAM,EAAE,UAAU,MAAM,QAAQ,QAAQ,QAAQ,aAAa,cAAc,eACvE,WAAW,gBAAgB;AAC/B,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,QAAQ,IAAI,QAAS,CAAC,MAAM,CAAC;AAEvF,UAAMA,YAAW,iBAAiB,UAAU;AAE5C,UAAM,aAAa;AAAA,MACf,OAAO;AAAA,MACP,uBAAuB,IAAI;AAAA,MAC3B;AAAA,QACI,CAAC,OAAO,QAAQ,GAAGA;AAAA,QACnB,CAAC,OAAO,QAAQ,GAAG,WAAW,iBAAiB;AAAA,MAAA;AAAA,MAEnD;AAAA,IAAA;AAGJ,UAAM,cAAc;AAAA;AAAA,MAEhB,MAAM,eAAe;AAAA;AAAA,MAErB,OAAO,gBAAgB;AAAA,MACvB,GAAG;AAAA,IAAA;AAGP,oBAAgB,MAAM;AAClB,iBAAW,EAAE;AAAA,IACjB,GAAG,CAAC,IAAI,UAAU,CAAC;AAEnB,+BACK,SAAA,EAAO,GAAG,WAAW,IAAQ,WAAW,YAAY,SAAS,UAAU,OAAO,aAAa,KACxF,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,oBAAqB,UAAS,GAC1D;AAAA,EAER;AACJ;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../../../../src/components/FormField/components/FormFieldLabel.tsx"],"sourcesContent":["import React, { useContext, useMemo, useLayoutEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { TARGET_PADDING_X_DEFAULT } from \"../consts\";\nimport styles from \"../styles/FormFieldLabel.module.less\";\n\n/** Свойства компонента FormFieldLabel. */\nexport interface IFormFieldLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, \"htmlFor\"> {\n    /** Label отображается в уменьшенном виде над полем ввода/селектом. Если значение не задано, вычисляется как filled || active из FormFieldContext. */\n    floating?: boolean;\n}\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/**\n * Лейбл поля ввода/селекта.\n *\n * Отображается по середине поля ввода; когда инпут/селект имеет значение или фокус,\n * перемещается в верхний левый угол. Атрибут htmlFor берётся из FormFieldContext (targetId),\n * собственный идентификатор публикуется в контекст как labelId.\n */\nexport const FormFieldLabel = React.forwardRef<HTMLLabelElement, IFormFieldLabelProps>(\n    ({ children, id: idProp, className, style, floating: floatingProp, ...restProps }, ref) => {\n        const { targetId, size, status, filled, active, prefixWidth, postfixWidth, setLabelId } =\n            useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"label_\") : idProp), [idProp]);\n        // Label отображается в уменьшенном виде над полем ввода/селектом.\n        const floating = floatingProp ?? (filled || active);\n\n        const classNames = clsx(\n            styles.formFieldLabel,\n            SIZE_TO_CLASS_NAME_MAP[size],\n            {\n                [styles.floating]: floating,\n                [styles.disabled]: status === EFormFieldStatus.DISABLED,\n            },\n            className,\n        );\n\n        const labelStyle = {\n            // Позиции по краям учитывают ширину префикса и постфикса, чтобы лейбл не перекрывался иконками.\n            left: prefixWidth || TARGET_PADDING_X_DEFAULT,\n            right: postfixWidth || TARGET_PADDING_X_DEFAULT,\n            ...style,\n        };\n\n        useLayoutEffect(() => {\n            setLabelId(id);\n        }, [id, setLabelId]);\n\n        return (\n            <label {...restProps} id={id} className={classNames} htmlFor={targetId} style={labelStyle} ref={ref}>\n                <span className={styles.formFieldLabelText}>{children}</span>\n            </label>\n        );\n    },\n);\n\nFormFieldLabel.displayName = \"FormFieldLabel\";\n"],"names":["floating"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,yBAAyB,yBAAyB,MAAM;AASvD,MAAM,iBAAiB,MAAM;AAAA,EAChC,CAAC,EAAE,UAAU,IAAI,QAAQ,WAAW,OAAO,UAAU,cAAc,GAAG,UAAA,GAAa,QAAQ;AACvF,UAAM,EAAE,UAAU,MAAM,QAAQ,QAAQ,QAAQ,aAAa,cAAc,eACvE,WAAW,gBAAgB;AAC/B,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,QAAQ,IAAI,QAAS,CAAC,MAAM,CAAC;AAEvF,UAAMA,YAAW,iBAAiB,UAAU;AAE5C,UAAM,aAAa;AAAA,MACf,OAAO;AAAA,MACP,uBAAuB,IAAI;AAAA,MAC3B;AAAA,QACI,CAAC,OAAO,QAAQ,GAAGA;AAAA,QACnB,CAAC,OAAO,QAAQ,GAAG,WAAW,iBAAiB;AAAA,MAAA;AAAA,MAEnD;AAAA,IAAA;AAGJ,UAAM,aAAa;AAAA;AAAA,MAEf,MAAM,eAAe;AAAA,MACrB,OAAO,gBAAgB;AAAA,MACvB,GAAG;AAAA,IAAA;AAGP,oBAAgB,MAAM;AAClB,iBAAW,EAAE;AAAA,IACjB,GAAG,CAAC,IAAI,UAAU,CAAC;AAEnB,+BACK,SAAA,EAAO,GAAG,WAAW,IAAQ,WAAW,YAAY,SAAS,UAAU,OAAO,YAAY,KACvF,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,oBAAqB,UAAS,GAC1D;AAAA,EAER;AACJ;AAEA,eAAe,cAAc;"}

package/components/FormField/components/FormFieldMaskedInput.js

@@ -1,17 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useContext, useEffect, useCallback } from "react";
-import { c as clsx, n as MaskedInputTextMask, o as reactTextMaskExports } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx, m as MaskedInputTextMask, n as reactTextMaskExports } from "../../../chunks/vendor-BtZO8a0z.js";
 import { presets } from "./FormFieldMaskedInputPresets.js";
 import { FormFieldInput } from "./FormFieldInput.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__def4735a";
-const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__f5db69ee";
-const sm = "sm__3d767d74";
-const md = "md__6ba736f0";
-const lg = "lg__6e0b5ad2";
-const transparentText = "transparentText__62e83948";
+const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__9ca10b7e";
+const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__857ddebc";
+const sm = "sm__7223949b";
+const md = "md__6f61044f";
+const lg = "lg__5881f8f2";
+const transparentText = "transparentText__159e51b1";
 const styles = {
   formFieldMaskedInputWrapper,
   formFieldMaskedInputPlaceholder,