@alfalab/core-components-masked-input 6.1.18 → 6.2.0

package/Component.d.ts

@@ -32,38 +32,9 @@ type MaskedInputProps = InputProps & {
     onBeforeDisplay?: TextMaskConfig['pipe'];
 };
 declare const PLACEHOLDER_CHAR = "\u2000";
-declare const MaskedInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Маска для поля ввода

package/Component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"textHidden":"masked-input__textHidden_1msd8"};
+var styles = {"textHidden":"masked-input__textHidden_y5umu"};
 require('./index.css')
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
@@ -23,23 +23,23 @@ var PLACEHOLDER_CHAR = '\u2000';
 var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
     var _b;
     var mask = _a.mask, _c = _a.keepCharPositions, keepCharPositions = _c === void 0 ? false : _c, value = _a.value, defaultValue = _a.defaultValue, className = _a.className, onBeforeDisplay = _a.onBeforeDisplay, onChange = _a.onChange, onClear = _a.onClear, restProps = tslib.__rest(_a, ["mask", "keepCharPositions", "value", "defaultValue", "className", "onBeforeDisplay", "onChange", "onClear"]);
-    var inputRef = React.useRef(null);
+    var _d = React.useState(null), inputNode = _d[0], setInputNode = _d[1];
     var textMask = React.useRef(null);
-    var _d = React.useState(value || defaultValue || ''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = React.useState(value || defaultValue || ''), inputValue = _e[0], setInputValue = _e[1];
     // Не показываем сырое значение до применения маски
-    var _e = React.useState(true), textHidden = _e[0], setTextHidden = _e[1];
+    var _f = React.useState(true), textHidden = _f[0], setTextHidden = _f[1];
     var update = React.useCallback(function (newValue) {
         if (newValue === void 0) { newValue = ''; }
-        if (textMask.current && inputRef.current) {
+        if (textMask.current && inputNode) {
             try {
                 textMask.current.update(newValue);
             }
             catch (e) {
                 // ignore masking errors
             }
-            setInputValue(inputRef.current.value);
+            setInputValue(inputNode.value);
         }
-    }, []);
+    }, [inputNode]);
     var handleInputChange = React.useCallback(function (event) {
         update(event.target.value);
         if (onChange) {
@@ -54,10 +54,10 @@ var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
             onClear(event);
     }, [onClear, update]);
     React.useEffect(function () {
-        if (inputRef.current) {
+        if (inputNode) {
             textMask.current = textMaskCore.createTextMaskInputElement({
                 mask: mask,
-                inputElement: inputRef.current,
+                inputElement: inputNode,
                 pipe: onBeforeDisplay,
                 guide: false,
                 keepCharPositions: keepCharPositions,
@@ -68,14 +68,14 @@ var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
                 previousConformedValue: '',
             });
         }
-    }, [onBeforeDisplay, mask, keepCharPositions]);
+    }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
     React.useEffect(function () {
         update(value || defaultValue);
     }, [value, update, defaultValue]);
     React.useEffect(function () {
         setTextHidden(false);
     }, []);
-    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { className: cn__default.default(className, (_b = {}, _b[styles.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs__default.default([ref, inputRef]) })));
+    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { className: cn__default.default(className, (_b = {}, _b[styles.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs__default.default([ref, setInputNode]) })));
 });
 
 exports.MaskedInput = MaskedInput;

package/cssm/Component.d.ts

@@ -32,38 +32,9 @@ type MaskedInputProps = InputProps & {
     onBeforeDisplay?: TextMaskConfig['pipe'];
 };
 declare const PLACEHOLDER_CHAR = "\u2000";
-declare const MaskedInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Маска для поля ввода

package/cssm/Component.js

@@ -22,23 +22,23 @@ var PLACEHOLDER_CHAR = '\u2000';
 var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
     var _b;
     var mask = _a.mask, _c = _a.keepCharPositions, keepCharPositions = _c === void 0 ? false : _c, value = _a.value, defaultValue = _a.defaultValue, className = _a.className, onBeforeDisplay = _a.onBeforeDisplay, onChange = _a.onChange, onClear = _a.onClear, restProps = tslib.__rest(_a, ["mask", "keepCharPositions", "value", "defaultValue", "className", "onBeforeDisplay", "onChange", "onClear"]);
-    var inputRef = React.useRef(null);
+    var _d = React.useState(null), inputNode = _d[0], setInputNode = _d[1];
     var textMask = React.useRef(null);
-    var _d = React.useState(value || defaultValue || ''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = React.useState(value || defaultValue || ''), inputValue = _e[0], setInputValue = _e[1];
     // Не показываем сырое значение до применения маски
-    var _e = React.useState(true), textHidden = _e[0], setTextHidden = _e[1];
+    var _f = React.useState(true), textHidden = _f[0], setTextHidden = _f[1];
     var update = React.useCallback(function (newValue) {
         if (newValue === void 0) { newValue = ''; }
-        if (textMask.current && inputRef.current) {
+        if (textMask.current && inputNode) {
             try {
                 textMask.current.update(newValue);
             }
             catch (e) {
                 // ignore masking errors
             }
-            setInputValue(inputRef.current.value);
+            setInputValue(inputNode.value);
         }
-    }, []);
+    }, [inputNode]);
     var handleInputChange = React.useCallback(function (event) {
         update(event.target.value);
         if (onChange) {
@@ -53,10 +53,10 @@ var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
             onClear(event);
     }, [onClear, update]);
     React.useEffect(function () {
-        if (inputRef.current) {
+        if (inputNode) {
             textMask.current = textMaskCore.createTextMaskInputElement({
                 mask: mask,
-                inputElement: inputRef.current,
+                inputElement: inputNode,
                 pipe: onBeforeDisplay,
                 guide: false,
                 keepCharPositions: keepCharPositions,
@@ -67,14 +67,14 @@ var MaskedInput = React__default.default.forwardRef(function (_a, ref) {
                 previousConformedValue: '',
             });
         }
-    }, [onBeforeDisplay, mask, keepCharPositions]);
+    }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
     React.useEffect(function () {
         update(value || defaultValue);
     }, [value, update, defaultValue]);
     React.useEffect(function () {
         setTextHidden(false);
     }, []);
-    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { className: cn__default.default(className, (_b = {}, _b[styles__default.default.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs__default.default([ref, inputRef]) })));
+    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { className: cn__default.default(className, (_b = {}, _b[styles__default.default.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs__default.default([ref, setInputNode]) })));
 });
 
 exports.MaskedInput = MaskedInput;

package/esm/Component.d.ts

@@ -32,38 +32,9 @@ type MaskedInputProps = InputProps & {
     onBeforeDisplay?: TextMaskConfig['pipe'];
 };
 declare const PLACEHOLDER_CHAR = "\u2000";
-declare const MaskedInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Маска для поля ввода

package/esm/Component.js

@@ -1,11 +1,11 @@
 import { __rest, __assign } from 'tslib';
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { createTextMaskInputElement } from 'text-mask-core';
 import { Input } from '@alfalab/core-components-input/esm';
 
-var styles = {"textHidden":"masked-input__textHidden_1msd8"};
+var styles = {"textHidden":"masked-input__textHidden_y5umu"};
 require('./index.css')
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
@@ -13,23 +13,23 @@ var PLACEHOLDER_CHAR = '\u2000';
 var MaskedInput = React.forwardRef(function (_a, ref) {
     var _b;
     var mask = _a.mask, _c = _a.keepCharPositions, keepCharPositions = _c === void 0 ? false : _c, value = _a.value, defaultValue = _a.defaultValue, className = _a.className, onBeforeDisplay = _a.onBeforeDisplay, onChange = _a.onChange, onClear = _a.onClear, restProps = __rest(_a, ["mask", "keepCharPositions", "value", "defaultValue", "className", "onBeforeDisplay", "onChange", "onClear"]);
-    var inputRef = useRef(null);
+    var _d = useState(null), inputNode = _d[0], setInputNode = _d[1];
     var textMask = useRef(null);
-    var _d = useState(value || defaultValue || ''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = useState(value || defaultValue || ''), inputValue = _e[0], setInputValue = _e[1];
     // Не показываем сырое значение до применения маски
-    var _e = useState(true), textHidden = _e[0], setTextHidden = _e[1];
+    var _f = useState(true), textHidden = _f[0], setTextHidden = _f[1];
     var update = useCallback(function (newValue) {
         if (newValue === void 0) { newValue = ''; }
-        if (textMask.current && inputRef.current) {
+        if (textMask.current && inputNode) {
             try {
                 textMask.current.update(newValue);
             }
             catch (e) {
                 // ignore masking errors
             }
-            setInputValue(inputRef.current.value);
+            setInputValue(inputNode.value);
         }
-    }, []);
+    }, [inputNode]);
     var handleInputChange = useCallback(function (event) {
         update(event.target.value);
         if (onChange) {
@@ -44,10 +44,10 @@ var MaskedInput = React.forwardRef(function (_a, ref) {
             onClear(event);
     }, [onClear, update]);
     useEffect(function () {
-        if (inputRef.current) {
+        if (inputNode) {
             textMask.current = createTextMaskInputElement({
                 mask: mask,
-                inputElement: inputRef.current,
+                inputElement: inputNode,
                 pipe: onBeforeDisplay,
                 guide: false,
                 keepCharPositions: keepCharPositions,
@@ -58,14 +58,14 @@ var MaskedInput = React.forwardRef(function (_a, ref) {
                 previousConformedValue: '',
             });
         }
-    }, [onBeforeDisplay, mask, keepCharPositions]);
+    }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
     useEffect(function () {
         update(value || defaultValue);
     }, [value, update, defaultValue]);
     useEffect(function () {
         setTextHidden(false);
     }, []);
-    return (React.createElement(Input, __assign({}, restProps, { className: cn(className, (_b = {}, _b[styles.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs([ref, inputRef]) })));
+    return (React.createElement(Input, __assign({}, restProps, { className: cn(className, (_b = {}, _b[styles.textHidden] = textHidden, _b)), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs([ref, setInputNode]) })));
 });
 
 export { MaskedInput, PLACEHOLDER_CHAR };

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g931 */
-.masked-input__textHidden_1msd8 input {
+/* hash: tsm29 */
+.masked-input__textHidden_y5umu input {
     opacity: 0;
 }

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g931 */
-.masked-input__textHidden_1msd8 input {
+/* hash: tsm29 */
+.masked-input__textHidden_y5umu input {
     opacity: 0;
 }

package/modern/Component.d.ts

@@ -32,38 +32,9 @@ type MaskedInputProps = InputProps & {
     onBeforeDisplay?: TextMaskConfig['pipe'];
 };
 declare const PLACEHOLDER_CHAR = "\u2000";
-declare const MaskedInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
-    value?: string | undefined;
-    defaultValue?: string | undefined;
-    block?: boolean | undefined;
-    clear?: boolean | undefined;
-    size?: "s" | "m" | "l" | "xl" | undefined;
-    colors?: "default" | "inverted" | undefined;
-    error?: React.ReactNode;
-    success?: boolean | undefined;
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelView?: "inner" | "outer" | undefined;
-    type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
-    wrapperRef?: React.Ref<HTMLDivElement> | undefined;
-    leftAddons?: React.ReactNode;
-    rightAddons?: React.ReactNode;
-    bottomAddons?: React.ReactNode;
-    className?: string | undefined;
-    fieldClassName?: string | undefined;
-    inputClassName?: string | undefined;
-    labelClassName?: string | undefined;
-    addonsClassName?: string | undefined;
-    focusedClassName?: string | undefined;
-    filledClassName?: string | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void) | undefined;
-    onClear?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
-    onClick?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void) | undefined;
-    dataTestId?: string | undefined;
+declare const MaskedInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & {
     /**
      * Маска для поля ввода

package/modern/Component.js

@@ -1,31 +1,31 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { createTextMaskInputElement } from 'text-mask-core';
 import { Input } from '@alfalab/core-components-input/modern';
 
-const styles = {"textHidden":"masked-input__textHidden_1msd8"};
+const styles = {"textHidden":"masked-input__textHidden_y5umu"};
 require('./index.css')
 
 // Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
 const PLACEHOLDER_CHAR = '\u2000';
 const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value, defaultValue, className, onBeforeDisplay, onChange, onClear, ...restProps }, ref) => {
-    const inputRef = useRef(null);
+    const [inputNode, setInputNode] = useState(null);
     const textMask = useRef(null);
     const [inputValue, setInputValue] = useState(value || defaultValue || '');
     // Не показываем сырое значение до применения маски
     const [textHidden, setTextHidden] = useState(true);
     const update = useCallback((newValue = '') => {
-        if (textMask.current && inputRef.current) {
+        if (textMask.current && inputNode) {
             try {
                 textMask.current.update(newValue);
             }
             catch (e) {
                 // ignore masking errors
             }
-            setInputValue(inputRef.current.value);
+            setInputValue(inputNode.value);
         }
-    }, []);
+    }, [inputNode]);
     const handleInputChange = useCallback((event) => {
         update(event.target.value);
         if (onChange) {
@@ -40,10 +40,10 @@ const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value,
             onClear(event);
     }, [onClear, update]);
     useEffect(() => {
-        if (inputRef.current) {
+        if (inputNode) {
             textMask.current = createTextMaskInputElement({
                 mask,
-                inputElement: inputRef.current,
+                inputElement: inputNode,
                 pipe: onBeforeDisplay,
                 guide: false,
                 keepCharPositions,
@@ -54,14 +54,14 @@ const MaskedInput = React.forwardRef(({ mask, keepCharPositions = false, value,
                 previousConformedValue: '',
             });
         }
-    }, [onBeforeDisplay, mask, keepCharPositions]);
+    }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
     useEffect(() => {
         update(value || defaultValue);
     }, [value, update, defaultValue]);
     useEffect(() => {
         setTextHidden(false);
     }, []);
-    return (React.createElement(Input, { ...restProps, className: cn(className, { [styles.textHidden]: textHidden }), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs([ref, inputRef]) }));
+    return (React.createElement(Input, { ...restProps, className: cn(className, { [styles.textHidden]: textHidden }), value: inputValue, onChange: handleInputChange, onClear: handleClear, ref: mergeRefs([ref, setInputNode]) }));
 });
 
 export { MaskedInput, PLACEHOLDER_CHAR };

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g931 */
-.masked-input__textHidden_1msd8 input {
+/* hash: tsm29 */
+.masked-input__textHidden_y5umu input {
     opacity: 0;
 }

package/package.json

@@ -1,11 +1,31 @@
 {
     "name": "@alfalab/core-components-masked-input",
-    "version": "6.1.18",
+    "version": "6.2.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -14,7 +34,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.18",
+        "@alfalab/core-components-input": "^12.0.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",
         "text-mask-core": "^5.1.2",

package/src/Component.tsx

@@ -0,0 +1,142 @@
+import React, { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { createTextMaskInputElement, TextMaskInputElement } from 'text-mask-core';
+
+import { Input, InputProps } from '@alfalab/core-components-input';
+
+import styles from './index.module.css';
+
+// TODO: заставить rollup добавлять кастомные декларации в сборку
+type Mask = Array<string | RegExp>;
+type TextMaskConfig = {
+    currentCaretPosition: number;
+    rawValue: string;
+    previousConformedValue: string;
+    mask?: Mask | ((rawValue: string) => Mask);
+    guide?: boolean;
+    showMask?: boolean;
+    placeholderChar?: string;
+    keepCharPositions?: boolean;
+    pipe?: (
+        conformedValue: string,
+        config: TextMaskConfig,
+    ) => false | string | { value: string; indexesOfPipedChars: number[] };
+};
+
+export type MaskedInputProps = InputProps & {
+    /**
+     * Маска для поля ввода
+     * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask-array
+     */
+    mask?: TextMaskConfig['mask'];
+
+    /**
+     * Управляет поведением компонента при удалении символов
+     */
+    keepCharPositions?: TextMaskConfig['keepCharPositions'];
+
+    /**
+     * Дает возможность изменить значение поля перед рендером
+     */
+    onBeforeDisplay?: TextMaskConfig['pipe'];
+};
+
+// Символ плейсхолдера не может входить в маску, поэтому вместо пробела используется \u2000
+export const PLACEHOLDER_CHAR = '\u2000';
+
+export const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
+    (
+        {
+            mask,
+            keepCharPositions = false,
+            value,
+            defaultValue,
+            className,
+            onBeforeDisplay,
+            onChange,
+            onClear,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const [inputNode, setInputNode] = useState<HTMLInputElement | null>(null);
+        const textMask = useRef<TextMaskInputElement | null>(null);
+
+        const [inputValue, setInputValue] = useState(value || defaultValue || '');
+        // Не показываем сырое значение до применения маски
+        const [textHidden, setTextHidden] = useState(true);
+
+        const update = useCallback(
+            (newValue = '') => {
+                if (textMask.current && inputNode) {
+                    try {
+                        textMask.current.update(newValue);
+                    } catch (e) {
+                        // ignore masking errors
+                    }
+
+                    setInputValue(inputNode.value);
+                }
+            },
+            [inputNode],
+        );
+
+        const handleInputChange = useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+                update(event.target.value);
+
+                if (onChange) {
+                    onChange(event, {
+                        value: event.target.value,
+                    });
+                }
+            },
+            [onChange, update],
+        );
+
+        const handleClear = useCallback(
+            (event: MouseEvent<HTMLButtonElement>) => {
+                update('');
+                if (onClear) onClear(event);
+            },
+            [onClear, update],
+        );
+
+        useEffect(() => {
+            if (inputNode) {
+                textMask.current = createTextMaskInputElement({
+                    mask,
+                    inputElement: inputNode,
+                    pipe: onBeforeDisplay,
+                    guide: false,
+                    keepCharPositions,
+                    showMask: false,
+                    placeholderChar: PLACEHOLDER_CHAR,
+                    rawValue: '',
+                    currentCaretPosition: 0,
+                    previousConformedValue: '',
+                });
+            }
+        }, [onBeforeDisplay, mask, keepCharPositions, inputNode]);
+
+        useEffect(() => {
+            update(value || defaultValue);
+        }, [value, update, defaultValue]);
+
+        useEffect(() => {
+            setTextHidden(false);
+        }, []);
+
+        return (
+            <Input
+                {...restProps}
+                className={cn(className, { [styles.textHidden]: textHidden })}
+                value={inputValue}
+                onChange={handleInputChange}
+                onClear={handleClear}
+                ref={mergeRefs([ref, setInputNode])}
+            />
+        );
+    },
+);

package/src/index.module.css

@@ -0,0 +1,3 @@
+.textHidden input {
+    opacity: 0;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';