@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.41

package/helpers/format-number.d.ts

@@ -1,7 +0,0 @@
-/**
- * Форматирует число.
- * @param value Число для форматирования.
- * @param separator Разделяющий символ для чисел больше 999.
- * @return Массив строк с целой и дробной отоформатированными частями числа.
- */
-export declare function formatNumber(value: number | string, separator?: string): string[];

package/helpers/format-number.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatNumber = void 0;
-/**
- * Форматирует число.
- * @param value Число для форматирования.
- * @param separator Разделяющий символ для чисел больше 999.
- * @return Массив строк с целой и дробной отоформатированными частями числа.
- */
-function formatNumber(value, separator) {
-    const pureSeparator = String(separator) === separator ? separator : ' ';
-    const number = Number(value);
-    let result = [];
-    if (!isNaN(number) && isFinite(number)) {
-        const decimals = number < 0.01 && number > 0 ? 4 : 2;
-        result = [
-            number.toFixed(2).replace(/\.[^.]*$/g, ''),
-            number.toFixed(decimals).replace(/^.*\./g, ''), // убираем все числа до точки и точку
-        ];
-        const array = result[0].split(''); // получаем массив строк с цифрами из строки целой части числа
-        const separated = [];
-        while (array.length) {
-            separated.unshift(array.splice(-3).join('')); // вытаскиваем последние три цифры и объединяем в строку
-        }
-        result[0] = separated.join(pureSeparator); // подменяем целую часть на целую разделённую
-    }
-    return result;
-}
-exports.formatNumber = formatNumber;

package/helpers/get-no-index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Возвращает объект с исходной строкой в тэге <!--noindex--> для запрета отслеживания контента поисковиками.
- * @param content Исходная строка.
- * @return Объект, содержащий обернутую строку, для использования c атрибутом dangerouslySetInnerHTML.
- */
-export declare function getNoIndex(content: unknown): {
-    __html: string;
-} | undefined;

package/helpers/get-no-index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNoIndex = void 0;
-/**
- * Возвращает объект с исходной строкой в тэге <!--noindex--> для запрета отслеживания контента поисковиками.
- * @param content Исходная строка.
- * @return Объект, содержащий обернутую строку, для использования c атрибутом dangerouslySetInnerHTML.
- */
-function getNoIndex(content) {
-    return content ? { __html: `<!--noindex-->${String(content)}<!--/noindex-->` } : undefined;
-}
-exports.getNoIndex = getNoIndex;

package/helpers/rename.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="lodash" />
-/// <reference types="lodash" />
-type ObjectKey = string | number | symbol;
-/**
- * Переименовывает свойство, возвращая новый объект.
- * @deprecated Эта функция не относится напрямую к работе с UI и будет удалена в будущем.
- * @param fromKey Старый ключ.
- * @param toKey Новый ключ.
- * @param source Объект.
- * @return Новый объект.
- */
-export declare const rename: import("lodash").CurriedFunction3<ObjectKey, ObjectKey, any, import("lodash").Omit<any, ObjectKey>>;
-export default rename;

package/helpers/rename.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.rename = void 0;
-const fp_1 = require("lodash/fp");
-/**
- * Переименовывает свойство, возвращая новый объект.
- * @deprecated Эта функция не относится напрямую к работе с UI и будет удалена в будущем.
- * @param fromKey Старый ключ.
- * @param toKey Новый ключ.
- * @param source Объект.
- * @return Новый объект.
- */
-exports.rename = (0, fp_1.curry)((fromKey, toKey, source) => (0, fp_1.assoc)(toKey, (0, fp_1.prop)(fromKey, source), (0, fp_1.omit)([fromKey], source)));
-exports.default = exports.rename;

package/helpers/with-prevent.d.ts

@@ -1,11 +0,0 @@
-import { SyntheticEvent } from 'react';
-/**
- * Декорирует переданную функцию-обработчик события вызывая preventDefault и stopPropagation.
- * @param callback Функция-обработчик.
- * @return Декорированная функция-обработчик.
- */
-export declare function withEventMute<T extends Event | SyntheticEvent>(callback?: (event: T) => void): (event: T) => void;
-/**
- * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
- */
-export default withEventMute;

package/helpers/with-prevent.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withEventMute = void 0;
-/**
- * Декорирует переданную функцию-обработчик события вызывая preventDefault и stopPropagation.
- * @param callback Функция-обработчик.
- * @return Декорированная функция-обработчик.
- */
-function withEventMute(callback) {
-    return (event) => {
-        event.preventDefault();
-        event.stopPropagation(); // @todo придумать как вынести
-        callback === null || callback === void 0 ? void 0 : callback(event);
-    };
-}
-exports.withEventMute = withEventMute;
-/**
- * @deprecated Следует использовать именованный экспорт. Экспорт по умолчанию будет удалён в будущем.
- */
-exports.default = withEventMute;

package/hint-deprecated/hint.module.scss

@@ -1,61 +0,0 @@
-@use '../colors';
-
-.root {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  &.top,
-  &.bottom {
-    flex-direction: column;
-  }
-  &.top::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 4px 0;
-    border-color: colors.$basic-gray76 transparent transparent transparent;
-  }
-  &.right::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 4px 4px 0;
-    border-color: transparent colors.$basic-gray76 transparent transparent;
-  }
-  &.bottom::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 4px 4px;
-    border-color: transparent transparent colors.$basic-gray76 transparent;
-  }
-  &.left::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 0 4px 4px;
-    border-color: transparent transparent transparent colors.$basic-gray76;
-  }
-}
-
-.body {
-  align-items: center;
-  background: colors.$basic-gray76;
-  border-radius: 4px;
-  color: #fff;
-  display: flex;
-  font-size: 14px;
-  line-height: 20px;
-  min-height: 36px;
-  padding: 8px;
-  white-space: nowrap;
-  text-align: center;
-}

package/hint-deprecated/index.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type Direction = 'top' | 'left' | 'bottom' | 'right';
-export interface HintProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** С какой стороны появляется хинт. */
-    direction: Direction;
-}
-/**
- * @deprecated Теперь нужно использовать `hint`.
- */
-export declare const Hint: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<HTMLDivElement | null>>;
-export {};

package/hint-deprecated/index.js

@@ -1,53 +0,0 @@
-"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.Hint = void 0;
-const react_1 = __importStar(require("react"));
-const shadows_1 = require("../styling/shadows");
-const bind_1 = __importDefault(require("classnames/bind"));
-const hint_module_scss_1 = __importDefault(require("./hint.module.scss"));
-const cx = bind_1.default.bind(hint_module_scss_1.default);
-/**
- * @deprecated Теперь нужно использовать `hint`.
- */
-exports.Hint = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, direction } = _a, restProps = __rest(_a, ["children", "className", "direction"]);
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { ref: ref, className: cx('root', className, direction), "data-testid": 'hint' }),
-        react_1.default.createElement("div", { className: cx('body', shadows_1.BoxShadow.z4) }, children)));
-});

package/hooks/intersection/readme.md

@@ -1,55 +0,0 @@
-# Утилиты для unit-тестирования
-
-Утилиты для unit-тестирования (Jest) компонентов, использующих хук `useIntersection`
-
-#### Пример компонента
-
-```jsx
-import { useIntersection } from '@sima-land/ui-nucleons/hooks/intersection';
-
-const TestComponent = () => {
-  const ref = useRef(null);
-  const [viewing, setViewing] = useState(false);
-
-  useIntersection(ref, entry => {
-    setViewing(entry.isIntersecting);
-  });
-
-  return (
-    <div ref={ref} data-testid='test-target'>
-      {viewing ? 'On screen' : 'Off screen'}
-    </div>
-  );
-};
-```
-
-#### Пример тестов
-
-```jsx
-import { IntersectionMock } from '@sima-land/ui-nucleons/hooks/intersection/test-utils';
-
-const intersectionMock = new IntersectionMock();
-
-beforeAll(() => {
-  intersectionMock.apply();
-});
-
-afterAll(() => {
-  intersectionMock.restore();
-});
-
-it('test component', () => {
-  const { asFragment, getByTestId } = render(<TestComponent />);
-  const target = getByTestId('test-target');
-
-  expect(asFragment().textContent).toContain('Off screen');
-
-  intersectionMock.changeElementState({
-    target,
-    isIntersecting: true,
-    intersectionRatio: 0,
-  });
-
-  expect(asFragment().textContent).toContain('On screen');
-});
-```

package/hooks/styles.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Хук, устанавливающий css-переменную "--vh" на переданный элемент.
- * @param ref Ref элемента.
- */
-export declare function useViewportHeightUnit(ref: RefObject<HTMLElement | null>): void;

package/hooks/styles.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViewportHeightUnit = void 0;
-const react_1 = require("react");
-const on_1 = require("../helpers/on");
-const styles_1 = require("../helpers/styles");
-/**
- * Хук, устанавливающий css-переменную "--vh" на переданный элемент.
- * @param ref Ref элемента.
- */
-function useViewportHeightUnit(ref) {
-    (0, react_1.useEffect)(() => {
-        const { visualViewport } = window;
-        const offList = [];
-        // eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
-        function setVariable() {
-            ref.current && (0, styles_1.setViewportHeightUnit)(ref.current);
-        }
-        offList.push((0, on_1.on)(window, 'resize', setVariable));
-        offList.push((0, on_1.on)(window, 'orientationchange', setVariable));
-        visualViewport && offList.push((0, on_1.on)(visualViewport, 'resize', setVariable));
-        setVariable();
-        return () => offList.forEach(fn => fn());
-    }, []);
-}
-exports.useViewportHeightUnit = useViewportHeightUnit;

package/input/input.module.scss

@@ -1,20 +0,0 @@
-@use '../colors';
-
-.main {
-  display: flex;
-  width: 100%;
-}
-
-.input {
-  min-width: 0;
-  width: 0;
-  flex-grow: 1;
-  background: inherit;
-  font: inherit;
-  line-height: inherit;
-}
-
-.clear-button {
-  fill: colors.$basic-gray38;
-  cursor: pointer;
-}

package/layout/layout.module.scss

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

package/loading-overlay/index.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { SpinnerProps } from '../spinner';
-export interface LoadingOverlayProps {
-    /** Пользовательский CSS-класс корневого элемента. */
-    className?: string;
-    /** Нужно ли заполнять родительский элемент с помощью `position: absolute`. */
-    fill?: boolean;
-    /** Свойства компонента Spinner. */
-    spinnerProps?: SpinnerProps;
-    /** Пользовательские стили. */
-    style?: React.CSSProperties;
-}
-/**
- * Компонент перекрытия для отображения состояния загрузки.
- * @deprecated Следует использовать Spinner напрямую.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const LoadingOverlay: ({ style, className, spinnerProps, fill, }: LoadingOverlayProps) => JSX.Element;

package/loading-overlay/index.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingOverlay = void 0;
-const react_1 = __importDefault(require("react"));
-const spinner_1 = require("../spinner");
-const bind_1 = __importDefault(require("classnames/bind"));
-const loading_overlay_module_scss_1 = __importDefault(require("./loading-overlay.module.scss"));
-const cx = bind_1.default.bind(loading_overlay_module_scss_1.default);
-/**
- * Компонент перекрытия для отображения состояния загрузки.
- * @deprecated Следует использовать Spinner напрямую.
- * @param props Свойства.
- * @return Элемент.
- */
-const LoadingOverlay = ({ style, className, spinnerProps = {}, fill = true, }) => (react_1.default.createElement("div", { className: cx('loading-overlay', fill && 'fill', className), style: style },
-    react_1.default.createElement(spinner_1.Spinner, Object.assign({}, spinnerProps))));
-exports.LoadingOverlay = LoadingOverlay;

package/loading-overlay/loading-overlay.module.scss

@@ -1,14 +0,0 @@
-.loading-overlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-}
-
-.fill {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}

package/masked-field/index.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '../text-field';
-export interface MaskState {
-    value: string;
-    cleanValue: string;
-}
-export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onBlur' | 'multiple'> {
-    /** Маска. */
-    mask: string;
-    /** Значение. */
-    value?: string;
-    /** Обработчик blur. */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>, s: MaskState) => void;
-}
-/**
- * Компонент текстового поля (TextField) с маской.
- * @deprecated Теперь нужно использовать MaskedInput.
- * @param props Свойства.
- * @param props.mask Маска.
- * @param props.value Значение.
- * @param props.onBlur Сработает при событии blur.
- */
-export declare const MaskedField: React.ForwardRefExoticComponent<MaskedFieldProps & React.RefAttributes<HTMLInputElement | undefined>>;

package/masked-field/index.js

@@ -1,71 +0,0 @@
-"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.MaskedField = void 0;
-const react_1 = __importStar(require("react"));
-const text_field_1 = require("../text-field");
-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 Значение.
- * @param props.onBlur Сработает при событии blur.
- */
-exports.MaskedField = (0, react_1.forwardRef)(function MaskedField(_a, ref) {
-    var { mask, value = '', onBlur } = _a, restOptions = __rest(_a, ["mask", "value", "onBlur"]);
-    const [inputMask, setInputMask] = (0, react_1.useState)();
-    const [inputState, setInputState] = (0, react_1.useState)({ value, cleanValue: '' });
-    const innerRef = (0, react_1.useRef)();
-    (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
-    (0, react_1.useEffect)(() => {
-        const im = (0, dom_1.InputMask)(innerRef.current, Object.assign(Object.assign({}, maskCommons), { mask, onChange: setInputState }));
-        im.setValue(value);
-        setInputMask(im);
-        return () => im.disable();
-    }, [mask]);
-    (0, react_1.useEffect)(() => {
-        inputMask && inputMask.setValue(value);
-    }, [value, inputMask]);
-    return (react_1.default.createElement(text_field_1.TextField, Object.assign({}, restOptions, { ref: innerRef, multiline: false, restPlaceholder: {
-            value: mask.slice(inputState.value.length),
-            shiftValue: inputState.value,
-        }, 
-        // получаем данные маски только по событию "blur"
-        onBlur: e => onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, inputState) })));
-});

package/masked-input/hook.d.ts

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

@@ -1,72 +0,0 @@
-"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;