@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

package/layout/layout.js

@@ -0,0 +1,32 @@
+"use strict";
+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.Layout = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const layout_module_scss_1 = __importDefault(require("./layout.module.scss"));
+const cx = bind_1.default.bind(layout_module_scss_1.default);
+/**
+ * Контейнер, формирующий отступы по горизонтали в соответствии с дизайн-гайдами.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Layout(_a) {
+    var { children, className, disabledOn = [], rootRef } = _a, rest = __rest(_a, ["children", "className", "disabledOn", "rootRef"]);
+    const rootClassName = cx('layout', className, disabledOn.map(key => `disabled-${key}`));
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: rootRef, className: rootClassName }), children));
+}
+exports.Layout = Layout;

package/layout/layout.module.scss

@@ -1,49 +1,56 @@
 @use '../breakpoints';
 
 .layout {
-  width: var(--l-width);
-  margin: 0 var(--l-gutter);
   @each $key, $val in breakpoints.$map {
     @include breakpoints.up($key) {
       &.disabled-#{$key} {
         width: auto;
-        margin: 0;
+        max-width: none;
+        padding-left: 0;
+        padding-right: 0;
+        margin-left: 0;
+        margin-right: 0;
       }
       &:not(.disabled-#{$key}) {
-        width: var(--l-width);
-        margin: 0 var(--l-gutter);
+        // ВАЖНО: не используем 100vw так как при использовании 100vw не вычитается ширина полосы прокрутки страницы
+        width: 100%;
+        max-width: var(--layout-fixed-width);
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: var(--layout-fluid-gutter);
+        padding-right: var(--layout-fluid-gutter);
       }
     }
   }
-}
-
-.mobile {
-  --l-gutter: 16px;
-  --l-width: calc(100vw - (2 * var(--l-gutter)));
+  @include breakpoints.up('mxs') {
+    --layout-fixed-width: initial;
+    --layout-fluid-gutter: 16px;
+  }
   @include breakpoints.up('mm') {
-    --l-width: 656px;
-    --l-gutter: auto;
+    --layout-fixed-width: 656px;
+    --layout-fluid-gutter: initial;
   }
   @include breakpoints.up('ml') {
-    --l-width: 672px;
-    --l-gutter: auto;
+    --layout-fixed-width: 672px;
+    --layout-fluid-gutter: initial;
   }
   @include breakpoints.up('xs') {
-    --l-width: 792px;
-    --l-gutter: auto;
+    --layout-fixed-width: initial;
+    --layout-fluid-gutter: 64px;
   }
-}
-
-.desktop {
-  min-width: 896px;
-  --l-gutter: 64px;
-  --l-width: calc(100vw - (2 * var(--l-gutter)));
   @include breakpoints.up('l') {
-    --l-width: 1472px;
-    --l-gutter: auto;
+    --layout-fixed-width: 1472px;
+    --layout-fluid-gutter: initial;
   }
   @include breakpoints.up('xl') {
-    --l-width: 1504px;
-    --l-gutter: auto;
+    --layout-fixed-width: 1504px;
+    --layout-fluid-gutter: initial;
+  }
+
+  // пока что не даём использовать приватные переменные чтобы не раскрывать принцип работы
+  // так как он может измениться
+  *:not(.layout) {
+    --layout-fixed-width: initial;
+    --layout-fluid-gutter: initial;
   }
 }

package/layout/legacy.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LayoutProps } from './types';
+/**
+ * @deprecated На адаптивных страницах стоит использовать Layout.
+ */
+declare const DesktopLayout: React.ForwardRefExoticComponent<LayoutProps & {
+    element?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
+/**
+ * @deprecated На адаптивных страницах стоит использовать Layout.
+ */
+declare const MobileLayout: React.ForwardRefExoticComponent<LayoutProps & {
+    element?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export { DesktopLayout, MobileLayout };

package/layout/legacy.js

@@ -0,0 +1,68 @@
+"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 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);
+/**
+ * Возвращает созданный функциональный компонент, формирующий Layout.
+ * @param specificClass Специальный класс.
+ * @param displayName Отображаемое имя компонента.
+ * @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}`)) })));
+    });
+    Component.displayName = displayName;
+    return Component;
+};
+/**
+ * @deprecated На адаптивных страницах стоит использовать Layout.
+ */
+const DesktopLayout = createLayout('desktop', 'DesktopLayout');
+exports.DesktopLayout = DesktopLayout;
+/**
+ * @deprecated На адаптивных страницах стоит использовать Layout.
+ */
+const MobileLayout = createLayout('mobile', 'MobileLayout');
+exports.MobileLayout = MobileLayout;

package/layout/legacy.module.scss

@@ -0,0 +1,49 @@
+@use '../breakpoints';
+
+.layout {
+  width: var(--l-width);
+  margin: 0 var(--l-gutter);
+  @each $key, $val in breakpoints.$map {
+    @include breakpoints.up($key) {
+      &.disabled-#{$key} {
+        width: auto;
+        margin: 0;
+      }
+      &:not(.disabled-#{$key}) {
+        width: var(--l-width);
+        margin: 0 var(--l-gutter);
+      }
+    }
+  }
+}
+
+.mobile {
+  --l-gutter: 16px;
+  --l-width: calc(100vw - (2 * var(--l-gutter)));
+  @include breakpoints.up('mm') {
+    --l-width: 656px;
+    --l-gutter: auto;
+  }
+  @include breakpoints.up('ml') {
+    --l-width: 672px;
+    --l-gutter: auto;
+  }
+  @include breakpoints.up('xs') {
+    --l-width: 792px;
+    --l-gutter: auto;
+  }
+}
+
+.desktop {
+  min-width: 896px;
+  --l-gutter: 64px;
+  --l-width: calc(100vw - (2 * var(--l-gutter)));
+  @include breakpoints.up('l') {
+    --l-width: 1472px;
+    --l-gutter: auto;
+  }
+  @include breakpoints.up('xl') {
+    --l-width: 1504px;
+    --l-gutter: auto;
+  }
+}

package/layout/types.d.ts

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

package/layout/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/link/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Token } from '../colors';
+export type LinkColor = Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38' | 'basic-white'>;
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Цвет (название токена). */
-    color?: Extract<Token, 'basic-blue' | 'basic-gray87' | 'basic-gray38'>;
+    color?: LinkColor;
     /** Нужно ли оборачивать содержимое комментариями no-index. */
     noIndex?: boolean;
     /** Выводить как псевдо-ссылку. */
@@ -11,6 +12,8 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     disabled?: boolean;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
+    /** Нужно ли подчеркивание. */
+    underline?: boolean;
 }
 /**
  * Компонент ссылки.

package/link/index.js

@@ -57,12 +57,12 @@ const getContentProps = (children, noIndex) => noIndex ? { dangerouslySetInnerHT
  * @return Элемент.
  */
 exports.Link = (0, react_1.forwardRef)(function Link(_a, ref) {
-    var { children, className, color = 'basic-blue', disabled, noIndex = false, pseudo, role, tabIndex, 'data-testid': testId = 'anchor' } = _a, restProps = __rest(_a, ["children", "className", "color", "disabled", "noIndex", "pseudo", "role", "tabIndex", 'data-testid']);
+    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 }) }, getContentProps(children, noIndex))));
+    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))));
 });

package/link/link.module.scss

@@ -9,6 +9,9 @@
   font-weight: inherit; // @todo выяснить можно ли это убрать
   cursor: default;
   border-bottom-color: transparent;
+  &.underline {
+    text-decoration: underline;
+  }
 }
 
 .link:hover {
@@ -41,3 +44,10 @@
     color: colors.$basic-gray54;
   }
 }
+
+.link:not(.disabled).basic-white {
+  color: colors.$basic-white;
+  &:hover {
+    color: colors.$basic-gray4;
+  }
+}

package/loading-overlay/index.d.ts

@@ -12,6 +12,7 @@ export interface LoadingOverlayProps {
 }
 /**
  * Компонент перекрытия для отображения состояния загрузки.
+ * @deprecated Следует использовать Spinner напрямую.
  * @param props Свойства.
  * @return Элемент.
  */

package/loading-overlay/index.js

@@ -11,6 +11,7 @@ const loading_overlay_module_scss_1 = __importDefault(require("./loading-overlay
 const cx = bind_1.default.bind(loading_overlay_module_scss_1.default);
 /**
  * Компонент перекрытия для отображения состояния загрузки.
+ * @deprecated Следует использовать Spinner напрямую.
  * @param props Свойства.
  * @return Элемент.
  */

package/masked-field/index.d.ts

@@ -14,6 +14,7 @@ export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onBlur
 }
 /**
  * Компонент текстового поля (TextField) с маской.
+ * @deprecated Теперь нужно использовать MaskedInput.
  * @param props Свойства.
  * @param props.mask Маска.
  * @param props.value Значение.

package/masked-field/index.js

@@ -41,6 +41,7 @@ const dom_1 = require("@krutoo/input-mask/dist/dom");
 const maskCommons = { placeholder: '_', pattern: /\d/ };
 /**
  * Компонент текстового поля (TextField) с маской.
+ * @deprecated Теперь нужно использовать MaskedInput.
  * @param props Свойства.
  * @param props.mask Маска.
  * @param props.value Значение.

package/masked-input/hook.d.ts

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

package/masked-input/hook.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputMask = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const on_1 = require("../helpers/on");
+const utils_1 = require("@krutoo/input-mask/dist/dom/utils");
+const utils_2 = require("./utils");
+/**
+ * Хук для задания маски для поля ввода текста.
+ * @todo Возможно стоит перенести в `@krutoo/input-mask`.
+ * @param props Опции.
+ * @return Интерфейс работы с маской.
+ */
+function useInputMask({ maskOptions: maskOptionsProp, value, defaultValue, }) {
+    // запоминаем опции тк 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 input = (0, react_1.useRef)(null);
+    const [initialValue] = (0, react_1.useState)(defaultValue);
+    // mask options change: init new store
+    const createStore = (0, react_1.useCallback)(() => {
+        var _a;
+        const newStore = (0, utils_2.createInputMaskStore)(maskOptions);
+        newStore.dispatch(utils_2.actions.manualChange({ value: (_a = value !== null && value !== void 0 ? value : initialValue) !== null && _a !== void 0 ? _a : '' }));
+        return newStore;
+    }, [maskOptions, value, initialValue]);
+    const store = (0, react_1.useMemo)(createStore, [maskOptions]);
+    // ВАЖНО: состояние нужно для того, чтобы вызывать render при изменении состояния хранилища
+    // ВАЖНО: используем именно store.getState(), тк reducer может вернуть состояние без изменений
+    const [, setState] = (0, react_1.useState)(() => store.getState());
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        const offList = [
+            store.subscribe(() => {
+                setState(store.getState());
+                if (input.current) {
+                    utils_1.State.applyDiff(store.getState(), input.current);
+                }
+            }),
+            (0, on_1.on)(document, 'selectionchange', () => {
+                if (input.current && input.current === document.activeElement) {
+                    store.dispatch(utils_2.actions.inputSelectionChange({ input: input.current }));
+                }
+            }),
+        ];
+        return () => offList.forEach(fn => fn());
+    }, [store]);
+    // value prop change: update state
+    const onValuePropChange = (0, react_1.useCallback)(() => {
+        if (typeof value !== 'undefined' &&
+            value !== utils_1.Value.toClean(maskOptions, store.getState().value)) {
+            store.dispatch(utils_2.actions.manualChange({ value }));
+        }
+    }, [value, store, maskOptions]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(onValuePropChange, [value]);
+    // input change: update state
+    const onChange = (0, react_1.useCallback)(event => {
+        store.dispatch(utils_2.actions.inputChange({ input: event.target }));
+    }, [store]);
+    return {
+        store,
+        bind: {
+            ref: input,
+            value: store.getState().value,
+            onChange,
+        },
+    };
+}
+exports.useInputMask = useInputMask;

package/masked-input/index.d.ts

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

package/masked-input/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputMask = exports.MaskedInput = void 0;
+const 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; } });

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

@@ -0,0 +1,8 @@
+/// <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;

package/masked-input/masked-input.js

@@ -0,0 +1,73 @@
+"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"));
+const input_1 = require("../input");
+const utils_1 = require("@krutoo/input-mask/dist/dom/utils");
+const hook_1 = require("./hook");
+/**
+ * Поле ввода текста по маске.
+ * @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)({
+        value,
+        defaultValue,
+        maskOptions: { mask, pattern, placeholder },
+    });
+    (0, react_1.useImperativeHandle)(inputRef, () => bind.ref.current);
+    const getData = (0, react_1.useCallback)(() => ({
+        value: store.getState().value,
+        cleanValue: utils_1.Value.toClean({ 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 : {
+                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());
+        }, onChange: event => {
+            bind.onChange(event);
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, getData());
+        }, onBlur: event => {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, getData());
+        } })));
+}
+exports.MaskedInput = MaskedInput;

package/masked-input/types.d.ts

@@ -0,0 +1,51 @@
+import type { Action, Store } from 'redux';
+import type { InputState } from '@krutoo/input-mask/dist/core';
+import type { InputProps } from '../input';
+import type { ChangeEvent, ChangeEventHandler, FocusEvent, RefObject } from 'react';
+export interface InputMaskReactOptions {
+    /** Строковое представление маски. */
+    mask: string;
+    /** Символ, который в маске используется как обозначение вводимого места. */
+    placeholder: string;
+    /** Строковое представление регулярного выражения только доступных для ввода символов. */
+    pattern: string;
+}
+export interface MaskedInputProps extends Omit<InputProps, 'onFocus' | 'onChange' | 'onBlur'>, Pick<InputMaskReactOptions, 'mask'>, Partial<Omit<InputMaskReactOptions, 'mask'>> {
+    /** Сработает при фокусе. Вторым аргументом получит данные поля с маской. */
+    onFocus?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Сработает при вводе. Вторым аргументом получит данные поля с маской. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Сработает при "blur". Вторым аргументом получит данные поля с маской. */
+    onBlur?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
+}
+export interface MaskData {
+    /** Значение в поле. */
+    value: string;
+    /** Значение, очищенное от маски. */
+    cleanValue: string;
+    /** Заполнено ли значение по маске полностью. */
+    completed: boolean;
+}
+export interface UseInputMaskOptions {
+    maskOptions: InputMaskReactOptions;
+    value?: string;
+    defaultValue?: string;
+}
+export interface UseInputMaskResult {
+    /** Хранилище состояния поля. */
+    store: Store<InputState>;
+    /** Свойства, которые необходимо применить к элементу поля. */
+    bind: {
+        ref: RefObject<HTMLInputElement>;
+        value: string;
+        onChange: ChangeEventHandler<HTMLInputElement>;
+    };
+}
+export interface ActionCreator<P = never> {
+    (payload: P): Action<string> & {
+        payload: P;
+    };
+    is(action: Action): action is Action<string> & {
+        payload: P;
+    };
+}

package/masked-input/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/masked-input/utils.d.ts

@@ -0,0 +1,15 @@
+import { InputState, ReducerOptions } from '@krutoo/input-mask/dist/core';
+import { Store } from 'redux';
+import { ActionCreator } from './types';
+export declare const actions: {
+    readonly manualChange: ActionCreator<{
+        value: string;
+    }>;
+    readonly inputChange: ActionCreator<{
+        input: HTMLInputElement;
+    }>;
+    readonly inputSelectionChange: ActionCreator<{
+        input: HTMLInputElement;
+    }>;
+};
+export declare function createInputMaskStore(options: ReducerOptions, initialState?: InputState): Store<InputState>;