@sberbusiness/triplex-next 1.34.0 → 1.35.1

package/components/FormField/components/FormFieldMaskedInput.js

@@ -1,101 +1,165 @@
-import { jsxs as B, jsx as m } from "react/jsx-runtime";
-import { useState as $, useRef as L, useContext as N, useEffect as O, useCallback as U } from "react";
-import { c as F, n as q, o as p } from "../../../chunks/vendor-D5cfSbgz.js";
-import { presets as G } from "./FormFieldMaskedInputPresets.js";
-import { s as H, F as J } from "../../../chunks/FormFieldInput-DFQ9utC5.js";
-import { FormFieldContext as K } from "../FormFieldContext.js";
-import { EFormFieldStatus as V } from "../enums.js";
-const Q = "formFieldMaskedInputWrapper__4a62c7f0", X = "formFieldMaskedInputPlaceholder__b0121f15", Y = "formFieldMaskedInput__5c8d62b8", u = {
-  formFieldMaskedInputWrapper: Q,
-  formFieldMaskedInputPlaceholder: X,
-  "size-sm": "size-sm__3ce585f9",
-  "size-md": "size-md__b1257c59",
-  "size-lg": "size-lg__29157d77",
-  formFieldMaskedInput: Y
-}, c = ({
-  className: I,
-  forwardedRef: f,
-  mask: o,
-  onChange: d,
-  placeholder: g,
-  placeholderChar: n = "0",
-  placeholderMask: l,
-  value: s,
-  ...M
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useContext, useEffect, useCallback } from "react";
+import { c as clsx, n as MaskedInputTextMask, o as reactTextMaskExports } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { presets } from "./FormFieldMaskedInputPresets.js";
+import { s as stylesFormFieldInput, F as FormFieldInput } from "../../../chunks/FormFieldInput-B1sTDP0Z.js";
+import { FormFieldContext } from "../FormFieldContext.js";
+import { EFormFieldStatus } from "../enums.js";
+const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__afa7e4f4";
+const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__12f492b7";
+const formFieldMaskedInput = "formFieldMaskedInput__a2a8b428";
+const styles = {
+  formFieldMaskedInputWrapper,
+  formFieldMaskedInputPlaceholder,
+  "size-sm": "size-sm__47355c10",
+  "size-md": "size-md__f241306d",
+  "size-lg": "size-lg__13e0f98b",
+  formFieldMaskedInput
+};
+const FormFieldMaskedInput = ({
+  className,
+  forwardedRef,
+  mask,
+  onChange,
+  placeholder,
+  placeholderChar = "0",
+  placeholderMask,
+  value,
+  ...restProps
 }) => {
-  const [x, y] = $(""), a = L(!1), { filled: z, focused: b, size: k, status: _ } = N(K);
-  O(() => {
-    y((() => {
-      let t = [];
-      if (s) {
-        const { conformedValue: i } = p.conformToMask(s.toString(), o, { guide: !0, placeholderChar: n });
-        for (let r = 0; r < o.length; r++)
-          typeof o[r] == "string" ? t[r] = i[r] : i[r] === n && !s.toString()[r] ? t[r] = (l == null ? void 0 : l[r]) || n : t[r] = i[r];
-      } else if (l)
-        t = l.split("");
-      else {
-        const { conformedValue: i } = p.conformToMask("", o, { guide: !0, placeholderChar: n });
-        t = i.split("");
+  const [placeholderValue, setPlaceholderValue] = useState("");
+  const pasted = useRef(false);
+  const { filled, focused, size, status } = useContext(FormFieldContext);
+  useEffect(() => {
+    const calculatePlaceholderValue = () => {
+      let nextPlaceholderValue = [];
+      if (!value) {
+        if (placeholderMask) {
+          nextPlaceholderValue = placeholderMask.split("");
+        } else {
+          const { conformedValue } = reactTextMaskExports.conformToMask("", mask, { guide: true, placeholderChar });
+          nextPlaceholderValue = conformedValue.split("");
+        }
+      } else {
+        const { conformedValue } = reactTextMaskExports.conformToMask(value.toString(), mask, { guide: true, placeholderChar });
+        for (let i = 0; i < mask.length; i++) {
+          if (typeof mask[i] === "string") {
+            nextPlaceholderValue[i] = conformedValue[i];
+          } else {
+            if (conformedValue[i] === placeholderChar && !value.toString()[i]) {
+              nextPlaceholderValue[i] = (placeholderMask == null ? void 0 : placeholderMask[i]) || placeholderChar;
+            } else {
+              nextPlaceholderValue[i] = conformedValue[i];
+            }
+          }
+        }
+      }
+      return nextPlaceholderValue.join("");
+    };
+    setPlaceholderValue(calculatePlaceholderValue());
+  }, [value, mask, placeholderChar, placeholderMask]);
+  const handleChange = useCallback(
+    (event) => {
+      const { value: nextValue } = event.target;
+      pasted.current = false;
+      if (value !== nextValue) {
+        onChange == null ? void 0 : onChange(event);
       }
-      return t.join("");
-    })());
-  }, [s, o, n, l]);
-  const E = U(
-    (e) => {
-      const { value: t } = e.target;
-      a.current = !1, s !== t && (d == null || d(e));
     },
-    [s, d]
-  ), S = () => {
-    a.current = !0;
-  }, T = (e, t) => o === c.presets.masks.phone ? e.length ? P(t.rawValue) : e : o === c.presets.masks.swiftCode ? e.toUpperCase() : e, P = (e) => {
-    let t = [];
-    if (a.current) {
-      let i = /^[78]((\D*\d)*)/;
-      e = e.replace(i, "+7 ($1"), i = /^\d7/, e = e.replace(i, (r) => (t = Array.from("+7 (").map((Z, A) => A), `+7 (${r}`));
-    } else (e === "7" || e === "8") && (e = "+7 (");
+    [value, onChange]
+  );
+  const handlePaste = () => {
+    pasted.current = true;
+  };
+  const pipe = (conformedValue, config) => {
+    if (mask === FormFieldMaskedInput.presets.masks.phone) {
+      if (!conformedValue.length) {
+        return conformedValue;
+      }
+      return phonePipe(config.rawValue);
+    } else if (mask === FormFieldMaskedInput.presets.masks.swiftCode) {
+      return conformedValue.toUpperCase();
+    }
+    return conformedValue;
+  };
+  const phonePipe = (text) => {
+    let indexesOfPipedChars = [];
+    if (pasted.current) {
+      let regEx = /^[78]((\D*\d)*)/;
+      text = text.replace(regEx, "+7 ($1");
+      regEx = /^\d7/;
+      text = text.replace(regEx, (match) => {
+        indexesOfPipedChars = Array.from("+7 (").map((_, i) => i);
+        return `+7 (${match}`;
+      });
+    } else if (text === "7" || text === "8") {
+      text = "+7 (";
+    }
     return {
-      indexesOfPipedChars: t,
-      value: p.conformToMask(e, o, { guide: !1, placeholderChar: n }).conformedValue
+      indexesOfPipedChars,
+      value: reactTextMaskExports.conformToMask(text, mask, { guide: false, placeholderChar }).conformedValue
     };
-  }, D = () => o === c.presets.masks.phone ? (s = P(s).value, s) : p.conformToMask(s, o, { guide: !1, placeholderChar: n }).conformedValue, W = (e) => (t) => {
-    t && e(t), typeof f == "function" ? f(t) : f && (f.current = t);
-  }, j = () => !z && !b || !s && g ? "" : x;
-  return /* @__PURE__ */ B("div", { className: F(u.formFieldMaskedInputWrapper, u[`size-${k}`]), children: [
-    /* @__PURE__ */ m(
+  };
+  const getValue = () => {
+    if (mask === FormFieldMaskedInput.presets.masks.phone) {
+      value = phonePipe(value).value;
+      return value;
+    }
+    return reactTextMaskExports.conformToMask(value, mask, { guide: false, placeholderChar }).conformedValue;
+  };
+  const setRef = (ref) => (instance) => {
+    if (instance) {
+      ref(instance);
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(instance);
+    } else if (forwardedRef) {
+      forwardedRef.current = instance;
+    }
+  };
+  const getPlaceholderValue = () => {
+    if (!filled && !focused || !value && placeholder) {
+      return "";
+    }
+    return placeholderValue;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.formFieldMaskedInputWrapper, styles[`size-${size}`]), children: [
+    /* @__PURE__ */ jsx(
       "input",
       {
-        className: F(H.formFieldInput, u.formFieldMaskedInputPlaceholder, I),
-        disabled: _ === V.DISABLED,
-        placeholder: j(),
-        readOnly: !0,
+        className: clsx(stylesFormFieldInput.formFieldInput, styles.formFieldMaskedInputPlaceholder, className),
+        disabled: status === EFormFieldStatus.DISABLED,
+        placeholder: getPlaceholderValue(),
+        readOnly: true,
         "aria-hidden": "true",
         tabIndex: -1,
         type: "text"
       }
     ),
-    /* @__PURE__ */ m(
-      q,
+    /* @__PURE__ */ jsx(
+      MaskedInputTextMask,
       {
-        className: F(u.formFieldMaskedInput, { [u.error]: !!M.error }, I),
+        className: clsx(styles.formFieldMaskedInput, { [styles.error]: Boolean(restProps.error) }, className),
         defaultValue: "",
-        disabled: _ === V.DISABLED,
-        guide: !1,
-        render: (e, t) => /* @__PURE__ */ m(J, { ...t, value: s, placeholder: g || "", ref: W(e) }),
-        mask: o,
-        onChange: E,
-        onPaste: S,
-        placeholderChar: n,
-        value: D(),
-        pipe: T,
+        disabled: status === EFormFieldStatus.DISABLED,
+        guide: false,
+        render: (ref, props) => {
+          return /* @__PURE__ */ jsx(FormFieldInput, { ...props, value, placeholder: placeholder || "", ref: setRef(ref) });
+        },
+        mask,
+        onChange: handleChange,
+        onPaste: handlePaste,
+        placeholderChar,
+        value: getValue(),
+        pipe,
         type: "text",
-        ...M
+        ...restProps
       }
     )
   ] });
 };
-c.presets = G;
+FormFieldMaskedInput.presets = presets;
 export {
-  c as FormFieldMaskedInput
+  FormFieldMaskedInput
 };
 //# sourceMappingURL=FormFieldMaskedInput.js.map

package/components/FormField/components/FormFieldMaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldMaskedInput.js","sources":["../../../../src/components/FormField/components/FormFieldMaskedInput.tsx"],"sourcesContent":["import React, { useEffect, useContext, useRef, useState, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport MaskedInputTextMask, { conformToMask, MaskedInputProps, PipeConfig } from \"react-text-mask\";\nimport { DataAttributes } from \"@sberbusiness/triplex-next/types/CoreTypes\";\nimport { presets, TFormFieldMaskedInputPresets } from \"./FormFieldMaskedInputPresets\";\nimport { FormFieldInput } from \"@sberbusiness/triplex-next/components/FormField/components/FormFieldInput\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { TFormFieldMaskedInputMask } from \"@sberbusiness/triplex-next/components/FormField/types\";\nimport stylesFormFieldInput from \"../styles/FormFieldInput.module.less\";\nimport styles from \"../styles/FormFieldMaskedInput.module.less\";\nimport { EFormFieldStatus } from \"../enums\";\n\n/** Свойства компонента FormFieldInput. */\nexport interface IFormFieldMaskedInputProps\n    extends Omit<MaskedInputProps, \"guide\" | \"mask\" | \"render\">, DataAttributes {\n    value: string;\n    /** Состояние ошибки. */\n    error?: boolean;\n    /** Ссылка на поле ввода. */\n    forwardedRef?: React.Ref<HTMLInputElement>;\n    /** Маска. Каждый элемент массива должен быть либо строкой, либо регулярным выражением. Каждая строка — это фиксированный символ в маске, а каждое регулярное выражение — это заполнитель, который принимает пользовательский ввод.\n     * Подробнее можно ознакомиться https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask.\n     * */\n    mask: TFormFieldMaskedInputMask;\n    /** Плейсхолдер, отображаемый при вводе. Например: дд.мм.гггг, при вводе будет отображаться как 22.1м.гггг. */\n    placeholderMask?: string;\n}\n\nexport interface IFormFieldIMaskedInputFC extends React.FC<IFormFieldMaskedInputProps> {\n    presets: TFormFieldMaskedInputPresets;\n}\n\n/**\n * Компонент маскированного ввода.\n * Основан на https://github.com/text-mask/text-mask.\n */\nexport const FormFieldMaskedInput: IFormFieldIMaskedInputFC = ({\n    className,\n    forwardedRef,\n    mask,\n    onChange,\n    placeholder,\n    placeholderChar = \"0\",\n    placeholderMask,\n    value,\n    ...restProps\n}) => {\n    // Значение инпута, отображающего часть введенного значения и оставшуюся маску.\n    const [placeholderValue, setPlaceholderValue] = useState(\"\");\n    const pasted = useRef(false);\n    const { filled, focused, size, status } = useContext(FormFieldContext);\n\n    useEffect(() => {\n        /**\n         * Возвращает значение placeholderValue.\n         */\n        const calculatePlaceholderValue = (): string => {\n            // Массив символов placeholderValue.\n            let nextPlaceholderValue: string[] = [];\n\n            // Значение инпута остутствует.\n            if (!value) {\n                // Передан props placeholderMask, например дд.мм.гггг\n                if (placeholderMask) {\n                    // При наличии маски плейсхолдера, placeholderValue равен маски плейсхолдера.\n                    nextPlaceholderValue = placeholderMask.split(\"\");\n                } else {\n                    // Маска с символами заполнения, например 00.00.00\n                    const { conformedValue } = conformToMask(\"\", mask, { guide: true, placeholderChar });\n                    nextPlaceholderValue = conformedValue.split(\"\");\n                }\n            } else {\n                // Инпут имеет value.\n\n                // Value с маской, например: 22.00.00\n                const { conformedValue } = conformToMask(value.toString(), mask, { guide: true, placeholderChar });\n\n                // Символы placeholderValue собираются из введенного пользователем значения и оставшейся части из placeholderMask или placeholderChar.\n                for (let i = 0; i < mask.length; i++) {\n                    // Не редактируемый символ маски.\n                    if (typeof mask[i] === \"string\") {\n                        // Символ из маски.\n                        nextPlaceholderValue[i] = conformedValue[i];\n                    } else {\n                        // Не введенный пользователем символ заполняется символом placeholderMask или placeholderChar.\n                        if (conformedValue[i] === placeholderChar && !value.toString()[i]) {\n                            nextPlaceholderValue[i] = placeholderMask?.[i] || placeholderChar;\n                        } else {\n                            nextPlaceholderValue[i] = conformedValue[i];\n                        }\n                    }\n                }\n            }\n\n            return nextPlaceholderValue.join(\"\");\n        };\n\n        setPlaceholderValue(calculatePlaceholderValue());\n    }, [value, mask, placeholderChar, placeholderMask]);\n\n    const handleChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            const { value: nextValue } = event.target;\n\n            pasted.current = false;\n\n            if (value !== nextValue) {\n                onChange?.(event);\n            }\n        },\n        [value, onChange],\n    );\n\n    const handlePaste = () => {\n        pasted.current = true;\n    };\n\n    // Постобработчик введенных значений. Выполняется после внутреннего форматирования и до onChange.\n    const pipe = (conformedValue: string, config: PipeConfig) => {\n        // Для маски с номером телефона отдельный обработчик.\n        if (mask === FormFieldMaskedInput.presets.masks.phone) {\n            // Пустое значение не обрабатывается, чтобы значение в инпуте можно было стереть полностью.\n            if (!conformedValue.length) {\n                return conformedValue;\n            }\n\n            return phonePipe(config.rawValue);\n        } else if (mask === FormFieldMaskedInput.presets.masks.swiftCode) {\n            return conformedValue.toUpperCase();\n        }\n\n        return conformedValue;\n    };\n\n    // Постобработчик введенных значений, если маска является номером телефона.\n    const phonePipe = (text: string) => {\n        let indexesOfPipedChars: number[] = [];\n\n        if (pasted.current) {\n            // Выражение для поиска чисел из 1 цифры и более, начинающихся с 7 или 8\n            let regEx = /^[78]((\\D*\\d)*)/;\n\n            text = text.replace(regEx, \"+7 ($1\");\n\n            // Выражение для поиска чисел вида {любая цифра}7, например 87, 971 и т.д.\n            regEx = /^\\d7/;\n\n            // Если вторая цифра номера 7, добавляется +7 перед этим, иначе conformToMask вместо 9701234567 вернет +7901234567.\n            text = text.replace(regEx, (match) => {\n                indexesOfPipedChars = Array.from(\"+7 (\").map((_, i) => i);\n                return `+7 (${match}`;\n            });\n        } else if (text === \"7\" || text === \"8\") {\n            // Если первая введенная цифра 7 или 8, заменяем её на +7 (\n            text = \"+7 (\";\n        }\n\n        return {\n            indexesOfPipedChars,\n            value: conformToMask(text, mask, { guide: false, placeholderChar }).conformedValue,\n        };\n    };\n\n    // Возвращает value, для передачи в компоненты рендера. Для некоторых типов масок, value приходится модифицировать из-за багов.\n    const getValue = (): string => {\n        if (mask === FormFieldMaskedInput.presets.masks.phone) {\n            value = phonePipe(value).value;\n            return value;\n        }\n\n        return conformToMask(value, mask, { guide: false, placeholderChar }).conformedValue;\n    };\n\n    /** Функция для хранения ссылки. */\n    const setRef = (ref: (inputElement: HTMLElement) => void) => (instance: HTMLInputElement | null) => {\n        if (instance) {\n            ref(instance);\n        }\n        if (typeof forwardedRef === \"function\") {\n            forwardedRef(instance);\n        } else if (forwardedRef) {\n            (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = instance;\n        }\n    };\n\n    const getPlaceholderValue = () => {\n        if ((!filled && !focused) || (!value && placeholder)) {\n            return \"\";\n        }\n        return placeholderValue;\n    };\n\n    return (\n        <div className={clsx(styles.formFieldMaskedInputWrapper, styles[`size-${size}`])}>\n            {/* Input, отображающий маску. */}\n            <input\n                className={clsx(stylesFormFieldInput.formFieldInput, styles.formFieldMaskedInputPlaceholder, className)}\n                disabled={status === EFormFieldStatus.DISABLED}\n                placeholder={getPlaceholderValue()}\n                readOnly\n                aria-hidden=\"true\"\n                tabIndex={-1}\n                type=\"text\"\n            />\n\n            {/* Input, отображающий введенное значение. */}\n            <MaskedInputTextMask\n                className={clsx(styles.formFieldMaskedInput, { [styles.error]: Boolean(restProps.error) }, className)}\n                // https://github.com/text-mask/text-mask/pull/993\n                defaultValue=\"\"\n                disabled={status === EFormFieldStatus.DISABLED}\n                /* Input отображает только введенное значение без маски, маска рисуется в inputPlaceholder. */\n                guide={false}\n                render={(ref, props) => {\n                    return (\n                        <FormFieldInput {...props} value={value} placeholder={placeholder || \"\"} ref={setRef(ref)} />\n                    );\n                }}\n                mask={mask}\n                onChange={handleChange}\n                onPaste={handlePaste}\n                placeholderChar={placeholderChar}\n                // value={value} не используется т.к. возникает баг при передаче снаружи изначально пустого value, а затем не пустого.\n                value={getValue()}\n                pipe={pipe}\n                type=\"text\"\n                {...restProps}\n            />\n        </div>\n    );\n};\n\nFormFieldMaskedInput.presets = presets;\n"],"names":["conformToMask"],"mappings":"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"}

package/components/FormField/components/FormFieldMaskedInputPresets.js

@@ -1,4 +1,4 @@
-const d = {
+const presets = {
   // Предзаготовленный набор масок.
   masks: {
     account: [
@@ -163,6 +163,6 @@ const d = {
   }
 };
 export {
-  d as presets
+  presets
 };
 //# sourceMappingURL=FormFieldMaskedInputPresets.js.map

package/components/FormField/components/FormFieldMaskedInputPresets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldMaskedInputPresets.js","sources":["../../../../src/components/FormField/components/FormFieldMaskedInputPresets.ts"],"sourcesContent":["import { TFormFieldMaskedInputMask } from \"../types\";\n\nexport interface TFormFieldMaskedInputPresets {\n    // Предзаготовленный набор плейсхолдеров масок.\n    placeholderMasks: {\n        // Номер автомобиля A000AA 00.\n        carNumber: string;\n        // Номер карты 0000 0000 0000 0000 (от 16 до 20 символов).\n        cardNumber: string;\n        // Дата дд.мм.гггг.\n        date: string;\n        // ИНН 0000000000 (от 10 до 12 символов).\n        inn: string;\n        // Доб. номер 000 (от 3 до 4 символов).\n        phoneExtension: string;\n        // SWIFT код AAAAAAAA (от 8 до 11 символов).\n        swiftCode: string;\n        // Время чч:мм.\n        time: string;\n        // УИН 00000000000000000000 (от 20 до 25 символов).\n        uin: string;\n        // Единый лицевой счёт поставщика услуг (ЖКУ) 00АА000000.\n        zhkuAccount: string;\n        // Идентификатор ЖКУ 00АА000000-00.\n        zhkuId: string;\n        // Идентификатор платёжного документа (ЖКУ) 00АА000000-00-0000.\n        zhkuPaymentDocumentId: string;\n    };\n    // Предзаготовленный набор масок.\n    masks: {\n        // Номер счета 00000 000 0 00000000000.\n        account: TFormFieldMaskedInputMask;\n        // БИК 000 000 000.\n        bic: TFormFieldMaskedInputMask;\n        // Номер автомобиля A000AA 00.\n        carNumber: TFormFieldMaskedInputMask;\n        // Номер карты 0000 0000 0000 0000 (от 16 до 20 символов).\n        cardNumber: TFormFieldMaskedInputMask;\n        // Дата.\n        date: TFormFieldMaskedInputMask;\n        // Водительское удостоверение 00 00 000000.\n        driversLicense: TFormFieldMaskedInputMask;\n        // ИНН 0000000000 (от 10 до 12 символов).\n        inn: TFormFieldMaskedInputMask;\n        // КБК 00000000000000000000.\n        kbk: TFormFieldMaskedInputMask;\n        // КПП 000000000.\n        kpp: TFormFieldMaskedInputMask;\n        // Широта 00.000000.\n        latitude: TFormFieldMaskedInputMask;\n        // Долгота 00.000000.\n        longitude: TFormFieldMaskedInputMask;\n        // ОГРН 0000000000000.\n        ogrn: TFormFieldMaskedInputMask;\n        // ОКТМО 00000000.\n        oktmo: TFormFieldMaskedInputMask;\n        // Паспорт РФ.\n        passport: {\n            // Код подразделения 000-000.\n            departmentCode: TFormFieldMaskedInputMask;\n            // Номер 000000.\n            number: TFormFieldMaskedInputMask;\n            // Серия 00 00.\n            series: TFormFieldMaskedInputMask;\n        };\n        // Номер телефона.\n        phone: TFormFieldMaskedInputMask;\n        // Доб. номер 000 (от 3 до 4 символов).\n        phoneExtension: TFormFieldMaskedInputMask;\n        // SWIFT код AAAAAAAA (от 8 до 11 символов).\n        swiftCode: TFormFieldMaskedInputMask;\n        // Время чч:мм.\n        time: TFormFieldMaskedInputMask;\n        // Индекс 000000.\n        postalCode: TFormFieldMaskedInputMask;\n        // СНЛС 000-000-000 00.\n        snils: TFormFieldMaskedInputMask;\n        // УИН 00000000000000000000 (от 20 до 25 символов).\n        uin: TFormFieldMaskedInputMask;\n        // Единый лицевой счёт поставщика услуг (ЖКУ) 00АА000000.\n        zhkuAccount: TFormFieldMaskedInputMask;\n        // Идентификатор ЖКУ 00АА000000-00.\n        zhkuId: TFormFieldMaskedInputMask;\n        // Идентификатор платёжного документа (ЖКУ) 00АА000000-00-0000.\n        zhkuPaymentDocumentId: TFormFieldMaskedInputMask;\n    };\n}\n\nexport const presets: TFormFieldMaskedInputPresets = {\n    // Предзаготовленный набор масок.\n    masks: {\n        account: [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n        ],\n        // БИК 000000000.\n        bic: [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/],\n        // Номер автомобиля A000AA 00.\n        carNumber: [/[а-яА-ЯЁё]/, /\\d/, /\\d/, /\\d/, /[а-яА-ЯЁё]/, /[а-яА-ЯЁё]/, /\\d/, /\\d/, /\\d/],\n        // Номер карты 0000 0000 0000 0000 0000.\n        cardNumber: [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \" \",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n        ],\n        date: [/\\d/, /\\d/, \".\", /\\d/, /\\d/, \".\", /\\d/, /\\d/, /\\d/, /\\d/],\n        // Водительское удостоверение 00 00 000000.\n        driversLicense: [/\\d/, /\\d/, \" \", /\\d/, /\\d/, \" \", /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/],\n        // ИНН 0000000000 (от 10 до 12 символов).\n        inn: Array<RegExp>(12).fill(/\\d/),\n        // КБК 00000000000000000000.\n        kbk: Array<RegExp>(20).fill(/\\d/),\n        // КПП 000000000.\n        kpp: Array<RegExp>(9).fill(/\\d/),\n        // Широта 00.000000.\n        latitude: [/\\d/, /\\d/, \".\", /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/],\n        // Долгота 00.000000.\n        longitude: [/\\d/, /\\d/, \".\", /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/],\n        // ОГРН 0000000000000.\n        ogrn: Array<RegExp>(13).fill(/\\d/),\n        // ОКТМО 00000000.\n        oktmo: Array<RegExp>(8).fill(/\\d/),\n        // Паспорт РФ.\n        passport: {\n            // Код подразделения 000-000.\n            departmentCode: [/\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, /\\d/],\n            // Номер 000000.\n            number: Array<RegExp>(6).fill(/\\d/),\n            // Серия 00 00.\n            series: [/\\d/, /\\d/, \" \", /\\d/, /\\d/],\n        },\n        // Номер телефона.\n        phone: [\"+\", \"7\", \" \", \"(\", /[1-9]/, /\\d/, /\\d/, \")\", \" \", /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/],\n        // SWIFT код.\n        swiftCode: [\n            /[a-zA-Z]/,\n            /[a-zA-Z]/,\n            /[a-zA-Z]/,\n            /[a-zA-Z]/,\n            /[a-zA-Z]/,\n            /[a-zA-Z]/,\n            /[a-zA-Z0-9]/,\n            /[a-zA-Z0-9]/,\n            /[a-zA-Z0-9]/,\n            /[a-zA-Z0-9]/,\n            /[a-zA-Z0-9]/,\n        ],\n        // Время чч:мм.\n        time: [/\\d/, /\\d/, \":\", /\\d/, /\\d/],\n        // Доб. номер 000 (от 3 до 4 символов).\n        phoneExtension: Array<RegExp>(4).fill(/\\d/),\n        // Индекс 000000.\n        postalCode: Array<RegExp>(6).fill(/\\d/),\n        // СНИЛС 000-000-000 00.\n        snils: [/\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, /\\d/, \" \", /\\d/, /\\d/],\n        // УИН 00000000000000000000 (от 20 до 25 символов).\n        uin: Array<RegExp>(25).fill(/\\d/),\n        // Единый лицевой счёт поставщика услуг (ЖКУ) 00АА000000.\n        zhkuAccount: [/\\d/, /\\d/, /[а-яА-ЯЁё]/, /[а-яА-ЯЁё]/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/],\n        // Идентификатор ЖКУ 00АА000000-00.\n        zhkuId: [/\\d/, /\\d/, /[а-яА-ЯЁё]/, /[а-яА-ЯЁё]/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/],\n        // Идентификатор платёжного документа (ЖКУ) 00АА000000-00-0000.\n        zhkuPaymentDocumentId: [\n            /\\d/,\n            /\\d/,\n            /[а-яА-ЯЁё]/,\n            /[а-яА-ЯЁё]/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            \"-\",\n            /\\d/,\n            /\\d/,\n            \"-\",\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n        ],\n    },\n    // Предзаготовленный набор плейсхолдеров масок. Пустые пробелы в конце - под дополнительные не подсвеченные символы.\n    placeholderMasks: {\n        // Номер автомобиля A000AA00.\n        carNumber: \"A000AA00 \",\n        // Номер карты 0000 0000 0000 0000 (от 16 до 20 символов).\n        cardNumber: \"0000 0000 0000 0000     \",\n        // Дата дд.мм.гггг.\n        date: \"дд.мм.гггг\",\n        // ИНН 0000000000 (от 10 до 12 символов).\n        inn: \"0000000000  \",\n        // Доб. номер 000 (от 3 до 4 символов).\n        phoneExtension: \"000 \",\n        // SWIFT код AAAAAAAA (от 8 до 11 символов).\n        swiftCode: \"AAAAAAAA   \",\n        // Время чч:мм.\n        time: \"чч:мм\",\n        // УИН 00000000000000000000 (от 20 до 25 символов).\n        uin: \"00000000000000000000     \",\n        // Единый лицевой счёт поставщика услуг (ЖКУ) 00АА000000.\n        zhkuAccount: \"00АА000000\",\n        // Идентификатор ЖКУ 00АА000000-00.\n        zhkuId: \"00АА000000-00\",\n        // Идентификатор платёжного документа (ЖКУ) 00АА000000-00-0000.\n        zhkuPaymentDocumentId: \"00АА000000-00-0000\",\n    },\n};\n"],"names":[],"mappings":"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"}

package/components/FormField/components/FormFieldPostfix.js

@@ -1,31 +1,45 @@
-import { jsx as x } from "react/jsx-runtime";
-import F, { useContext as a, useRef as p, useEffect as P } from "react";
-import { c as R } from "../../../chunks/vendor-D5cfSbgz.js";
-import { FormFieldContext as _ } from "../FormFieldContext.js";
-import { TARGET_PADDING_X_DEFAULT as b } from "../consts.js";
-const w = "formFieldPostfix__0b403c7f", N = {
-  formFieldPostfix: w
-}, g = F.forwardRef(
-  ({ children: n, className: c, ...m }, t) => {
-    const { setPostfixWidth: o } = a(_), s = p(), l = R(N.formFieldPostfix, c), d = (e) => {
-      s.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+import { jsx } from "react/jsx-runtime";
+import React__default, { useContext, useRef, useEffect } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { FormFieldContext } from "../FormFieldContext.js";
+import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
+const formFieldPostfix = "formFieldPostfix__a78762be";
+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;
+      }
     };
-    return P(() => {
-      const e = s.current;
-      if (!e)
+    useEffect(() => {
+      const element = innerRef.current;
+      if (!element) {
         return;
-      const r = new ResizeObserver(([u]) => {
-        const i = u.target.getBoundingClientRect().width;
-        o((f) => f !== i ? i : f);
+      }
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.target.getBoundingClientRect().width;
+        setPostfixWidth((prevWidth) => prevWidth !== width ? width : prevWidth);
       });
-      return r.observe(e), () => {
-        r.disconnect(), o(b);
+      resizeObserver.observe(element);
+      return () => {
+        resizeObserver.disconnect();
+        setPostfixWidth(TARGET_PADDING_X_DEFAULT);
       };
-    }, [o]), /* @__PURE__ */ x("span", { className: l, ...m, ref: d, children: n });
+    }, [setPostfixWidth]);
+    return /* @__PURE__ */ jsx("span", { className: classNames, ...restProps, ref: setRef, children });
   }
 );
-g.displayName = "FormFieldPostfix";
+FormFieldPostfix.displayName = "FormFieldPostfix";
 export {
-  g as FormFieldPostfix
+  FormFieldPostfix
 };
 //# sourceMappingURL=FormFieldPostfix.js.map

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

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

package/components/FormField/components/FormFieldPrefix.js

@@ -1,31 +1,45 @@
-import { jsx as x } from "react/jsx-runtime";
-import F, { useContext as a, useRef as p, useEffect as P } from "react";
-import { c as R } from "../../../chunks/vendor-D5cfSbgz.js";
-import { FormFieldContext as _ } from "../FormFieldContext.js";
-import { TARGET_PADDING_X_DEFAULT as b } from "../consts.js";
-const w = "formFieldPrefix__394d326b", N = {
-  formFieldPrefix: w
-}, g = F.forwardRef(
-  ({ children: n, className: c, ...m }, r) => {
-    const { setPrefixWidth: t } = a(_), o = p(), l = R(N.formFieldPrefix, c), d = (e) => {
-      o.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+import { jsx } from "react/jsx-runtime";
+import React__default, { useContext, useRef, useEffect } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { FormFieldContext } from "../FormFieldContext.js";
+import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
+const formFieldPrefix = "formFieldPrefix__52f46fe2";
+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;
+      }
     };
-    return P(() => {
-      const e = o.current;
-      if (!e)
+    useEffect(() => {
+      const element = innerRef.current;
+      if (!element) {
         return;
-      const s = new ResizeObserver(([u]) => {
-        const i = u.target.getBoundingClientRect().width;
-        t((f) => f !== i ? i : f);
+      }
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.target.getBoundingClientRect().width;
+        setPrefixWidth((prevWidth) => prevWidth !== width ? width : prevWidth);
       });
-      return s.observe(e), () => {
-        s.disconnect(), t(b);
+      resizeObserver.observe(element);
+      return () => {
+        resizeObserver.disconnect();
+        setPrefixWidth(TARGET_PADDING_X_DEFAULT);
       };
-    }, [t]), /* @__PURE__ */ x("span", { className: l, ...m, ref: d, children: n });
+    }, [setPrefixWidth]);
+    return /* @__PURE__ */ jsx("span", { className: classNames, ...restProps, ref: setRef, children });
   }
 );
-g.displayName = "FormFieldPrefix";
+FormFieldPrefix.displayName = "FormFieldPrefix";
 export {
-  g as FormFieldPrefix
+  FormFieldPrefix
 };
 //# sourceMappingURL=FormFieldPrefix.js.map

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

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

package/components/FormField/components/FormFieldTarget.js

@@ -1,60 +1,77 @@
-import { jsx as f } from "react/jsx-runtime";
-import g, { useContext as S, useMemo as h, useLayoutEffect as b, useCallback as F } from "react";
-import { u as y, c as A } from "../../../chunks/vendor-D5cfSbgz.js";
-import { FormFieldContext as L } from "../FormFieldContext.js";
-import { EFormFieldStatus as d } from "../enums.js";
-import { createSizeToClassNameMap as W } from "../../../utils/classNameMaps.js";
-const z = "formFieldTarget__c2522cd1", M = "sm__2079d6a4", R = "md__7fe9c68e", j = "lg__aac0ac1a", k = "placeholder__67deedf2", q = "disabled__c53733d4", w = "placeholderWrapper__9ce4d936", B = "active__701240be", e = {
-  formFieldTarget: z,
-  sm: M,
-  md: R,
-  lg: j,
-  placeholder: k,
-  disabled: q,
-  placeholderWrapper: w,
-  active: B
-}, G = W(e), H = g.forwardRef(
-  ({ children: c, id: o, className: T, placeholder: p, onFocus: a, onBlur: t, ...u }, D) => {
-    const { size: I, status: s, active: v, labelId: x, setFilled: n, setFocused: l, setTargetId: _ } = S(L), i = h(() => o === void 0 ? y("target_") : o, [o]), r = h(() => g.Children.toArray(c).length !== 0, [c]), E = A(e.formFieldTarget, G[I], T, {
-      [e.disabled]: s === d.DISABLED,
-      [e.placeholder]: !!p && !r && s !== d.DISABLED,
-      [e.active]: v
+import { jsx } from "react/jsx-runtime";
+import React__default, { useContext, useMemo, useLayoutEffect, useCallback } from "react";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { FormFieldContext } from "../FormFieldContext.js";
+import { EFormFieldStatus } from "../enums.js";
+import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
+const formFieldTarget = "formFieldTarget__b77ebe62";
+const sm = "sm__e2c296fc";
+const md = "md__fb8429c0";
+const lg = "lg__aa378fff";
+const placeholder = "placeholder__c15bb959";
+const disabled = "disabled__37a5fa7f";
+const placeholderWrapper = "placeholderWrapper__73be36d6";
+const active = "active__94871e19";
+const styles = {
+  formFieldTarget,
+  sm,
+  md,
+  lg,
+  placeholder,
+  disabled,
+  placeholderWrapper,
+  active
+};
+const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const FormFieldTarget = React__default.forwardRef(
+  ({ children, id: idProp, className, placeholder: placeholder2, onFocus, onBlur, ...restProps }, ref) => {
+    const { size, status, active: active2, labelId, setFilled, setFocused, setTargetId } = useContext(FormFieldContext);
+    const id = useMemo(() => idProp === void 0 ? uniqueId("target_") : idProp, [idProp]);
+    const childrenExist = useMemo(() => React__default.Children.toArray(children).length !== 0, [children]);
+    const classNames = clsx(styles.formFieldTarget, sizeToClassNameMap[size], className, {
+      [styles.disabled]: status === EFormFieldStatus.DISABLED,
+      [styles.placeholder]: !!placeholder2 && !childrenExist && status !== EFormFieldStatus.DISABLED,
+      [styles.active]: active2
     });
-    b(() => {
-      _(i);
-    }, [i, _]), b(() => {
-      n(r);
-    }, [r, n]);
-    const C = F(
-      (m) => {
-        l(!0), a == null || a(m);
+    useLayoutEffect(() => {
+      setTargetId(id);
+    }, [id, setTargetId]);
+    useLayoutEffect(() => {
+      setFilled(childrenExist);
+    }, [childrenExist, setFilled]);
+    const handleFocus = useCallback(
+      (event) => {
+        setFocused(true);
+        onFocus == null ? void 0 : onFocus(event);
       },
-      [a, l]
-    ), N = F(
-      (m) => {
-        l(!1), t == null || t(m);
+      [onFocus, setFocused]
+    );
+    const handleBlur = useCallback(
+      (event) => {
+        setFocused(false);
+        onBlur == null ? void 0 : onBlur(event);
       },
-      [t, l]
+      [onBlur, setFocused]
     );
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        ...u,
-        id: i,
-        className: E,
-        tabIndex: s === d.DISABLED ? -1 : 0,
-        "aria-labelledby": x,
-        "aria-disabled": s === d.DISABLED,
-        onBlur: N,
-        onFocus: C,
-        ref: D,
-        children: r ? c : /* @__PURE__ */ f("span", { className: e.placeholderWrapper, children: p })
+        ...restProps,
+        id,
+        className: classNames,
+        tabIndex: status === EFormFieldStatus.DISABLED ? -1 : 0,
+        "aria-labelledby": labelId,
+        "aria-disabled": status === EFormFieldStatus.DISABLED,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        ref,
+        children: childrenExist ? children : /* @__PURE__ */ jsx("span", { className: styles.placeholderWrapper, children: placeholder2 })
       }
     );
   }
 );
-H.displayName = "FormFieldTarget";
+FormFieldTarget.displayName = "FormFieldTarget";
 export {
-  H as FormFieldTarget
+  FormFieldTarget
 };
 //# sourceMappingURL=FormFieldTarget.js.map