@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/dist/link/link.js

@@ -0,0 +1,60 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./link.module.scss"));
+/**
+ * Ссылка.
+ * @param props Свойства компонента. Поддерживаются свойства span/a.
+ * @param ref Реф для DOM-элемента ссылки.
+ * @return Элемент.
+ */
+function PureLink({ 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: (0, classnames_1.default)(styles.link, className, styles[color], disabled && styles.disabled, underline && styles.underline), children: children }));
+}
+exports.Link = (0, react_1.forwardRef)(PureLink);
+//# sourceMappingURL=link.js.map

package/dist/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../src/link/link.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,iCAA6C;AAC7C,4DAA4B;AAC5B,2DAA6C;AAE7C;;;;;GAKG;AACH,SAAS,QAAQ,CACf,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,EACF,EACZ,GAA2B;IAE3B,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,IAAA,oBAAE,EACX,MAAM,CAAC,IAAI,EACX,SAAS,EACT,MAAM,CAAC,KAAK,CAAC,EACb,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,SAAS,IAAI,MAAM,CAAC,SAAS,CAC9B,YAEA,QAAQ,GACP,CACL,CAAC;AACJ,CAAC;AAEY,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAC,QAAQ,CAAC,CAAC"}

package/dist/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/dist/link/types.js

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

package/dist/link/types.js.map

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

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

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

package/dist/masked-input/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputMask = exports.MaskedInput = void 0;
+var masked_input_1 = require("./masked-input");
+Object.defineProperty(exports, "MaskedInput", { enumerable: true, get: function () { return masked_input_1.MaskedInput; } });
+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/dist/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/dist/masked-input/masked-input.d.ts

@@ -0,0 +1,7 @@
+import { MaskedInputProps } from './types';
+/**
+ * Поле ввода текста по маске.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MaskedInput({ value, defaultValue, onChange, ...restProps }: MaskedInputProps): import("react").JSX.Element;

package/dist/masked-input/masked-input.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskedInput = MaskedInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const input_1 = require("../input");
+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 StatelessMaskedInput({ mask, placeholder = '_', pattern = '\\d', value = '', baseInputProps, onFocus, onChange, onInput, onBlur, inputRef, filledMaskMinLength, ...restProps }) {
+    const { store, bind } = (0, use_input_mask_1.useInputMask)({
+        value,
+        maskOptions: { mask, pattern, placeholder },
+    });
+    (0, react_1.useImperativeHandle)(inputRef, () => bind.ref.current);
+    const getMaskData = (0, react_1.useCallback)(() => {
+        const { value: maskedValue } = store.getState();
+        return {
+            value: maskedValue,
+            cleanValue: dom_1.ValueUtil.maskedToClean({ mask, placeholder }, maskedValue),
+            completed: maskedValue.length === mask.length ||
+                Boolean(filledMaskMinLength && maskedValue.length >= filledMaskMinLength),
+        };
+    }, [store, mask, placeholder, filledMaskMinLength]);
+    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?.(event, getMaskData());
+        }, onInput: event => {
+            bind.onInput(event);
+            onInput?.(event, getMaskData());
+        }, onChange: event => {
+            // @todo следующая строка нужна чтобы в testing-library работал fireEvent.change, решить как быть
+            // bind.onInput(event);
+            onChange?.(event, getMaskData());
+        }, onBlur: event => {
+            onBlur?.(event, getMaskData());
+        } }));
+}
+//# sourceMappingURL=masked-input.js.map

package/dist/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,mBAAmB,EACnB,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,EAAC,GAAa,EAAE;QAC7C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;QAEhD,OAAO;YACL,KAAK,EAAE,WAAW;YAClB,UAAU,EAAE,eAAS,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,WAAW,CAAC;YACvE,SAAS,EACP,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;gBAClC,OAAO,CAAC,mBAAmB,IAAI,WAAW,CAAC,MAAM,IAAI,mBAAmB,CAAC;SAC5E,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEpD,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/dist/masked-input/types.d.ts

@@ -0,0 +1,54 @@
+import type { Action, Store } from '@reduxjs/toolkit';
+import type { InputState } from '@krutoo/input-mask/core';
+import type { InputProps } from '../input';
+import type { ChangeEvent, FocusEvent, InputEventHandler, RefObject, SyntheticEvent } from 'react';
+export interface InputMaskReactOptions {
+    /** Строковое представление маски. */
+    mask: string;
+    /** Символ, который в маске используется как обозначение вводимого места. */
+    placeholder: string;
+    /** Строковое представление регулярного выражения только доступных для ввода символов. */
+    pattern: string;
+}
+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: SyntheticEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Сработает при "blur". Вторым аргументом получит данные поля с маской. */
+    onBlur?: (event: FocusEvent<HTMLInputElement>, data: MaskData) => void;
+    /** Минимальное допустимое количество символов для расчета заполненности маски. */
+    filledMaskMinLength?: number;
+}
+export interface MaskData {
+    /** Значение в поле. */
+    value: string;
+    /** Значение, очищенное от маски. */
+    cleanValue: string;
+    /** Заполнено ли значение по маске полностью. */
+    completed: boolean;
+}
+export interface UseInputMaskOptions {
+    value: string;
+    maskOptions: InputMaskReactOptions;
+}
+export interface UseInputMaskResult {
+    /** Хранилище состояния поля. */
+    store: Store<InputState>;
+    /** Свойства, которые необходимо применить к элементу поля. */
+    bind: {
+        ref: RefObject<HTMLInputElement | null>;
+        value: string;
+        onInput: InputEventHandler<HTMLInputElement>;
+    };
+}
+export interface ActionCreator<P = never> {
+    (payload: P): Action<string> & {
+        payload: P;
+    };
+    is(action: Action): action is Action<string> & {
+        payload: P;
+    };
+}

package/dist/masked-input/types.js

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

package/dist/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/dist/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/dist/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,iCAA6E;AAC7E,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/dist/masked-input/utils.d.ts

@@ -0,0 +1,15 @@
+import { type ReducerOptions, type InputState } from '@krutoo/input-mask/core';
+import { Store } from '@reduxjs/toolkit';
+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>;

package/dist/masked-input/utils.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actions = void 0;
+exports.createInputMaskStore = createInputMaskStore;
+/* eslint-disable jsdoc/require-jsdoc */
+const core_1 = require("@krutoo/input-mask/core");
+const dom_1 = require("@krutoo/input-mask/dom");
+const toolkit_1 = require("@reduxjs/toolkit");
+exports.actions = {
+    manualChange: createAction('manual/change'),
+    inputChange: createAction('input/change'),
+    inputSelectionChange: createAction('input/selection-change'),
+};
+function createInputMaskStore(options, initialState) {
+    const reducer = createDomReducer(options);
+    return (0, toolkit_1.configureStore)({
+        reducer,
+        preloadedState: initialState,
+        middleware: getDefaultMiddleware => getDefaultMiddleware({ thunk: false, serializableCheck: false }),
+    });
+}
+function createDomReducer(options) {
+    const innerReducer = (0, core_1.createReducer)(options);
+    const processState = (a, b) => innerReducer(a, (0, core_1.defineChanges)(a, b));
+    const initialState = dom_1.StateUtil.init(options);
+    return (state = initialState, action) => {
+        let result = state;
+        switch (true) {
+            case exports.actions.inputChange.is(action): {
+                result = processState(state, dom_1.StateUtil.fromTarget(action.payload.input));
+                break;
+            }
+            case exports.actions.inputSelectionChange.is(action): {
+                result = dom_1.StateUtil.fromTarget(action.payload.input);
+                break;
+            }
+            case exports.actions.manualChange.is(action): {
+                // мы не знаем какое значение передано (clean или masked) поэтому берем из него только подходящие символы
+                const validCleanValue = action.payload.value
+                    .split('')
+                    .filter(c => c.match(options.pattern))
+                    .join('');
+                const newMaskedValue = dom_1.ValueUtil.cleanToMasked(options, validCleanValue);
+                const firstPlace = options.mask.indexOf(options.placeholder);
+                result = processState(dom_1.StateUtil.of(state.value, core_1.RangeUtil.of(firstPlace, state.value.length)), dom_1.StateUtil.of(newMaskedValue, core_1.RangeUtil.of(newMaskedValue.length)));
+                break;
+            }
+        }
+        return result;
+    };
+}
+function createAction(type) {
+    const creator = payload => ({ type, payload });
+    creator.is = (action) => action.type === type;
+    return creator;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/masked-input/utils.ts"],"names":[],"mappings":"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"}

package/dist/modal/index.d.ts

@@ -0,0 +1,4 @@
+export type { ModalSize, ModalStyle, ModalProps, ModalBodyProps } from './types';
+export { ModalBody, ModalBottomGap, ModalOverlap } from './slots';
+export { Modal } from './modal';
+export { getResponsiveModalProps } from './utils';

package/dist/modal/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResponsiveModalProps = exports.Modal = exports.ModalOverlap = exports.ModalBottomGap = exports.ModalBody = void 0;
+var slots_1 = require("./slots");
+Object.defineProperty(exports, "ModalBody", { enumerable: true, get: function () { return slots_1.ModalBody; } });
+Object.defineProperty(exports, "ModalBottomGap", { enumerable: true, get: function () { return slots_1.ModalBottomGap; } });
+Object.defineProperty(exports, "ModalOverlap", { enumerable: true, get: function () { return slots_1.ModalOverlap; } });
+var modal_1 = require("./modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return modal_1.Modal; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getResponsiveModalProps", { enumerable: true, get: function () { return utils_1.getResponsiveModalProps; } });
+//# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/modal/index.ts"],"names":[],"mappings":";;;AACA,iCAAkE;AAAzD,kGAAA,SAAS,OAAA;AAAE,uGAAA,cAAc,OAAA;AAAE,qGAAA,YAAY,OAAA;AAChD,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,iCAAkD;AAAzC,gHAAA,uBAAuB,OAAA"}

package/dist/modal/modal-util.scss

@@ -0,0 +1,45 @@
+@use '../shadows';
+
+@mixin size-s {
+  --modal-width: 480px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-m {
+  --modal-width: 640px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-l {
+  --modal-width: 768px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-xl {
+  --modal-width: 960px;
+  --modal-max-height: min(696px, calc(100% - 32px));
+  --modal-min-height: 232px;
+  --modal-overlay-padding: 16px;
+  --modal-box-shadow: #{shadows.get-box-shadow('z4')};
+  --modal-border-radius: 8px;
+}
+
+@mixin size-fullscreen {
+  --modal-width: 100%;
+  --modal-height: 100%;
+  --modal-max-height: 100%;
+  --modal-overlay-padding: 0;
+  --modal-box-shadow: none;
+}

package/dist/modal/modal.d.ts

@@ -0,0 +1,7 @@
+import type { ModalProps } from './types';
+/**
+ * Модальное окно - окно, блокирующее работу с основным интерфейсом до тех пор, пока оно не будет закрыт.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Modal({ flexLayout, size, rounds, className, children, onClose, overlayProps, 'data-testid': testId, ...restProps }: ModalProps): import("react").JSX.Element;

package/dist/modal/modal.js

@@ -0,0 +1,64 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = Modal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const modal_overlay_1 = require("../modal-overlay");
+const utils_1 = require("../modal-overlay/utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles = __importStar(require("./modal.module.scss"));
+const hooks_1 = require("../hooks");
+/**
+ * Модальное окно - окно, блокирующее работу с основным интерфейсом до тех пор, пока оно не будет закрыт.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Modal({ flexLayout = true, size = 'm', rounds = size === 'fullscreen' ? 'unset' : 'm', className, children, onClose, overlayProps, 'data-testid': testId = 'modal', ...restProps }) {
+    const overlayClickProps = (0, utils_1.useExactClick)(onClose, {
+        onMouseDown: overlayProps?.onMouseDown,
+        onMouseUp: overlayProps?.onMouseUp,
+    });
+    const overlayClassName = (0, classnames_1.default)(styles.overlay, 
+    // ВАЖНО: классы размера и скруглений кидаем на ModalOverlay для того чтобы понизить специфичность
+    // а также потому что надо регулировать отступы от края
+    size !== 'unset' && styles[`size-${size}`], rounds !== 'unset' && styles[`rounds-${rounds}`], overlayProps?.className);
+    const modalClassName = (0, classnames_1.default)(styles.modal, flexLayout && styles['modal-layout'], className);
+    (0, hooks_1.useKeydown)('Escape', onClose);
+    return ((0, jsx_runtime_1.jsx)(modal_overlay_1.ModalOverlay, { ...overlayProps, className: overlayClassName, ...overlayClickProps, children: (0, jsx_runtime_1.jsx)("div", { className: modalClassName, "data-testid": testId, ...restProps, children: children }) }));
+}
+//# sourceMappingURL=modal.js.map

package/dist/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/modal/modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,sBAoCC;;AA/CD,oDAAgD;AAChD,kDAAuD;AACvD,4DAA4B;AAC5B,4DAA8C;AAC9C,oCAAsC;AAEtC;;;;GAIG;AACH,SAAgB,KAAK,CAAC,EACpB,UAAU,GAAG,IAAI,EACjB,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAC9C,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,GAAG,SAAS,EACD;IACX,MAAM,iBAAiB,GAAG,IAAA,qBAAa,EAAC,OAAO,EAAE;QAC/C,WAAW,EAAE,YAAY,EAAE,WAAW;QACtC,SAAS,EAAE,YAAY,EAAE,SAAS;KACnC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,IAAA,oBAAE,EACzB,MAAM,CAAC,OAAO;IACd,kGAAkG;IAClG,uDAAuD;IACvD,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EAC1C,MAAM,KAAK,OAAO,IAAI,MAAM,CAAC,UAAU,MAAM,EAAE,CAAC,EAChD,YAAY,EAAE,SAAS,CACxB,CAAC;IAEF,MAAM,cAAc,GAAG,IAAA,oBAAE,EAAC,MAAM,CAAC,KAAK,EAAE,UAAU,IAAI,MAAM,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC;IAEzF,IAAA,kBAAU,EAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAE9B,OAAO,CACL,uBAAC,4BAAY,OAAK,YAAY,EAAE,SAAS,EAAE,gBAAgB,KAAM,iBAAiB,YAChF,gCAAK,SAAS,EAAE,cAAc,iBAAe,MAAM,KAAM,SAAS,YAC/D,QAAQ,GACL,GACO,CAChB,CAAC;AACJ,CAAC"}

package/dist/modal/modal.module.scss

@@ -0,0 +1,79 @@
+@use '../shadows';
+@use './modal-util';
+
+.overlay {
+  display: flex;
+  align-items: center;
+  padding: var(--modal-overlay-padding);
+  // ВАЖНО: для корректной прокрутки во flex-контейнере не надо использовать тут justify-content: center
+}
+
+.modal {
+  width: var(--modal-width);
+  height: var(--modal-height);
+  max-height: var(--modal-max-height);
+  min-height: var(--modal-min-height);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-box-shadow);
+  flex-shrink: 0;
+  margin: auto; // ВАЖНО: для корректной прокрутки во flex-контейнере
+  position: relative; // ВАЖНО: для overlap
+  z-index: 1;
+  background-color: #fff;
+}
+
+.modal-layout {
+  display: flex;
+  flex-direction: column;
+}
+
+.size-s {
+  @include modal-util.size-s;
+}
+
+.size-m {
+  @include modal-util.size-m;
+}
+
+.size-l {
+  @include modal-util.size-l;
+}
+
+.size-xl {
+  @include modal-util.size-xl;
+}
+
+.size-fullscreen {
+  @include modal-util.size-fullscreen;
+}
+
+.rounds-s {
+  --modal-border-radius: 4px;
+}
+
+.rounds-m {
+  --modal-border-radius: 8px;
+}
+
+.body {
+  flex-grow: 1;
+}
+
+.overlap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  * {
+    pointer-events: auto;
+  }
+}
+
+.bottom-gap {
+  flex-shrink: 0;
+  border-radius: 0 0 8px 8px;
+  height: 16px;
+  background: #fff;
+}