@sberbusiness/triplex-next 1.40.0 → 1.41.1

package/components/FormField/FormField.js

@@ -6,34 +6,34 @@ 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__9d46e72b";
-const sm = "sm__96182240";
-const md = "md__38a870b3";
-const lg = "lg__67d54ce0";
-const active = "active__4e86497a";
-const disabled = "disabled__3841bffa";
-const error = "error__58eeaf1b";
-const warning = "warning__42635f65";
-const filled = "filled__13e672a5";
+const formField = "formField__2956135c";
+const sm = "sm__5504958e";
+const md = "md__479d8540";
+const lg = "lg__3149e337";
+const active = "active__53079675";
+const disabled = "disabled__de68bddb";
+const error = "error__7b844d93";
+const warning = "warning__14e17bf0";
+const filled = "filled__4a4e34ab";
 const styles = {
   formField,
   sm,
   md,
   lg,
-  "default": "default__e3e2c9db",
+  "default": "default__8e3763fa",
   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__default.forwardRef(
   ({
     children,
@@ -50,6 +50,7 @@ const FormField = React__default.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__default.forwardRef(
         prefixWidth,
         filled: filled2,
         focused,
-        active: active2 || focused,
+        active: isActive,
         setTargetId,
         setLabelId,
         setPostfixWidth,
@@ -68,22 +69,22 @@ const FormField = React__default.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": "1.40.0",
+        "data-tx": "1.41.1",
         style: { paddingLeft: prefixWidth, paddingRight: postfixWidth, ...style },
         ...htmlDivAttributes,
         ref,
@@ -94,7 +95,6 @@ const FormField = React__default.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 React.HTMLAttributes<HTMLDivElement>, 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":["React","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,YAAYA,eAAM;AAAA,EAC3B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB,SAAS,iBAAiB;AAAA,IAC1B,QAAAC,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 React.HTMLAttributes<HTMLDivElement>, 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":["React","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,YAAYA,eAAM;AAAA,EAC3B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB,SAAS,iBAAiB;AAAA,IAC1B,QAAAC,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":["React"],"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,mBAAmBA,eAAM,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":["React"],"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,mBAAmBA,eAAM,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":["React"],"mappings":";AASO,MAAM,qCAAmE;AAAA,EAC5E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAC3B;AAKO,MAAM,8BAA8BA,eAAM;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":["React"],"mappings":";AAWO,MAAM,qCAAmE;AAAA,EAC5E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAC3B;AAKO,MAAM,8BAA8BA,eAAM;AAAA,EAC7C;AACJ;"}

package/components/FormField/components/FormFieldClear.js

@@ -3,7 +3,7 @@ import React__default, { useCallback } from "react";
 import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { ButtonIcon } from "../../Button/ButtonIcon.js";
-const formFieldClear = "formFieldClear__ce59cc53";
+const formFieldClear = "formFieldClear__086e057a";
 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":["React"],"mappings":";;;;;;;;;AAUO,MAAM,iBAAiBA,eAAM;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":["React"],"mappings":";;;;;;;;;AAcO,MAAM,iBAAiBA,eAAM;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-CtuAQuEN.js";
 import { FormFieldDescriptionContext } from "../FormFieldDescriptionContext.js";
-const formFieldCounter = "formFieldCounter__15faab2b";
+const formFieldCounter = "formFieldCounter__90755650";
 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 { useState, useMemo } from "react";
 import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { FormFieldDescriptionContext } from "../FormFieldDescriptionContext.js";
-const formFieldDescription = "formFieldDescription__83bce07e";
-const withCounter = "withCounter__41bd4fff";
+const formFieldDescription = "formFieldDescription__fadbca7d";
+const withCounter = "withCounter__f9d5dd7d";
 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

@@ -5,17 +5,17 @@ import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { isFilled } from "./utils.js";
-const formFieldInput = "formFieldInput__dfbd858e";
-const sm = "sm__96182240";
-const md = "md__38a870b3";
-const lg = "lg__67d54ce0";
+const formFieldInput = "formFieldInput__3284aeb2";
+const sm = "sm__5504958e";
+const md = "md__479d8540";
+const lg = "lg__3149e337";
 const styles = {
   formFieldInput,
   sm,
   md,
   lg
 };
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const FormFieldInput = React__default.forwardRef(
   ({
     id: idProp,
@@ -31,7 +31,7 @@ const FormFieldInput = React__default.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__default.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.ReactNode;\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":["React"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,iBAAiBA,eAAM;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.ReactNode;\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":["React"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,MAAM,yBAAyB,yBAAyB,MAAM;AAQvD,MAAM,iBAAiBA,eAAM;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

@@ -5,13 +5,13 @@ 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__14671cb4";
-const sm = "sm__96182240";
-const md = "md__38a870b3";
-const lg = "lg__67d54ce0";
-const floating = "floating__d44c4a15";
-const formFieldLabelText = "formFieldLabelText__87c3f795";
-const disabled = "disabled__3841bffa";
+const formFieldLabel = "formFieldLabel__a5a6b402";
+const sm = "sm__5504958e";
+const md = "md__479d8540";
+const lg = "lg__3149e337";
+const floating = "floating__a3366934";
+const formFieldLabelText = "formFieldLabelText__fe3c2f25";
+const disabled = "disabled__de68bddb";
 const styles = {
   formFieldLabel,
   sm,
@@ -36,17 +36,16 @@ const FormFieldLabel = React__default.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":["React","floating"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,yBAAyB,yBAAyB,MAAM;AAGvD,MAAM,iBAAiBA,eAAM;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,UAAMC,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":["React","floating"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,yBAAyB,yBAAyB,MAAM;AASvD,MAAM,iBAAiBA,eAAM;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,UAAMC,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

@@ -6,12 +6,12 @@ import { FormFieldInput } from "./FormFieldInput.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__9524aa21";
-const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__81f0aa58";
-const sm = "sm__96182240";
-const md = "md__38a870b3";
-const lg = "lg__67d54ce0";
-const transparentText = "transparentText__1845aacc";
+const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__a69cc5e4";
+const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__8ba86cd9";
+const sm = "sm__5504958e";
+const md = "md__479d8540";
+const lg = "lg__3149e337";
+const transparentText = "transparentText__c81c483b";
 const styles = {
   formFieldMaskedInputWrapper,
   formFieldMaskedInputPlaceholder,

package/components/FormField/components/FormFieldPostfix.js

@@ -1,41 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useContext, useRef, useEffect } from "react";
+import React__default, { useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { FormFieldContext } from "../FormFieldContext.js";
-import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
-const formFieldPostfix = "formFieldPostfix__456b4f59";
+import { useFormFieldAffixWidth } from "./useFormFieldAffixWidth.js";
+const formFieldPostfix = "formFieldPostfix__06266a02";
 const styles = {
   formFieldPostfix
 };
 const FormFieldPostfix = React__default.forwardRef(
   ({ children, className, ...restProps }, ref) => {
     const { setPostfixWidth } = useContext(FormFieldContext);
-    const innerRef = useRef();
-    const classNames = clsx(styles.formFieldPostfix, className);
-    const setRef = (instance) => {
-      innerRef.current = instance;
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
-      }
-    };
-    useEffect(() => {
-      const element = innerRef.current;
-      if (!element) {
-        return;
-      }
-      const resizeObserver = new ResizeObserver(([entry]) => {
-        const width = entry.target.getBoundingClientRect().width;
-        setPostfixWidth((prevWidth) => prevWidth !== width ? width : prevWidth);
-      });
-      resizeObserver.observe(element);
-      return () => {
-        resizeObserver.disconnect();
-        setPostfixWidth(TARGET_PADDING_X_DEFAULT);
-      };
-    }, [setPostfixWidth]);
-    return /* @__PURE__ */ jsx("span", { className: classNames, ...restProps, ref: setRef, children });
+    const setRef = useFormFieldAffixWidth(setPostfixWidth, ref);
+    return /* @__PURE__ */ jsx("span", { className: clsx(styles.formFieldPostfix, className), ...restProps, ref: setRef, children });
   }
 );
 FormFieldPostfix.displayName = "FormFieldPostfix";

package/components/FormField/components/FormFieldPostfix.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldPostfix.js","sources":["../../../../src/components/FormField/components/FormFieldPostfix.tsx"],"sourcesContent":["import React, { useContext, useRef, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { TARGET_PADDING_X_DEFAULT } from \"../consts\";\nimport styles from \"../styles/FormFieldPostfix.module.less\";\n\n/** Свойства компонента FormFieldPostfix. */\nexport interface IFormFieldPostfixProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/** Контейнер элементов, отображающихся в правой части FormField. */\nexport const FormFieldPostfix = React.forwardRef<HTMLSpanElement, IFormFieldPostfixProps>(\n    ({ children, className, ...restProps }, ref) => {\n        const { setPostfixWidth } = useContext(FormFieldContext);\n        const innerRef = useRef<HTMLSpanElement | null>();\n        const classNames = clsx(styles.formFieldPostfix, className);\n\n        const setRef = (instance: HTMLSpanElement | null) => {\n            innerRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        useEffect(() => {\n            const element = innerRef.current;\n            if (!element) {\n                return;\n            }\n\n            const resizeObserver = new ResizeObserver(([entry]) => {\n                const width = entry.target.getBoundingClientRect().width;\n                setPostfixWidth((prevWidth) => (prevWidth !== width ? width : prevWidth));\n            });\n\n            resizeObserver.observe(element);\n            return () => {\n                resizeObserver.disconnect();\n                setPostfixWidth(TARGET_PADDING_X_DEFAULT);\n            };\n        }, [setPostfixWidth]);\n\n        return (\n            <span className={classNames} {...restProps} ref={setRef}>\n                {children}\n            </span>\n        );\n    },\n);\n\nFormFieldPostfix.displayName = \"FormFieldPostfix\";\n"],"names":["React"],"mappings":";;;;;;;;;AAUO,MAAM,mBAAmBA,eAAM;AAAA,EAClC,CAAC,EAAE,UAAU,WAAW,GAAG,UAAA,GAAa,QAAQ;AAC5C,UAAM,EAAE,gBAAA,IAAoB,WAAW,gBAAgB;AACvD,UAAM,WAAW,OAAA;AACjB,UAAM,aAAa,KAAK,OAAO,kBAAkB,SAAS;AAE1D,UAAM,SAAS,CAAC,aAAqC;AACjD,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,YAAY;AAC3B,YAAI,QAAQ;AAAA,MAChB,WAAW,KAAK;AACZ,YAAI,UAAU;AAAA,MAClB;AAAA,IACJ;AAEA,cAAU,MAAM;AACZ,YAAM,UAAU,SAAS;AACzB,UAAI,CAAC,SAAS;AACV;AAAA,MACJ;AAEA,YAAM,iBAAiB,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AACnD,cAAM,QAAQ,MAAM,OAAO,sBAAA,EAAwB;AACnD,wBAAgB,CAAC,cAAe,cAAc,QAAQ,QAAQ,SAAU;AAAA,MAC5E,CAAC;AAED,qBAAe,QAAQ,OAAO;AAC9B,aAAO,MAAM;AACT,uBAAe,WAAA;AACf,wBAAgB,wBAAwB;AAAA,MAC5C;AAAA,IACJ,GAAG,CAAC,eAAe,CAAC;AAEpB,WACI,oBAAC,UAAK,WAAW,YAAa,GAAG,WAAW,KAAK,QAC5C,UACL;AAAA,EAER;AACJ;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"FormFieldPostfix.js","sources":["../../../../src/components/FormField/components/FormFieldPostfix.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { useFormFieldAffixWidth } from \"./useFormFieldAffixWidth\";\nimport styles from \"../styles/FormFieldPostfix.module.less\";\n\n/** Свойства компонента FormFieldPostfix. */\nexport interface IFormFieldPostfixProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/**\n * Контейнер элементов, отображающихся в правой части FormField.\n *\n * Измеряет собственную ширину и передаёт её в FormFieldContext — поле использует это\n * значение как правый внутренний отступ, чтобы содержимое не перекрывалось постфиксом.\n */\nexport const FormFieldPostfix = React.forwardRef<HTMLSpanElement, IFormFieldPostfixProps>(\n    ({ children, className, ...restProps }, ref) => {\n        const { setPostfixWidth } = useContext(FormFieldContext);\n        const setRef = useFormFieldAffixWidth(setPostfixWidth, ref);\n\n        return (\n            <span className={clsx(styles.formFieldPostfix, className)} {...restProps} ref={setRef}>\n                {children}\n            </span>\n        );\n    },\n);\n\nFormFieldPostfix.displayName = \"FormFieldPostfix\";\n"],"names":["React"],"mappings":";;;;;;;;;AAeO,MAAM,mBAAmBA,eAAM;AAAA,EAClC,CAAC,EAAE,UAAU,WAAW,GAAG,UAAA,GAAa,QAAQ;AAC5C,UAAM,EAAE,gBAAA,IAAoB,WAAW,gBAAgB;AACvD,UAAM,SAAS,uBAAuB,iBAAiB,GAAG;AAE1D,WACI,oBAAC,QAAA,EAAK,WAAW,KAAK,OAAO,kBAAkB,SAAS,GAAI,GAAG,WAAW,KAAK,QAC1E,SAAA,CACL;AAAA,EAER;AACJ;AAEA,iBAAiB,cAAc;"}

package/components/FormField/components/FormFieldPrefix.js

@@ -1,41 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useContext, useRef, useEffect } from "react";
+import React__default, { useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { FormFieldContext } from "../FormFieldContext.js";
-import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
-const formFieldPrefix = "formFieldPrefix__7bb03e1e";
+import { useFormFieldAffixWidth } from "./useFormFieldAffixWidth.js";
+const formFieldPrefix = "formFieldPrefix__a1611d20";
 const styles = {
   formFieldPrefix
 };
 const FormFieldPrefix = React__default.forwardRef(
   ({ children, className, ...restProps }, ref) => {
     const { setPrefixWidth } = useContext(FormFieldContext);
-    const innerRef = useRef();
-    const classNames = clsx(styles.formFieldPrefix, className);
-    const setRef = (instance) => {
-      innerRef.current = instance;
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
-      }
-    };
-    useEffect(() => {
-      const element = innerRef.current;
-      if (!element) {
-        return;
-      }
-      const resizeObserver = new ResizeObserver(([entry]) => {
-        const width = entry.target.getBoundingClientRect().width;
-        setPrefixWidth((prevWidth) => prevWidth !== width ? width : prevWidth);
-      });
-      resizeObserver.observe(element);
-      return () => {
-        resizeObserver.disconnect();
-        setPrefixWidth(TARGET_PADDING_X_DEFAULT);
-      };
-    }, [setPrefixWidth]);
-    return /* @__PURE__ */ jsx("span", { className: classNames, ...restProps, ref: setRef, children });
+    const setRef = useFormFieldAffixWidth(setPrefixWidth, ref);
+    return /* @__PURE__ */ jsx("span", { className: clsx(styles.formFieldPrefix, className), ...restProps, ref: setRef, children });
   }
 );
 FormFieldPrefix.displayName = "FormFieldPrefix";

package/components/FormField/components/FormFieldPrefix.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldPrefix.js","sources":["../../../../src/components/FormField/components/FormFieldPrefix.tsx"],"sourcesContent":["import React, { useContext, useRef, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { TARGET_PADDING_X_DEFAULT } from \"../consts\";\nimport styles from \"../styles/FormFieldPrefix.module.less\";\n\n/** Свойства компонента FormFieldPrefix. */\nexport interface IFormFieldPrefixProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/** Контейнер элементов, отображающихся в левой части FormField. */\nexport const FormFieldPrefix = React.forwardRef<HTMLSpanElement, IFormFieldPrefixProps>(\n    ({ children, className, ...restProps }, ref) => {\n        const { setPrefixWidth } = useContext(FormFieldContext);\n        const innerRef = useRef<HTMLSpanElement | null>();\n        const classNames = clsx(styles.formFieldPrefix, className);\n\n        const setRef = (instance: HTMLSpanElement | null) => {\n            innerRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        useEffect(() => {\n            const element = innerRef.current;\n            if (!element) {\n                return;\n            }\n\n            const resizeObserver = new ResizeObserver(([entry]) => {\n                const width = entry.target.getBoundingClientRect().width;\n                setPrefixWidth((prevWidth) => (prevWidth !== width ? width : prevWidth));\n            });\n\n            resizeObserver.observe(element);\n            return () => {\n                resizeObserver.disconnect();\n                setPrefixWidth(TARGET_PADDING_X_DEFAULT);\n            };\n        }, [setPrefixWidth]);\n\n        return (\n            <span className={classNames} {...restProps} ref={setRef}>\n                {children}\n            </span>\n        );\n    },\n);\n\nFormFieldPrefix.displayName = \"FormFieldPrefix\";\n"],"names":["React"],"mappings":";;;;;;;;;AAUO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CAAC,EAAE,UAAU,WAAW,GAAG,UAAA,GAAa,QAAQ;AAC5C,UAAM,EAAE,eAAA,IAAmB,WAAW,gBAAgB;AACtD,UAAM,WAAW,OAAA;AACjB,UAAM,aAAa,KAAK,OAAO,iBAAiB,SAAS;AAEzD,UAAM,SAAS,CAAC,aAAqC;AACjD,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,YAAY;AAC3B,YAAI,QAAQ;AAAA,MAChB,WAAW,KAAK;AACZ,YAAI,UAAU;AAAA,MAClB;AAAA,IACJ;AAEA,cAAU,MAAM;AACZ,YAAM,UAAU,SAAS;AACzB,UAAI,CAAC,SAAS;AACV;AAAA,MACJ;AAEA,YAAM,iBAAiB,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AACnD,cAAM,QAAQ,MAAM,OAAO,sBAAA,EAAwB;AACnD,uBAAe,CAAC,cAAe,cAAc,QAAQ,QAAQ,SAAU;AAAA,MAC3E,CAAC;AAED,qBAAe,QAAQ,OAAO;AAC9B,aAAO,MAAM;AACT,uBAAe,WAAA;AACf,uBAAe,wBAAwB;AAAA,MAC3C;AAAA,IACJ,GAAG,CAAC,cAAc,CAAC;AAEnB,WACI,oBAAC,UAAK,WAAW,YAAa,GAAG,WAAW,KAAK,QAC5C,UACL;AAAA,EAER;AACJ;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"FormFieldPrefix.js","sources":["../../../../src/components/FormField/components/FormFieldPrefix.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { useFormFieldAffixWidth } from \"./useFormFieldAffixWidth\";\nimport styles from \"../styles/FormFieldPrefix.module.less\";\n\n/** Свойства компонента FormFieldPrefix. */\nexport interface IFormFieldPrefixProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n/**\n * Контейнер элементов, отображающихся в левой части FormField.\n *\n * Измеряет собственную ширину и передаёт её в FormFieldContext — поле использует это\n * значение как левый внутренний отступ, чтобы содержимое не перекрывалось префиксом.\n */\nexport const FormFieldPrefix = React.forwardRef<HTMLSpanElement, IFormFieldPrefixProps>(\n    ({ children, className, ...restProps }, ref) => {\n        const { setPrefixWidth } = useContext(FormFieldContext);\n        const setRef = useFormFieldAffixWidth(setPrefixWidth, ref);\n\n        return (\n            <span className={clsx(styles.formFieldPrefix, className)} {...restProps} ref={setRef}>\n                {children}\n            </span>\n        );\n    },\n);\n\nFormFieldPrefix.displayName = \"FormFieldPrefix\";\n"],"names":["React"],"mappings":";;;;;;;;;AAeO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CAAC,EAAE,UAAU,WAAW,GAAG,UAAA,GAAa,QAAQ;AAC5C,UAAM,EAAE,eAAA,IAAmB,WAAW,gBAAgB;AACtD,UAAM,SAAS,uBAAuB,gBAAgB,GAAG;AAEzD,WACI,oBAAC,QAAA,EAAK,WAAW,KAAK,OAAO,iBAAiB,SAAS,GAAI,GAAG,WAAW,KAAK,QACzE,SAAA,CACL;AAAA,EAER;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/FormField/components/FormFieldTarget.js

@@ -4,14 +4,14 @@ import { u as uniqueId, c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const formFieldTarget = "formFieldTarget__a7adcea2";
-const sm = "sm__96182240";
-const md = "md__38a870b3";
-const lg = "lg__67d54ce0";
-const placeholder = "placeholder__ad593edc";
-const disabled = "disabled__3841bffa";
-const placeholderWrapper = "placeholderWrapper__861c05c7";
-const active = "active__4e86497a";
+const formFieldTarget = "formFieldTarget__e0bc407b";
+const sm = "sm__5504958e";
+const md = "md__479d8540";
+const lg = "lg__3149e337";
+const placeholder = "placeholder__761b6d9b";
+const disabled = "disabled__de68bddb";
+const placeholderWrapper = "placeholderWrapper__0f9d860b";
+const active = "active__53079675";
 const styles = {
   formFieldTarget,
   sm,

package/components/FormField/components/FormFieldTextarea.js

@@ -5,10 +5,10 @@ import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { isFilled } from "./utils.js";
-const formFieldTextarea = "formFieldTextarea__03394e74";
-const sm = "sm__96182240";
-const md = "md__38a870b3";
-const lg = "lg__67d54ce0";
+const formFieldTextarea = "formFieldTextarea__6d72112c";
+const sm = "sm__5504958e";
+const md = "md__479d8540";
+const lg = "lg__3149e337";
 const styles = {
   formFieldTextarea,
   sm,