@sberbusiness/triplex-next 0.35.0 → 0.37.0

package/components/FormField/components/FormFieldMaskedInput.js

@@ -1,164 +1,175 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useContext, useEffect, useCallback } from "react";
+import React, { useState, useRef, useContext, useEffect, useCallback } from "react";
 import { c as clsx, m as MaskedInputTextMask, n as reactTextMaskExports } from "../../../chunks/vendor-BtZO8a0z.js";
 import { presets } from "./FormFieldMaskedInputPresets.js";
-import { s as stylesFormFieldInput, F as FormFieldInput } from "../../../chunks/FormFieldInput-C19hNK5B.js";
+import { FormFieldInput } from "./FormFieldInput.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
-const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__2c83c058";
-const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__678d1918";
-const formFieldMaskedInput = "formFieldMaskedInput__96e01edc";
+import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
+const formFieldMaskedInputWrapper = "formFieldMaskedInputWrapper__d4b0f19e";
+const formFieldMaskedInputPlaceholder = "formFieldMaskedInputPlaceholder__40aea2fc";
+const sm = "sm__2411715c";
+const md = "md__5ce68fef";
+const lg = "lg__d1b528d0";
+const transparentText = "transparentText__6f49a2be";
 const styles = {
   formFieldMaskedInputWrapper,
   formFieldMaskedInputPlaceholder,
-  "size-sm": "size-sm__5d2e9818",
-  "size-md": "size-md__76275b62",
-  "size-lg": "size-lg__3ef94901",
-  formFieldMaskedInput
+  sm,
+  md,
+  lg,
+  transparentText
 };
-const FormFieldMaskedInput = ({
-  className,
-  forwardedRef,
-  mask,
-  onChange,
-  placeholder,
-  placeholderChar = "0",
-  placeholderMask,
-  value,
-  ...restProps
-}) => {
-  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];
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
+const FormFieldMaskedInputBase = React.forwardRef(
+  ({
+    className,
+    forwardedRef,
+    mask,
+    onChange,
+    placeholder,
+    placeholderChar = "0",
+    placeholderMask,
+    value,
+    ...restProps
+  }, ref) => {
+    const [placeholderValue, setPlaceholderValue] = useState("");
+    const [filledLength, setFilledLength] = useState(0);
+    const pasted = useRef(false);
+    const { filled, focused, size, status } = useContext(FormFieldContext);
+    useEffect(() => {
+      const calculatePlaceholderValue = () => {
+        let nextPlaceholderValue = [];
+        if (!value) {
+          if (placeholderMask) {
+            nextPlaceholderValue = placeholderMask.split("");
           } else {
-            if (conformedValue[i] === placeholderChar && !value.toString()[i]) {
-              nextPlaceholderValue[i] = (placeholderMask == null ? void 0 : placeholderMask[i]) || placeholderChar;
-            } else {
+            const { conformedValue } = reactTextMaskExports.conformToMask("", mask, { guide: true, placeholderChar });
+            nextPlaceholderValue = conformedValue.split("");
+          }
+          setFilledLength(0);
+        } else {
+          const { conformedValue } = reactTextMaskExports.conformToMask(value.toString(), mask, { guide: true, placeholderChar });
+          const conformed = reactTextMaskExports.conformToMask(value.toString(), mask, {
+            guide: false,
+            placeholderChar
+          }).conformedValue;
+          setFilledLength(conformed.length);
+          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);
+        }
+      },
+      [value, onChange]
+    );
+    const handlePaste = () => {
+      pasted.current = true;
+    };
+    const pipe = (conformedValue, config) => {
+      if (mask === presets.masks.phone) {
+        if (!conformedValue.length) {
+          return conformedValue;
+        }
+        return phonePipe(config.rawValue);
+      } else if (mask === presets.masks.swiftCode) {
+        return conformedValue.toUpperCase();
       }
-      return nextPlaceholderValue.join("");
+      return conformedValue;
     };
-    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);
+    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 (";
       }
-    },
-    [value, onChange]
-  );
-  const handlePaste = () => {
-    pasted.current = true;
-  };
-  const pipe = (conformedValue, config) => {
-    if (mask === FormFieldMaskedInput.presets.masks.phone) {
-      if (!conformedValue.length) {
-        return conformedValue;
+      return {
+        indexesOfPipedChars,
+        value: reactTextMaskExports.conformToMask(text, mask, { guide: false, placeholderChar }).conformedValue
+      };
+    };
+    const getValue = () => {
+      if (mask === presets.masks.phone) {
+        value = phonePipe(value).value;
+        return value;
       }
-      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,
-      value: reactTextMaskExports.conformToMask(text, mask, { guide: false, placeholderChar }).conformedValue
+      return reactTextMaskExports.conformToMask(value, mask, { guide: false, placeholderChar }).conformedValue;
     };
-  };
-  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: clsx(stylesFormFieldInput.formFieldInput, styles.formFieldMaskedInputPlaceholder, className),
-        disabled: status === EFormFieldStatus.DISABLED,
-        placeholder: getPlaceholderValue(),
-        readOnly: true,
-        "aria-hidden": "true",
-        tabIndex: -1,
-        type: "text"
+    const setRef = (ref2) => (instance) => {
+      if (instance) {
+        ref2(instance);
       }
-    ),
-    /* @__PURE__ */ jsx(
-      MaskedInputTextMask,
-      {
-        className: clsx(styles.formFieldMaskedInput, { [styles.error]: Boolean(restProps.error) }, className),
-        defaultValue: "",
-        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",
-        ...restProps
+      if (typeof forwardedRef === "function") {
+        forwardedRef(instance);
+      } else if (forwardedRef) {
+        forwardedRef.current = instance;
       }
-    )
-  ] });
-};
-FormFieldMaskedInput.presets = presets;
+    };
+    const getPlaceholderValue = () => {
+      if (!filled && !focused || !value && placeholder) {
+        return "";
+      }
+      return placeholderValue;
+    };
+    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.formFieldMaskedInputWrapper, className), ref, children: [
+      getPlaceholderValue() && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(styles.formFieldMaskedInputPlaceholder, SIZE_TO_CLASS_NAME_MAP[size]),
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.transparentText, children: placeholderValue.slice(0, filledLength) }),
+            /* @__PURE__ */ jsx("span", { children: placeholderValue.slice(filledLength) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MaskedInputTextMask,
+        {
+          defaultValue: "",
+          disabled: status === EFormFieldStatus.DISABLED,
+          guide: false,
+          render: (ref2, props) => /* @__PURE__ */ jsx(FormFieldInput, { ...props, value, placeholder: placeholder || "", ref: setRef(ref2) }),
+          mask,
+          onChange: handleChange,
+          onPaste: handlePaste,
+          placeholderChar,
+          value: getValue(),
+          pipe,
+          type: "text",
+          ...restProps
+        }
+      )
+    ] });
+  }
+);
+FormFieldMaskedInputBase.displayName = "FormFieldMaskedInput";
+const FormFieldMaskedInput = Object.assign(FormFieldMaskedInputBase, { presets });
 export {
   FormFieldMaskedInput
 };

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

@@ -1 +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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"}
+{"version":3,"file":"FormFieldMaskedInput.js","sources":["../../../../src/components/FormField/components/FormFieldMaskedInput.tsx"],"sourcesContent":["import React, { useEffect, useContext, useRef, useState, useCallback } from \"react\";\nimport MaskedInputTextMask, { conformToMask, MaskedInputProps, PipeConfig } from \"react-text-mask\";\nimport clsx from \"clsx\";\nimport { DataAttributes } from \"../../../types/CoreTypes\";\nimport { presets } from \"./FormFieldMaskedInputPresets\";\nimport { FormFieldInput } from \"./FormFieldInput\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { TFormFieldMaskedInputMask } from \"../types\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport styles from \"../styles/FormFieldMaskedInput.module.less\";\n\n/** Свойства компонента FormFieldMaskedInput. */\nexport interface IFormFieldMaskedInputProps\n    extends Omit<MaskedInputProps, \"guide\" | \"mask\" | \"render\">, DataAttributes {\n    value: string;\n    /** Ссылка на поле ввода. */\n    forwardedRef?: React.Ref<HTMLInputElement>;\n    /**\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\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nconst FormFieldMaskedInputBase = React.forwardRef<HTMLDivElement, IFormFieldMaskedInputProps>(\n    (\n        {\n            className,\n            forwardedRef,\n            mask,\n            onChange,\n            placeholder,\n            placeholderChar = \"0\",\n            placeholderMask,\n            value,\n            ...restProps\n        },\n        ref,\n    ) => {\n        // Значение инпута, отображающего часть введенного значения и оставшуюся маску.\n        const [placeholderValue, setPlaceholderValue] = useState(\"\");\n        const [filledLength, setFilledLength] = useState(0);\n        const pasted = useRef(false);\n        const { filled, focused, size, status } = useContext(FormFieldContext);\n\n        useEffect(() => {\n            /** Возвращает значение placeholderValue. */\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                    setFilledLength(0);\n                }\n                // Инпут имеет value.\n                else {\n                    // Value с маской, например: 22.00.00\n                    const { conformedValue } = conformToMask(value.toString(), mask, { guide: true, placeholderChar });\n                    // Нам нужна точная длина того, что уже ввел пользователь\n                    const conformed = conformToMask(value.toString(), mask, {\n                        guide: false,\n                        placeholderChar,\n                    }).conformedValue;\n                    setFilledLength(conformed.length);\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 === presets.masks.phone) {\n                // Пустое значение не обрабатывается, чтобы значение в инпуте можно было стереть полностью.\n                if (!conformedValue.length) {\n                    return conformedValue;\n                }\n\n                return phonePipe(config.rawValue);\n            } else if (mask === 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 === 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, className)} ref={ref}>\n                {getPlaceholderValue() && (\n                    <div\n                        className={clsx(styles.formFieldMaskedInputPlaceholder, SIZE_TO_CLASS_NAME_MAP[size])}\n                        aria-hidden=\"true\"\n                    >\n                        <span className={styles.transparentText}>{placeholderValue.slice(0, filledLength)}</span>\n                        <span>{placeholderValue.slice(filledLength)}</span>\n                    </div>\n                )}\n\n                {/* Input, отображающий введенное значение. */}\n                <MaskedInputTextMask\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                        <FormFieldInput {...props} value={value} placeholder={placeholder || \"\"} ref={setRef(ref)} />\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);\n\nFormFieldMaskedInputBase.displayName = \"FormFieldMaskedInput\";\n\n/**\n * Компонент маскированного ввода.\n * Основан на https://github.com/text-mask/text-mask.\n */\nexport const FormFieldMaskedInput = Object.assign(FormFieldMaskedInputBase, { presets });\n"],"names":["conformToMask","ref"],"mappings":"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"}

package/components/FormField/components/FormFieldPostfix.js

@@ -3,7 +3,7 @@ import React, { useContext, useRef, useEffect } from "react";
 import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
-const formFieldPostfix = "formFieldPostfix__3c0741ba";
+const formFieldPostfix = "formFieldPostfix__fc4dc703";
 const styles = {
   formFieldPostfix
 };

package/components/FormField/components/FormFieldPrefix.js

@@ -3,7 +3,7 @@ import React, { useContext, useRef, useEffect } from "react";
 import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
-const formFieldPrefix = "formFieldPrefix__a43fe35e";
+const formFieldPrefix = "formFieldPrefix__aec03825";
 const styles = {
   formFieldPrefix
 };

package/components/FormField/components/FormFieldTarget.js

@@ -4,14 +4,14 @@ import { u as uniqueId, c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const formFieldTarget = "formFieldTarget__82c729be";
-const sm = "sm__0e1871c5";
-const md = "md__ec2fee36";
-const lg = "lg__7a625f21";
-const placeholder = "placeholder__5ccb3717";
-const disabled = "disabled__75eebd0c";
-const placeholderWrapper = "placeholderWrapper__70081b52";
-const active = "active__f87da8bb";
+const formFieldTarget = "formFieldTarget__b2f45c14";
+const sm = "sm__2411715c";
+const md = "md__5ce68fef";
+const lg = "lg__d1b528d0";
+const placeholder = "placeholder__4679a007";
+const disabled = "disabled__d9c289e6";
+const placeholderWrapper = "placeholderWrapper__30c36840";
+const active = "active__0be016c8";
 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__af7ed6a2";
-const sm = "sm__0e1871c5";
-const md = "md__ec2fee36";
-const lg = "lg__7a625f21";
+const formFieldTextarea = "formFieldTextarea__c735db17";
+const sm = "sm__2411715c";
+const md = "md__5ce68fef";
+const lg = "lg__d1b528d0";
 const styles = {
   formFieldTextarea,
   sm,

package/components/FormField/components/index.js

@@ -1,7 +1,7 @@
 import { FormFieldClear } from "./FormFieldClear.js";
 import { FormFieldCounter } from "./FormFieldCounter.js";
 import { FormFieldDescription } from "./FormFieldDescription.js";
-import { F } from "../../../chunks/FormFieldInput-C19hNK5B.js";
+import { FormFieldInput } from "./FormFieldInput.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
 import { FormFieldMaskedInput } from "./FormFieldMaskedInput.js";
 import { FormFieldPostfix } from "./FormFieldPostfix.js";
@@ -12,7 +12,7 @@ export {
   FormFieldClear,
   FormFieldCounter,
   FormFieldDescription,
-  F as FormFieldInput,
+  FormFieldInput,
   FormFieldLabel,
   FormFieldMaskedInput,
   FormFieldPostfix,

package/components/FormField/index.js

@@ -2,7 +2,7 @@ import { EFormFieldStatus } from "./enums.js";
 import { FormFieldClear } from "./components/FormFieldClear.js";
 import { FormFieldCounter } from "./components/FormFieldCounter.js";
 import { FormFieldDescription } from "./components/FormFieldDescription.js";
-import { F } from "../../chunks/FormFieldInput-C19hNK5B.js";
+import { FormFieldInput } from "./components/FormFieldInput.js";
 import { FormFieldLabel } from "./components/FormFieldLabel.js";
 import { FormFieldMaskedInput } from "./components/FormFieldMaskedInput.js";
 import { FormFieldPostfix } from "./components/FormFieldPostfix.js";
@@ -16,7 +16,7 @@ export {
   FormFieldClear,
   FormFieldCounter,
   FormFieldDescription,
-  F as FormFieldInput,
+  FormFieldInput,
   FormFieldLabel,
   FormFieldMaskedInput,
   FormFieldPostfix,

package/components/Gap/Gap.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import React from "react";
-const size4 = "size4__8b702da6";
-const size8 = "size8__586316d3";
-const size12 = "size12__863fb46a";
-const size16 = "size16__809b451f";
-const size24 = "size24__d578b3c6";
-const size32 = "size32__60365533";
-const size64 = "size64__67948c49";
-const size128 = "size128__d2101262";
+const size4 = "size4__79a182d5";
+const size8 = "size8__6b5276c7";
+const size12 = "size12__0d1926a7";
+const size16 = "size16__3a9151bc";
+const size24 = "size24__4abd1da7";
+const size32 = "size32__4a01cc15";
+const size64 = "size64__03106e79";
+const size128 = "size128__655784b4";
 const styles = {
   size4,
   size8,

package/components/Header/Header.js

@@ -12,7 +12,7 @@ import "./components/HeaderTitle/HeaderTitleContent.js";
 import "./components/HeaderTitle/HeaderTitleControls.js";
 const Header = Object.assign(
   React.forwardRef(function Header2({ children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { ...rest, "data-tx": "0.35.0", ref, children });
+    return /* @__PURE__ */ jsx("div", { ...rest, "data-tx": "0.37.0", ref, children });
   }),
   {
     LayoutSidebar: HeaderLayoutSidebar,

package/components/Header/components/HeaderLayoutSidebar/HeaderLayoutSidebar.js

@@ -3,7 +3,7 @@ import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
 import { HeaderLayoutSidebarContent } from "./HeaderLayoutSidebarContent.js";
 import { HeaderLayoutSidebarSidebar } from "./HeaderLayoutSidebarSidebar.js";
-import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-Ba-AAUB7.js";
+import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-Cy3S-awo.js";
 const HeaderLayoutSidebar = Object.assign(
   React.forwardRef(function HeaderLayoutSidebar2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerLayoutSidebar, className), ...rest, ref, children });

package/components/Header/components/HeaderLayoutSidebar/HeaderLayoutSidebarContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-Ba-AAUB7.js";
+import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-Cy3S-awo.js";
 const HeaderLayoutSidebarContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerLayoutSidebarContent, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderLayoutSidebar/HeaderLayoutSidebarSidebar.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-Ba-AAUB7.js";
+import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-Cy3S-awo.js";
 const HeaderLayoutSidebarSidebar = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerLayoutSidebarSidebar, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderSubheader/HeaderSubheader.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-const headerSubheader = "headerSubheader__ca1cbaee";
-const withoutPaddings = "withoutPaddings__3fdb9c27";
+const headerSubheader = "headerSubheader__2da7090c";
+const withoutPaddings = "withoutPaddings__4e38486c";
 const styles = {
   headerSubheader,
   withoutPaddings

package/components/Header/components/HeaderTabs/HeaderTabs.js

@@ -3,7 +3,7 @@ import React from "react";
 import { HeaderTabsContent } from "./HeaderTabsContent.js";
 import { HeaderTabsControls } from "./HeaderTabsControls.js";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderTabs.module-C0CPm99L.js";
+import { s as styles } from "../../../../chunks/HeaderTabs.module-O7_awNvd.js";
 const HeaderTabs = Object.assign(
   React.forwardRef(function HeaderTabs2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTabs, className), ...rest, ref, children });

package/components/Header/components/HeaderTabs/HeaderTabsContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderTabs.module-C0CPm99L.js";
+import { s as styles } from "../../../../chunks/HeaderTabs.module-O7_awNvd.js";
 const HeaderTabsContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTabsContent, className), ...rest, ref, children });

package/components/Header/components/HeaderTabs/HeaderTabsControls.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderTabs.module-C0CPm99L.js";
+import { s as styles } from "../../../../chunks/HeaderTabs.module-O7_awNvd.js";
 const HeaderTabsControls = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTabsControls, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderTitle/HeaderTitle.js

@@ -3,7 +3,7 @@ import React from "react";
 import { HeaderTitleContent } from "./HeaderTitleContent.js";
 import { HeaderTitleControls } from "./HeaderTitleControls.js";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderTitle.module-BcBt41tC.js";
+import { s as styles } from "../../../../chunks/HeaderTitle.module-L21RUjgb.js";
 const HeaderTitle = Object.assign(
   React.forwardRef(function HeaderTitle2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTitle, className), ...rest, ref, children });

package/components/Header/components/HeaderTitle/HeaderTitleContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderTitle.module-BcBt41tC.js";
+import { s as styles } from "../../../../chunks/HeaderTitle.module-L21RUjgb.js";
 const HeaderTitleContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(

package/components/Header/components/HeaderTitle/HeaderTitleControls.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
-import { s as styles } from "../../../../chunks/HeaderTitle.module-BcBt41tC.js";
+import { s as styles } from "../../../../chunks/HeaderTitle.module-L21RUjgb.js";
 const HeaderTitleControls = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
     "div",