@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/layout/legacy.js

@@ -1,47 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileLayout = exports.DesktopLayout = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const bind_1 = __importDefault(require("classnames/bind"));
-const legacy_module_scss_1 = __importDefault(require("./legacy.module.scss"));
-const cx = bind_1.default.bind(legacy_module_scss_1.default);
+const legacy_m_scss_1 = __importDefault(require("./legacy.m.scss"));
+const cx = bind_1.default.bind(legacy_m_scss_1.default);
 /**
  * Возвращает созданный функциональный компонент, формирующий Layout.
  * @param specificClass Специальный класс.
@@ -49,10 +16,7 @@ const cx = bind_1.default.bind(legacy_module_scss_1.default);
  * @return Элемент.
  */
 const createLayout = (specificClass, displayName) => {
-    const Component = (0, react_1.forwardRef)((_a, ref) => {
-        var { className, element: Element = 'div', disabledOn = [] } = _a, restProps = __rest(_a, ["className", "element", "disabledOn"]);
-        return (react_1.default.createElement(Element, Object.assign({}, restProps, { ref: ref, className: cx('layout', specificClass, className, disabledOn.map(key => `disabled-${key}`)) })));
-    });
+    const Component = (0, react_1.forwardRef)(({ className, element: Element = 'div', disabledOn = [], ...restProps }, ref) => ((0, jsx_runtime_1.jsx)(Element, { ...restProps, ref: ref, className: cx('layout', specificClass, className, disabledOn.map(key => `disabled-${key}`)) })));
     Component.displayName = displayName;
     return Component;
 };
@@ -66,3 +30,4 @@ exports.DesktopLayout = DesktopLayout;
  */
 const MobileLayout = createLayout('mobile', 'MobileLayout');
 exports.MobileLayout = MobileLayout;
+//# sourceMappingURL=legacy.js.map

package/layout/legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy.js","sourceRoot":"","sources":["../../src/layout/legacy.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAmC;AAEnC,2DAAyC;AACzC,oEAAsC;AAEtC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,uBAAO,CAAC,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CAAC,aAAqB,EAAE,WAAmB,EAAE,EAAE;IAClE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC/E,uBAAC,OAAO,OACD,SAAiB,EACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,aAAa,EACb,SAAS,EACT,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,CACzC,GACD,CACH,CACF,CAAC;IAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;IAEpC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAOtD,sCAAa;AALtB;;GAEG;AACH,MAAM,YAAY,GAAG,YAAY,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AAEpC,oCAAY"}

package/layout/types.d.ts

@@ -1,6 +1,8 @@
-import { HTMLAttributes } from 'react';
-import { Breakpoint } from '../types';
+import type { HTMLAttributes, Ref } from 'react';
+import type { Breakpoint } from '../types';
 export interface LayoutProps extends HTMLAttributes<HTMLElement> {
     /** Список точек остановки на которых необходимо отключить ограничение ширины. */
     disabledOn?: Breakpoint[];
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
 }

package/layout/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/layout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/layout/types.ts"],"names":[],"mappings":""}

package/link/index.d.ts

@@ -1,24 +1,2 @@
-import React from 'react';
-import { Token } from '../colors';
-export type LinkColor = Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38' | 'basic-white' | 'additional-red' | 'additional-teal'>;
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** Цвет (название токена). */
-    color?: LinkColor;
-    /** Нужно ли оборачивать содержимое комментариями no-index. */
-    noIndex?: boolean;
-    /** Выводить как псевдо-ссылку. */
-    pseudo?: boolean;
-    /** Отключает ссылку подобно кнопке. */
-    disabled?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-    /** Нужно ли подчеркивание. */
-    underline?: boolean;
-}
-/**
- * Компонент ссылки.
- * @param props Свойства компонента. Поддерживаются свойства span/a.
- * @param ref Реф для DOM-элемента ссылки.
- * @return Элемент.
- */
-export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export type { LinkColor, LinkProps } from './types';
+export { Link } from './link';

package/link/index.js

@@ -1,68 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-const react_1 = __importStar(require("react"));
-const get_no_index_1 = require("../helpers/get-no-index");
-const bind_1 = __importDefault(require("classnames/bind"));
-const link_module_scss_1 = __importDefault(require("./link.module.scss"));
-const cx = bind_1.default.bind(link_module_scss_1.default);
-/**
- * Возвращает объект со свойствами, формирующими содержимое.
- * @param children Содержимое линка.
- * @param noIndex Флаг запрета индексации.
- * @return Объект со свойствами, формирующими содержимое.
- */
-const getContentProps = (children, noIndex) => noIndex ? { dangerouslySetInnerHTML: (0, get_no_index_1.getNoIndex)(children) } : { children };
-/**
- * Компонент ссылки.
- * @param props Свойства компонента. Поддерживаются свойства span/a.
- * @param ref Реф для DOM-элемента ссылки.
- * @return Элемент.
- */
-exports.Link = (0, react_1.forwardRef)(function Link(_a, ref) {
-    var { children, className, color = 'basic-blue', disabled, noIndex = false, pseudo, role, tabIndex, underline, 'data-testid': testId = 'anchor' } = _a, restProps = __rest(_a, ["children", "className", "color", "disabled", "noIndex", "pseudo", "role", "tabIndex", "underline", 'data-testid']);
-    const baseProps = pseudo
-        ? {
-            role: role || 'button',
-            tabIndex: disabled ? undefined : tabIndex || 0,
-        }
-        : { role, tabIndex };
-    return (react_1.default.createElement("a", Object.assign({}, baseProps, restProps, { "data-testid": testId, ref: ref, className: cx('link', className, color, { disabled, underline }) }, getContentProps(children, noIndex))));
-});
+var link_1 = require("./link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return link_1.Link; } });
+//# sourceMappingURL=index.js.map

package/link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/link/index.ts"],"names":[],"mappings":";;;AACA,+BAA8B;AAArB,4FAAA,IAAI,OAAA"}

package/link/link.d.ts

@@ -0,0 +1,8 @@
+import type { LinkProps } from './types';
+/**
+ * Ссылка.
+ * @param props Свойства компонента. Поддерживаются свойства span/a.
+ * @param ref Реф для DOM-элемента ссылки.
+ * @return Элемент.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/link/link.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bind_1 = __importDefault(require("classnames/bind"));
+const link_m_scss_1 = __importDefault(require("./link.m.scss"));
+const cx = bind_1.default.bind(link_m_scss_1.default);
+/**
+ * Ссылка.
+ * @param props Свойства компонента. Поддерживаются свойства span/a.
+ * @param ref Реф для DOM-элемента ссылки.
+ * @return Элемент.
+ */
+exports.Link = (0, react_1.forwardRef)(function Link({ children, className, color = 'basic-blue', disabled, pseudo, role, tabIndex, underline, 'data-testid': testId = 'anchor', ...restProps }, ref) {
+    const baseProps = pseudo
+        ? {
+            role: role || 'button',
+            tabIndex: disabled ? undefined : tabIndex || 0,
+        }
+        : { role, tabIndex };
+    return ((0, jsx_runtime_1.jsx)("a", { ...baseProps, ...restProps, "data-testid": testId, ref: ref, className: cx('link', className, color, { disabled, underline }), children: children }));
+});
+//# sourceMappingURL=link.js.map

package/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/link/link.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAmC;AACnC,2DAAyC;AACzC,gEAAmC;AAEnC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,qBAAM,CAAC,CAAC;AAEnC;;;;;GAKG;AACU,QAAA,IAAI,GAAG,IAAA,kBAAU,EAA+B,SAAS,IAAI,CACxE,EACE,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,YAAY,EACpB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,QAAQ,EAChC,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM;QACtB,CAAC,CAAC;YACE,IAAI,EAAE,IAAI,IAAI,QAAQ;YACtB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC;SAC/C;QACH,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEvB,OAAO,CACL,iCACM,SAAS,KACT,SAAS,iBACA,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,YAE/D,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/link/types.d.ts

@@ -0,0 +1,14 @@
+import type { AnchorHTMLAttributes } from 'react';
+import type { Token } from '../colors';
+import type { WithTestId } from '../types';
+export type LinkColor = Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38' | 'basic-white' | 'additional-red' | 'additional-teal'>;
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, WithTestId {
+    /** Цвет (название токена). */
+    color?: LinkColor;
+    /** Выводить как псевдо-ссылку. */
+    pseudo?: boolean;
+    /** Отключает ссылку подобно кнопке. */
+    disabled?: boolean;
+    /** Нужно ли подчеркивание. */
+    underline?: boolean;
+}

package/link/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/link/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/link/types.ts"],"names":[],"mappings":""}

package/masked-input/index.d.ts

@@ -1,5 +1,3 @@
-import type { MaskedInputProps, MaskData, UseInputMaskOptions, UseInputMaskResult } from './types';
-import { MaskedInput } from './masked-input';
-import { useInputMask } from './hook';
-export type { MaskedInputProps, MaskData, UseInputMaskOptions, UseInputMaskResult };
-export { MaskedInput, useInputMask };
+export type { MaskedInputProps, MaskData, UseInputMaskOptions, UseInputMaskResult } from './types';
+export { MaskedInput } from './masked-input';
+export { useInputMask } from './use-input-mask';

package/masked-input/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputMask = exports.MaskedInput = void 0;
-const masked_input_1 = require("./masked-input");
+var masked_input_1 = require("./masked-input");
 Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return masked_input_1.MaskedInput; } });
-const hook_1 = require("./hook");
-Object.defineProperty(exports, "useInputMask", { enumerable: true, get: function () { return hook_1.useInputMask; } });
+var use_input_mask_1 = require("./use-input-mask");
+Object.defineProperty(exports, "useInputMask", { enumerable: true, get: function () { return use_input_mask_1.useInputMask; } });
+//# sourceMappingURL=index.js.map

package/masked-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/masked-input/index.ts"],"names":[],"mappings":";;;AACA,+CAA6C;AAApC,2GAAA,WAAW,OAAA;AACpB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA"}

package/masked-input/masked-input.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { MaskedInputProps } from './types';
 /**
  * Поле ввода текста по маске.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function MaskedInput({ mask, placeholder, pattern, value, defaultValue, baseInputProps, onFocus, onChange, onBlur, inputRef, ...props }: MaskedInputProps): JSX.Element;
+export declare function MaskedInput({ value, defaultValue, onChange, ...restProps }: MaskedInputProps): import("react/jsx-runtime").JSX.Element;

package/masked-input/masked-input.js

@@ -1,73 +1,62 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaskedInput = void 0;
-const react_1 = __importStar(require("react"));
+exports.MaskedInput = MaskedInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const input_1 = require("../input");
-const utils_1 = require("@krutoo/input-mask/dist/dom/utils");
-const hook_1 = require("./hook");
+const dom_1 = require("@krutoo/input-mask/dom");
+const use_input_mask_1 = require("./use-input-mask");
+/**
+ * Поле ввода текста по маске.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MaskedInput({ value, defaultValue, onChange, ...restProps }) {
+    const stateless = (0, react_1.useMemo)(() => typeof value !== 'undefined', []);
+    // ВАЖНО: при defaultValue состояние должно быть именно здесь (на уровень выше хука маски) для корректной работы
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(() => value ?? defaultValue ?? '');
+    if (stateless) {
+        return (0, jsx_runtime_1.jsx)(StatelessMaskedInput, { ...restProps, value: value, onChange: onChange });
+    }
+    return ((0, jsx_runtime_1.jsx)(StatelessMaskedInput, { ...restProps, value: currentValue, onChange: (event, data) => {
+            setCurrentValue(data.cleanValue);
+            onChange?.(event, data);
+        } }));
+}
 /**
  * Поле ввода текста по маске.
+ * Не имеет собственного состояния введенного значения.
  * @param props Свойства.
  * @return Элемент.
  */
-function MaskedInput(_a) {
-    var _b;
-    var { mask, placeholder = '_', pattern = '\\d', value, defaultValue, baseInputProps, onFocus, onChange, onBlur, inputRef } = _a, props = __rest(_a, ["mask", "placeholder", "pattern", "value", "defaultValue", "baseInputProps", "onFocus", "onChange", "onBlur", "inputRef"]);
-    const { store, bind } = (0, hook_1.useInputMask)({
+function StatelessMaskedInput({ mask, placeholder = '_', pattern = '\\d', value = '', baseInputProps, onFocus, onChange, onInput, onBlur, inputRef, ...restProps }) {
+    const { store, bind } = (0, use_input_mask_1.useInputMask)({
         value,
-        defaultValue,
         maskOptions: { mask, pattern, placeholder },
     });
     (0, react_1.useImperativeHandle)(inputRef, () => bind.ref.current);
-    const getData = (0, react_1.useCallback)(() => ({
+    const getMaskData = (0, react_1.useCallback)(() => ({
         value: store.getState().value,
-        cleanValue: utils_1.Value.toClean({ mask, placeholder }, store.getState().value),
+        cleanValue: dom_1.ValueUtil.maskedToClean({ mask, placeholder }, store.getState().value),
         completed: store.getState().value.length === mask.length,
     }), [store, mask, placeholder]);
-    return (react_1.default.createElement(input_1.Input, Object.assign({}, props, { baseInputProps: Object.assign(Object.assign({}, baseInputProps), { restPlaceholder: (_b = baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.restPlaceholder) !== null && _b !== void 0 ? _b : {
+    return ((0, jsx_runtime_1.jsx)(input_1.Input, { ...restProps, baseInputProps: {
+            ...baseInputProps,
+            restPlaceholder: baseInputProps?.restPlaceholder ?? {
                 value: mask.slice(store.getState().value.length),
                 shiftValue: store.getState().value,
-            } }), inputRef: bind.ref, value: bind.value, onFocus: event => {
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, getData());
+            },
+        }, inputRef: bind.ref, value: bind.value, onFocus: event => {
+            onFocus?.(event, getMaskData());
+        }, onInput: event => {
+            bind.onInput(event);
+            onInput?.(event, getMaskData());
         }, onChange: event => {
-            bind.onChange(event);
-            onChange === null || onChange === void 0 ? void 0 : onChange(event, getData());
+            // @todo следующая строка нужна чтобы в testing-library работал fireEvent.change, решить как быть
+            // bind.onInput(event);
+            onChange?.(event, getMaskData());
         }, onBlur: event => {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, getData());
-        } })));
+            onBlur?.(event, getMaskData());
+        } }));
 }
-exports.MaskedInput = MaskedInput;
+//# sourceMappingURL=masked-input.js.map

package/masked-input/masked-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masked-input.js","sourceRoot":"","sources":["../../src/masked-input/masked-input.tsx"],"names":[],"mappings":";;AAWA,kCAoBC;;AA/BD,iCAA4E;AAC5E,oCAAiC;AACjC,gDAAmD;AACnD,qDAAgD;AAGhD;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAoB;IAC3F,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,OAAO,KAAK,KAAK,WAAW,EAAE,EAAE,CAAC,CAAC;IAElE,gHAAgH;IAChH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,KAAK,IAAI,YAAY,IAAI,EAAE,CAAC,CAAC;IAEpF,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,uBAAC,oBAAoB,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACnF,CAAC;IAED,OAAO,CACL,uBAAC,oBAAoB,OACf,SAAS,EACb,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;YACxB,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC1B,CAAC,GACD,CACH,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,WAAW,GAAG,GAAG,EACjB,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,EAAE,EACV,cAAc,EACd,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,SAAS,EAC2B;IACvC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAA,6BAAY,EAAC;QACnC,KAAK;QACL,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;KAC5C,CAAC,CAAC;IAEH,IAAA,2BAAmB,EACjB,QAAQ,EACR,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CACvB,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,GAAa,EAAE,CAAC,CAAC;QACf,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK;QAC7B,UAAU,EAAE,eAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC;QAClF,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;KACzD,CAAC,EACF,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,uBAAC,aAAK,OACA,SAAS,EACb,cAAc,EAAE;YACd,GAAG,cAAc;YACjB,eAAe,EAAE,cAAc,EAAE,eAAe,IAAI;gBAClD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC;gBAChD,UAAU,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK;aACnC;SACF,EACD,QAAQ,EAAE,IAAI,CAAC,GAAG,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAClC,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAClC,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,iGAAiG;YACjG,uBAAuB;YACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QACnC,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,EAAE;YACd,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QACjC,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/masked-input/types.d.ts

@@ -1,7 +1,7 @@
 import type { Action, Store } from 'redux';
-import type { InputState } from '@krutoo/input-mask/dist/core';
+import type { InputState } from '@krutoo/input-mask/core';
 import type { InputProps } from '../input';
-import type { ChangeEvent, ChangeEventHandler, FocusEvent, RefObject } from 'react';
+import type { ChangeEvent, FocusEvent, FormEvent, FormEventHandler, RefObject } from 'react';
 export interface InputMaskReactOptions {
     /** Строковое представление маски. */
     mask: string;
@@ -10,11 +10,13 @@ export interface InputMaskReactOptions {
     /** Строковое представление регулярного выражения только доступных для ввода символов. */
     pattern: string;
 }
-export interface MaskedInputProps extends Omit<InputProps, 'onFocus' | 'onChange' | 'onBlur'>, Pick<InputMaskReactOptions, 'mask'>, Partial<Omit<InputMaskReactOptions, 'mask'>> {
+export interface MaskedInputProps extends Omit<InputProps, 'onFocus' | 'onChange' | 'onBlur' | 'onInput'>, Pick<InputMaskReactOptions, 'mask'>, Partial<Omit<InputMaskReactOptions, 'mask'>> {
     /** Сработает при фокусе. Вторым аргументом получит данные поля с маской. */
     onFocus?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
     /** Сработает при вводе. Вторым аргументом получит данные поля с маской. */
     onChange?: (event: ChangeEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Сработает при вводе. Вторым аргументом получит данные поля с маской. */
+    onInput?: (event: FormEvent<HTMLInputElement>, data: MaskData) => void;
     /** Сработает при "blur". Вторым аргументом получит данные поля с маской. */
     onBlur?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
 }
@@ -27,9 +29,8 @@ export interface MaskData {
     completed: boolean;
 }
 export interface UseInputMaskOptions {
+    value: string;
     maskOptions: InputMaskReactOptions;
-    value?: string;
-    defaultValue?: string;
 }
 export interface UseInputMaskResult {
     /** Хранилище состояния поля. */
@@ -38,7 +39,7 @@ export interface UseInputMaskResult {
     bind: {
         ref: RefObject<HTMLInputElement>;
         value: string;
-        onChange: ChangeEventHandler<HTMLInputElement>;
+        onInput: FormEventHandler<HTMLInputElement>;
     };
 }
 export interface ActionCreator<P = never> {

package/masked-input/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/masked-input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/masked-input/types.ts"],"names":[],"mappings":""}

package/masked-input/use-input-mask.d.ts

@@ -0,0 +1,9 @@
+import { UseInputMaskOptions, UseInputMaskResult } from './types';
+/**
+ * Хук для задания маски для поля ввода текста.
+ * ВАЖНО: этот хук не имеет и не должен иметь собственного состояния, которое бы не зависело от переданных аргументов.
+ * @todo Возможно стоит перенести в `@krutoo/input-mask`.
+ * @param props Опции.
+ * @return Интерфейс работы с маской.
+ */
+export declare function useInputMask({ value, maskOptions: maskOptionsProp, }: UseInputMaskOptions): UseInputMaskResult;

package/masked-input/use-input-mask.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputMask = useInputMask;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const on_1 = require("../helpers/on");
+const utils_1 = require("./utils");
+const dom_1 = require("@krutoo/input-mask/dom");
+/**
+ * Хук для задания маски для поля ввода текста.
+ * ВАЖНО: этот хук не имеет и не должен иметь собственного состояния, которое бы не зависело от переданных аргументов.
+ * @todo Возможно стоит перенести в `@krutoo/input-mask`.
+ * @param props Опции.
+ * @return Интерфейс работы с маской.
+ */
+function useInputMask({ value, maskOptions: maskOptionsProp, }) {
+    const inputRef = (0, react_1.useRef)(null);
+    // ВАЖНО: запоминаем опции тк RegExp - объект и при использовании литерала он будет каждый раз новым
+    const maskOptions = (0, react_1.useMemo)(() => ({
+        mask: maskOptionsProp.mask,
+        pattern: new RegExp(maskOptionsProp.pattern),
+        placeholder: maskOptionsProp.placeholder,
+    }), [maskOptionsProp.mask, maskOptionsProp.pattern, maskOptionsProp.placeholder]);
+    const createStore = (0, react_1.useCallback)(() => {
+        const newStore = (0, utils_1.createInputMaskStore)(maskOptions);
+        newStore.dispatch(utils_1.actions.manualChange({ value }));
+        return newStore;
+    }, [value, maskOptions]);
+    // ВАЖНО: store меняется только при изменении maskOptions поэтому createStore вынесен в useCallback
+    const store = (0, react_1.useMemo)(createStore, [maskOptions]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const offList = [
+            store.subscribe(() => {
+                if (inputRef.current) {
+                    dom_1.StateUtil.applyDiff(store.getState(), inputRef.current);
+                }
+            }),
+            (0, on_1.on)(document, 'selectionchange', () => {
+                if (inputRef.current && inputRef.current === document.activeElement) {
+                    store.dispatch(utils_1.actions.inputSelectionChange({ input: inputRef.current }));
+                }
+            }),
+        ];
+        return () => offList.forEach(fn => fn());
+    }, [store, inputRef]);
+    // each render: update state if value prop and state.value not equals
+    if (value !== dom_1.ValueUtil.maskedToClean(maskOptions, store.getState().value)) {
+        store.dispatch(utils_1.actions.manualChange({ value }));
+    }
+    // input field "input" event: update state
+    const onInput = (0, react_1.useCallback)(event => {
+        store.dispatch(utils_1.actions.inputChange({ input: event.currentTarget }));
+    }, [store]);
+    return {
+        store,
+        bind: {
+            ref: inputRef,
+            value: store.getState().value,
+            // ВАЖНО: именно onInput а не onChange потому что onInput срабатывает раньше
+            onInput,
+        },
+    };
+}
+//# sourceMappingURL=use-input-mask.js.map

package/masked-input/use-input-mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-mask.js","sourceRoot":"","sources":["../../src/masked-input/use-input-mask.ts"],"names":[],"mappings":";;AAeA,oCAmEC;AAlFD,iCAAuE;AACvE,oCAAqD;AACrD,sCAAmC;AAEnC,mCAAwD;AAExD,gDAA8D;AAE9D;;;;;;GAMG;AACH,SAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EAAE,eAAe,GACR;IACpB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,oGAAoG;IACpG,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,eAAe,CAAC,IAAI;QAC1B,OAAO,EAAE,IAAI,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;QAC5C,WAAW,EAAE,eAAe,CAAC,WAAW;KACzC,CAAC,EACF,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,OAAO,EAAE,eAAe,CAAC,WAAW,CAAC,CAC7E,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,MAAM,QAAQ,GAAG,IAAA,4BAAoB,EAAC,WAAW,CAAC,CAAC;QAEnD,QAAQ,CAAC,QAAQ,CAAC,eAAO,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAEnD,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,mGAAmG;IACnG,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,WAAW,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElD,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,MAAM,OAAO,GAAmB;YAC9B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;gBACnB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;oBACrB,eAAS,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAC1D,CAAC;YACH,CAAC,CAAC;YACF,IAAA,OAAE,EAAC,QAAQ,EAAE,iBAAiB,EAAE,GAAG,EAAE;gBACnC,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;oBACpE,KAAK,CAAC,QAAQ,CAAC,eAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;gBAC5E,CAAC;YACH,CAAC,CAAC;SACH,CAAC;QAEF,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,qEAAqE;IACrE,IAAI,KAAK,KAAK,eAAS,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC3E,KAAK,CAAC,QAAQ,CAAC,eAAO,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,0CAA0C;IAC1C,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,QAAQ,CAAC,eAAO,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO;QACL,KAAK;QACL,IAAI,EAAE;YACJ,GAAG,EAAE,QAAQ;YACb,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK;YAE7B,4EAA4E;YAC5E,OAAO;SACR;KACF,CAAC;AACJ,CAAC"}

package/masked-input/utils.d.ts

@@ -1,4 +1,4 @@
-import { InputState, ReducerOptions } from '@krutoo/input-mask/dist/core';
+import { type ReducerOptions, type InputState } from '@krutoo/input-mask/core';
 import { Store } from 'redux';
 import { ActionCreator } from './types';
 export declare const actions: {