@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.50

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 'redux';
+import type { InputState } from '@krutoo/input-mask/core';
+import type { InputProps } from '../input';
+import type { ChangeEvent, FocusEvent, FormEvent, FormEventHandler, RefObject } 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: FormEvent<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>;
+        value: string;
+        onInput: FormEventHandler<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/types.js.map

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

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,iCAAuE;AACvE,oCAAqD;AACrD,sCAAmC;AAEnC,mCAAwD;AAExD,gDAA8D;AAE9D;;;;;;GAMG;AACH,SAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EAAE,eAAe,GACR;IACpB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,oGAAoG;IACpG,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,eAAe,CAAC,IAAI;QAC1B,OAAO,EAAE,IAAI,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;QAC5C,WAAW,EAAE,eAAe,CAAC,WAAW;KACzC,CAAC,EACF,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,OAAO,EAAE,eAAe,CAAC,WAAW,CAAC,CAC7E,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,MAAM,QAAQ,GAAG,IAAA,4BAAoB,EAAC,WAAW,CAAC,CAAC;QAEnD,QAAQ,CAAC,QAAQ,CAAC,eAAO,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAEnD,OAAO,QAAQ,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,mGAAmG;IACnG,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,WAAW,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElD,IAAA,iCAAyB,EAAC,GAAG,EAAE;QAC7B,MAAM,OAAO,GAAmB;YAC9B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;gBACnB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;oBACrB,eAAS,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAC1D,CAAC;YACH,CAAC,CAAC;YACF,IAAA,OAAE,EAAC,QAAQ,EAAE,iBAAiB,EAAE,GAAG,EAAE;gBACnC,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;oBACpE,KAAK,CAAC,QAAQ,CAAC,eAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;gBAC5E,CAAC;YACH,CAAC,CAAC;SACH,CAAC;QAEF,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,qEAAqE;IACrE,IAAI,KAAK,KAAK,eAAS,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;QAC3E,KAAK,CAAC,QAAQ,CAAC,eAAO,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,0CAA0C;IAC1C,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,QAAQ,CAAC,eAAO,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO;QACL,KAAK;QACL,IAAI,EAAE;YACJ,GAAG,EAAE,QAAQ;YACb,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK;YAE7B,4EAA4E;YAC5E,OAAO;SACR;KACF,CAAC;AACJ,CAAC"}

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

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

package/dist/masked-input/utils.js

@@ -0,0 +1,53 @@
+"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 redux_1 = require("redux");
+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, redux_1.legacy_createStore)(reducer, initialState);
+}
+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-runtime").JSX.Element;

package/dist/modal/modal.js

@@ -0,0 +1,30 @@
+"use strict";
+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 bind_1 = __importDefault(require("classnames/bind"));
+const modal_m_scss_1 = __importDefault(require("./modal.m.scss"));
+const cx = bind_1.default.bind(modal_m_scss_1.default);
+/**
+ * Модальное окно - окно, блокирующее работу с основным интерфейсом до тех пор, пока оно не будет закрыт.
+ * @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 = cx('overlay', 
+    // ВАЖНО: классы размера и скруглений кидаем на ModalOverlay для того чтобы понизить специфичность
+    // а также потому что надо регулировать отступы от края
+    size !== 'unset' && `size-${size}`, rounds !== 'unset' && `rounds-${rounds}`, overlayProps?.className);
+    const modalClassName = cx('modal', flexLayout && 'modal-layout', className);
+    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":";;;;;AAaA,sBAkCC;;AA9CD,oDAAgD;AAChD,kDAAuD;AACvD,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;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,EAAE,CACzB,SAAS;IACT,kGAAkG;IAClG,uDAAuD;IACvD,IAAI,KAAK,OAAO,IAAI,QAAQ,IAAI,EAAE,EAClC,MAAM,KAAK,OAAO,IAAI,UAAU,MAAM,EAAE,EACxC,YAAY,EAAE,SAAS,CACxB,CAAC;IAEF,MAAM,cAAc,GAAG,EAAE,CAAC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,SAAS,CAAC,CAAC;IAE5E,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.m.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;
+}

package/dist/modal/slots.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ModalBodyProps } from './types';
+/**
+ * Основной контент окна.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ModalBody({ children, className, rootRef, viewportRef, viewportProps, withScrollDisable, scrollDisableOptions, 'data-testid': testId, ...restProps }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Контент который будет выводится поверх окна с абсолютным позиционированием.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ModalOverlap({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Заглушка для футера по дизайн-гайдам.
+ * @return Элемент.
+ */
+export declare function ModalBottomGap(): import("react/jsx-runtime").JSX.Element;

package/dist/modal/slots.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalBody = ModalBody;
+exports.ModalOverlap = ModalOverlap;
+exports.ModalBottomGap = ModalBottomGap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
+const viewport_1 = require("../context/viewport");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const bind_1 = __importDefault(require("classnames/bind"));
+const modal_m_scss_1 = __importDefault(require("./modal.m.scss"));
+const cx = bind_1.default.bind(modal_m_scss_1.default);
+/**
+ * Основной контент окна.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ModalBody({ children, className, rootRef, viewportRef, viewportProps, withScrollDisable = false, scrollDisableOptions, 'data-testid': testId = 'modal-body', ...restProps }) {
+    const viewportInnerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(viewportRef, () => viewportInnerRef.current);
+    // ВАЖНО: не смотря на то что есть возможность задать viewportRef оставляем хук здесь
+    // потому что через портал с рефами работать не получится а useState не так удобен
+    (0, page_scroll_lock_1.usePageScrollLock)(viewportInnerRef, { lockEnabled: withScrollDisable, ...scrollDisableOptions });
+    return ((0, jsx_runtime_1.jsx)(viewport_1.ViewportContext.Provider, { value: viewportInnerRef, children: (0, jsx_runtime_1.jsx)(custom_scrollbar_1.CustomScrollbar, { ...restProps, "data-testid": testId, rootRef: rootRef, viewportRef: viewportInnerRef, viewportProps: viewportProps, className: cx('body', className), overflow: { x: 'hidden', y: 'scroll' }, children: children }) }));
+}
+/**
+ * Контент который будет выводится поверх окна с абсолютным позиционированием.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ModalOverlap({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('overlap'), children: children });
+}
+/**
+ * Заглушка для футера по дизайн-гайдам.
+ * @return Элемент.
+ */
+function ModalBottomGap() {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('bottom-gap') });
+}
+//# sourceMappingURL=slots.js.map

package/dist/modal/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../src/modal/slots.tsx"],"names":[],"mappings":";;;;;AAeA,8BAkCC;AAOD,oCAEC;AAMD,wCAEC;;AAlED,iCAA+D;AAC/D,oEAAgE;AAChE,kDAAsD;AACtD,oEAAkE;AAElE,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EACb,iBAAiB,GAAG,KAAK,EACzB,oBAAoB,EACpB,aAAa,EAAE,MAAM,GAAG,YAAY,EACpC,GAAG,SAAS,EACG;IACf,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEtD,IAAA,2BAAmB,EAAC,WAAW,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAyB,CAAC,CAAC;IAEnF,qFAAqF;IACrF,kFAAkF;IAClF,IAAA,oCAAiB,EAAC,gBAAgB,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC,CAAC;IAEjG,OAAO,CACL,uBAAC,0BAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAC/C,uBAAC,kCAAe,OACV,SAAS,iBACA,MAAM,EACnB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,EAC7B,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAChC,QAAQ,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,YAErC,QAAQ,GACO,GACO,CAC5B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,YAAY,CAAC,EAAE,QAAQ,EAA4B;IACjE,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;AACzD,CAAC;AAED;;;GAGG;AACH,SAAgB,cAAc;IAC5B,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,GAAI,CAAC;AAC9C,CAAC"}

package/dist/modal/types.d.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { WithTestId } from '../types';
+import type { ModalOverlayProps } from '../modal-overlay';
+import type { WithPageScrollLock } from '../_internal/page-scroll-lock';
+export type ModalSize = 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+export interface ModalStyle extends CSSProperties {
+    '--modal-width'?: string;
+    '--modal-height'?: string;
+    '--modal-max-height'?: string;
+    '--modal-min-height'?: string;
+    '--modal-border-radius'?: string;
+    '--modal-overlay-padding'?: string;
+}
+export interface ModalProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Содержимое компонента. */
+    children?: ReactNode;
+    /** Размер окна. */
+    size?: ModalSize | 'unset';
+    /** Скругления углов. */
+    rounds?: 's' | 'm' | 'unset';
+    /** Стили. */
+    style?: ModalStyle;
+    /** Будет вызвана при закрытии окна. */
+    onClose?: () => void;
+    /** Свойства компонента ModalOverlay. */
+    overlayProps?: ModalOverlayProps;
+    /** Нужно ли применять стили для flex-раскладки. */
+    flexLayout?: boolean;
+}
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement>, WithPageScrollLock, WithTestId {
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Реф внутреннего элемента с прокруткой. */
+    viewportRef?: Ref<HTMLDivElement>;
+    /** Свойства внутреннего элемента с прокруткой. */
+    viewportProps?: HTMLAttributes<HTMLDivElement>;
+}

package/dist/modal/types.js

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

package/dist/modal/types.js.map

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

package/dist/modal/utils.d.ts

@@ -0,0 +1,9 @@
+import type { ModalProps } from './types';
+/**
+ * Вернет свойства Modal для формирования.
+ * @param config Настройки.
+ * @param config.size Размер на desktop-разрешениях.
+ * @param config.overlayProps Опции overlayProps.
+ * @return Свойства Modal.
+ */
+export declare function getResponsiveModalProps(config: Pick<ModalProps, 'size' | 'overlayProps'>): ModalProps;