@sima-land/ui-nucleons 44.2.10 → 45.0.0-alpha.1

package/input/utils.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldMouseDown = exports.useFilledState = exports.definePlaceholderColor = exports.defineFilled = void 0;
+const react_1 = require("react");
+const colors_1 = require("../colors");
+/**
+ * Получив значения value и defaultValue для поля, определяет является ли оно заполненным.
+ * @param value Значение value.
+ * @param defaultValue Значение defaultValue.
+ * @return Является ли поле заполненным.
+ */
+function defineFilled(value, defaultValue) {
+    return [value, defaultValue].some(v => typeof v !== 'undefined' && `${v}` !== '');
+}
+exports.defineFilled = defineFilled;
+/**
+ * Получи информацию о состоянии поля возвращает цвет placeholder.
+ * @param state Состояние.
+ * @return Цвет.
+ */
+function definePlaceholderColor({ failed, disabled, }) {
+    let placeholderColor = undefined;
+    switch (true) {
+        case failed:
+            placeholderColor = colors_1.COLORS.get('additional-deep-red');
+            break;
+        case disabled:
+            placeholderColor = colors_1.COLORS.get('basic-gray24');
+            break;
+        case !disabled:
+            placeholderColor = colors_1.COLORS.get('basic-gray38');
+            break;
+    }
+    return placeholderColor;
+}
+exports.definePlaceholderColor = definePlaceholderColor;
+/**
+ * Хук состояния заполненности поля текстовым значением.
+ * @param ref Ref элемента поля.
+ * @param affectProps Свойства, влияющие на состояние заполненности.
+ * @return Кортеж: состояние; функция обновления состояния.
+ */
+function useFilledState(ref, { value, defaultValue, }) {
+    const [filled, setFilled] = (0, react_1.useState)(() => defineFilled(value, defaultValue));
+    const updateFilled = (0, react_1.useCallback)(event => {
+        setFilled(Boolean(event.currentTarget.value));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setFilled(Boolean((_a = ref.current) === null || _a === void 0 ? void 0 : _a.value));
+    });
+    return [filled, updateFilled];
+}
+exports.useFilledState = useFilledState;
+/**
+ * Хук, формирующий callback события mousedown на блоке поля, фокусирующий пользователя на поле.
+ * @param fieldRef Ref элемента поля.
+ * @param callback Будет вызвана по событию mousedown.
+ * @return Функция обратного вызова.
+ */
+function useFieldMouseDown(fieldRef, callback) {
+    return (0, react_1.useCallback)(event => {
+        const field = fieldRef.current;
+        callback === null || callback === void 0 ? void 0 : callback(event);
+        if (!event.defaultPrevented && field && event.target !== field) {
+            event.preventDefault();
+            field.focus();
+        }
+    }, [fieldRef, callback]);
+}
+exports.useFieldMouseDown = useFieldMouseDown;

package/layout/index.d.ts

@@ -1,11 +1,6 @@
-import React from 'react';
-declare type Breakpoint = 'mxs' | 'ms' | 'mm' | 'ml' | 'xs' | 's' | 'm' | 'l' | 'xl';
-export interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
-    /** Тэг. */
-    element?: string;
-    /** Список точек остановки на которых необходимо отключить ограничение ширины. */
-    disabledOn?: Array<Breakpoint>;
-}
-declare const DesktopLayout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLElement>>;
-declare const MobileLayout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLElement>>;
-export { DesktopLayout, MobileLayout };
+import { Breakpoint } from '../types';
+import { LayoutProps } from './types';
+import { Layout } from './layout';
+import { MobileLayout, DesktopLayout } from './legacy';
+export type { Breakpoint, LayoutProps };
+export { Layout, MobileLayout, DesktopLayout };

package/layout/index.js

@@ -1,62 +1,8 @@
 "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 layout_module_scss_1 = __importDefault(require("./layout.module.scss"));
-const cx = bind_1.default.bind(layout_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;
-};
-const DesktopLayout = createLayout('desktop', 'DesktopLayout');
-exports.DesktopLayout = DesktopLayout;
-const MobileLayout = createLayout('mobile', 'MobileLayout');
-exports.MobileLayout = MobileLayout;
+exports.DesktopLayout = exports.MobileLayout = exports.Layout = void 0;
+const layout_1 = require("./layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return layout_1.Layout; } });
+const legacy_1 = require("./legacy");
+Object.defineProperty(exports, "MobileLayout", { enumerable: true, get: function () { return legacy_1.MobileLayout; } });
+Object.defineProperty(exports, "DesktopLayout", { enumerable: true, get: function () { return legacy_1.DesktopLayout; } });

package/layout/layout.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { LayoutProps } from './types';
+/**
+ * Контейнер, формирующий отступы по горизонтали в соответствии с дизайн-гайдами.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Layout({ children, className, disabledOn, rootRef, ...rest }: Omit<LayoutProps, 'element'> & {
+    rootRef?: Ref<HTMLDivElement>;
+}): JSX.Element;

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' | 'additional-red' | 'additional-teal'>;
 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-util.scss

@@ -0,0 +1,37 @@
+@use '../colors';
+
+@mixin color($key) {
+  @if $key == 'basic-blue' {
+    color: colors.$basic-blue;
+    &:hover {
+      color: colors.$additional-deep-blue;
+    }
+  } @else if $key == 'basic-gray87' {
+    color: colors.$basic-gray87;
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  } @else if $key == 'basic-gray38' {
+    color: colors.$basic-gray38;
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  } @else if $key == 'basic-white' {
+    color: colors.$basic-white;
+    &:hover {
+      color: colors.$basic-gray4;
+    }
+  } @else if $key == 'additional-red' {
+    color: colors.$additional-red;
+    &:hover {
+      color: colors.$additional-deep-red;
+    }
+  } @else if $key == 'additional-teal' {
+    color: colors.$additional-teal;
+    &:hover {
+      color: colors.$additional-green;
+    }
+  } @else {
+    @warn '[link-color] No such color `#{$key}`.';
+  }
+}

package/link/link.module.scss

@@ -1,4 +1,5 @@
 @use '../colors';
+@use './link-util';
 
 .link,
 .link:link,
@@ -9,6 +10,9 @@
   font-weight: inherit; // @todo выяснить можно ли это убрать
   cursor: default;
   border-bottom-color: transparent;
+  &.underline {
+    text-decoration: underline;
+  }
 }
 
 .link:hover {
@@ -22,22 +26,25 @@
 }
 
 .link:not(.disabled).basic-blue {
-  color: colors.$basic-blue;
-  &:hover {
-    color: colors.$additional-deep-blue;
-  }
+  @include link-util.color('basic-blue');
 }
 
 .link:not(.disabled).basic-gray87 {
-  color: colors.$basic-gray87;
-  &:hover {
-    color: colors.$basic-gray54;
-  }
+  @include link-util.color('basic-gray87');
 }
 
 .link:not(.disabled).basic-gray38 {
-  color: colors.$basic-gray38;
-  &:hover {
-    color: colors.$basic-gray54;
-  }
+  @include link-util.color('basic-gray38');
+}
+
+.link:not(.disabled).basic-white {
+  @include link-util.color('basic-white');
+}
+
+.link:not(.disabled).additional-red {
+  @include link-util.color('additional-red');
+}
+
+.link:not(.disabled).additional-teal {
+  @include link-util.color('additional-teal');
 }

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;