@alfalab/core-components-number-input 1.3.0 → 2.0.0

package/modern/components/number-input/Component.js

@@ -1,99 +1,97 @@
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useMemo, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
-import { createSeparatorsRegExp, getAllowedValue, SEPARATORS, SIGNS } from '../../utils.js';
+import { maskitoTransform } from '@maskito/core';
+import { useMaskito } from '@maskito/react';
+import cn from 'classnames';
+import { fnUtils, os } from '@alfalab/core-components-shared/modern';
+import { createMaskOptions, parseNumber, stringifyNumberWithoutExp, MAX_DIGITS, MIN_SAFE_INTEGER, MAX_SAFE_INTEGER, MINUS_SIGN } from '../../utils.js';
+import { Steppers } from '../steppers/Component.js';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';
 
-const NumberInput = React.forwardRef(({ value: propValue, onChange, onBlur, allowSigns = true, separator = ',', fractionLength, defaultValue, Input, ...restProps }, ref) => {
-    const uncontrolled = propValue === undefined;
-    const inputRef = useRef(null);
-    const [value, setValue] = useState(defaultValue || '');
-    const getNumberValueFromStr = (valueString) => {
-        if (valueString === '')
-            return null;
-        if (valueString.includes(',')) {
-            return parseFloat(valueString.replace(',', '.'));
+const styles = {"steppers":"number-input__steppers_1g1qu","steppersFocused":"number-input__steppersFocused_1g1qu","steppersDisable":"number-input__steppersDisable_1g1qu","s":"number-input__s_1g1qu","m":"number-input__m_1g1qu"};
+require('./index.css')
+
+const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', fractionLength = MAX_DIGITS, defaultValue, Input, min: minProp, max: maxProp, rightAddons, dataTestId, disabled, onBlur, onFocus, view, step: stepProp, size = 's', disableUserInput, clear: clearProp, ...restProps }, ref) => {
+    const min = Math.max(MIN_SAFE_INTEGER, minProp ?? MIN_SAFE_INTEGER);
+    const max = Math.min(MAX_SAFE_INTEGER, maxProp ?? MAX_SAFE_INTEGER);
+    const withStepper = stepProp !== undefined;
+    const maskOptions = useMemo(() => createMaskOptions({
+        separator,
+        fractionLength: withStepper ? 0 : fractionLength,
+        min,
+        max,
+    }), [separator, fractionLength, min, max, withStepper]);
+    const [focused, setFocused] = useState(false);
+    const [value, setValue] = useState(() => {
+        if (defaultValue == null) {
+            return withStepper ? fnUtils.clamp(0, min, max).toString() : '';
         }
-        return parseFloat(valueString);
-    };
-    const restoreCaret = (target) => {
-        setTimeout(() => {
-            const input = target;
-            const positionCursor = input.selectionStart || 0;
-            const isEndPosition = input.value.length === positionCursor;
-            const enteredSign = SIGNS.some((s) => s === input.value[positionCursor - 1]);
-            const enteredSeparator = SEPARATORS.filter((s) => s !== separator).some((s) => s === input.value[positionCursor - 1]);
-            const shouldRestore = enteredSeparator || enteredSign;
-            if (!isEndPosition && shouldRestore) {
-                input.selectionStart = positionCursor;
-                input.selectionEnd = positionCursor;
-            }
-        });
-    };
-    const handleChange = (event) => {
-        const input = event.target;
-        const newValue = input.value.replace(createSeparatorsRegExp(), separator);
-        const allowedValue = getAllowedValue({
-            value: newValue,
-            fractionLength,
-            allowSigns,
-            separator,
-        });
-        if (onChange) {
-            onChange(event, {
-                value: getNumberValueFromStr(allowedValue),
-                valueString: allowedValue,
+        return fnUtils
+            .clamp(parseNumber(maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
+            .toString();
+    });
+    const maskRef = useMaskito({ options: maskOptions });
+    useEffect(() => {
+        if (propValue !== undefined) {
+            setValue((prev) => {
+                const parsedNumber = parseNumber(propValue);
+                if (parsedNumber !== parseNumber(prev)) {
+                    return maskitoTransform(stringifyNumberWithoutExp(parsedNumber), maskOptions);
+                }
+                return prev;
             });
         }
-        if (uncontrolled) {
-            setValue(allowedValue);
-        }
-        restoreCaret(input);
-    };
-    const handleKeyDown = (event) => {
-        const disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
-        const oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
-        const target = event.target;
-        // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
-        if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
-            return event.preventDefault();
-        }
-        const val = target.value;
-        const hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
-        // Запрещаем вводить второй сепаратор
-        if (hasSeparator && SEPARATORS.some((s) => s === event.key)) {
-            return event.preventDefault();
-        }
-        // Запрещаем вводить лишний знак
-        if ((!allowSigns || SIGNS.some((s) => s === val[0])) &&
-            SIGNS.some((s) => s === event.key)) {
-            return event.preventDefault();
-        }
-        const selectionStart = target.selectionStart || 0;
-        // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
-        if (hasSeparator &&
-            fractionLength &&
-            event.key.length === 1 &&
-            selectionStart > val.indexOf(separator) &&
-            val.split(separator)[1].length >= fractionLength) {
-            return event.preventDefault();
-        }
-        return undefined;
+    }, [maskOptions, propValue, separator]);
+    const getMaxLength = (valueString) => {
+        const hasSeparator = valueString?.includes(separator);
+        const hasSigns = valueString?.startsWith(MINUS_SIGN);
+        return MAX_DIGITS + (hasSeparator ? 1 : 0) + (hasSigns ? 1 : 0);
     };
-    const handleBlur = (event) => {
-        const valueBlur = event.target.value.replace(new RegExp(`\\${separator}$`), '');
-        if (onChange) {
-            onChange(event, {
-                value: getNumberValueFromStr(valueBlur),
-                valueString: valueBlur,
+    const getStep = () => Math.round(stepProp ?? 1);
+    const changeValue = (event, newValue) => {
+        const isNaNValue = Number.isNaN(newValue);
+        const valueString = event?.target.value ?? newValue?.toString() ?? '';
+        setValue(valueString);
+        if (valueString === '' || !isNaNValue) {
+            onChange?.(event, {
+                value: isNaNValue ? null : newValue,
             });
         }
-        if (uncontrolled) {
-            setValue(valueBlur);
+    };
+    const handleChange = (event) => {
+        const valueString = event.target.value;
+        changeValue(event, parseNumber(valueString));
+    };
+    const handleIncrement = () => {
+        const parsed = parseNumber(value);
+        const nextValue = maskitoTransform((Number.isNaN(parsed) ? min : parsed + getStep()).toString(), maskOptions);
+        changeValue(null, parseNumber(nextValue));
+    };
+    const handleDecrement = () => {
+        const parsed = parseNumber(value);
+        const nextValue = maskitoTransform((Number.isNaN(parsed) ? max : parsed - getStep()).toString(), maskOptions);
+        changeValue(null, parseNumber(nextValue));
+    };
+    const handleFocus = (e) => {
+        onFocus?.(e);
+        if (!disableUserInput) {
+            setFocused(true);
         }
-        if (onBlur)
-            onBlur(event);
     };
-    const visibleValue = uncontrolled ? value : propValue?.toString();
-    return (React.createElement(Input, { ref: mergeRefs([ref, inputRef]), value: visibleValue, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, inputMode: 'decimal', ...restProps }));
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        setFocused(false);
+    };
+    return (React.createElement(Input, { maxLength: getMaxLength(value), ...restProps, 
+        // В iOS в цифровой клавиатуре невозможно ввести минус.
+        inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
+            rightAddons,
+            React.createElement(Steppers, { dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(styles.steppers, styles[size], {
+                    [styles.steppersFocused]: focused,
+                    [styles.steppersDisable]: disabled,
+                }), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) }));
 });
 
 export { NumberInput };

package/modern/components/number-input/index.css

@@ -0,0 +1,30 @@
+/* hash: ppwj9 */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-0: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs-neg: -4px;
+    --gap-xs-neg: -8px;
+} :root {
+} :root {
+} .number-input__steppers_1g1qu {
+    background-color: var(--color-light-neutral-0);
+} .number-input__steppersFocused_1g1qu,
+.number-input__steppersDisable_1g1qu {
+    background-color: var(--color-light-neutral-translucent-200);
+} .number-input__s_1g1qu {
+    margin-right: var(--gap-xs-neg);
+} .number-input__m_1g1qu {
+    margin-right: var(--gap-2xs-neg);
+}

package/modern/components/number-input/index.js

@@ -1,4 +1,12 @@
 export { NumberInput } from './Component.js';
 import 'react';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '@alfalab/core-components-shared/modern';
 import '../../utils.js';
+import '../steppers/Component.js';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/components/steppers/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type SteppersProps = {
+    value: number;
+    min: number;
+    max: number;
+    className?: string;
+    disabled?: boolean;
+    onIncrement: () => void;
+    onDecrement: () => void;
+    dataTestId?: string;
+};
+declare const Steppers: React.FC<SteppersProps>;
+export { SteppersProps, Steppers };

package/modern/components/steppers/Component.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from '@alfalab/core-components-icon-button/modern';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
+import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
+
+const styles = {"component":"number-input__component_1k8eq","separator":"number-input__separator_1k8eq","button":"number-input__button_1k8eq"};
+require('./index.css')
+
+function preventDefault(e) {
+    e.preventDefault();
+}
+const Steppers = ({ className, onIncrement, onDecrement, value, min, max, disabled, dataTestId, }) => {
+    const decButtonDisabled = disabled || value <= min;
+    const incButtonDisabled = disabled || value >= max;
+    return (React.createElement("div", { className: cn(styles.component, className) },
+        React.createElement(IconButton, { disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React.createElement("div", { className: styles.separator }),
+        React.createElement(IconButton, { disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+};
+
+export { Steppers };

package/modern/components/steppers/index.css

@@ -0,0 +1,32 @@
+/* hash: 1x7ch */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__component_1k8eq {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: 5px;
+    transition: background-color 0.2s ease;
+    overflow: visible;
+} .number-input__separator_1k8eq {
+    height: 18px;
+    width: 1px;
+    background-color: var(--color-light-neutral-translucent-300);
+} .number-input__button_1k8eq {
+    width: 40px;
+    height: 40px;
+}

package/modern/components/steppers/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/components/steppers/index.js

@@ -0,0 +1,7 @@
+export { Steppers } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/core-components-shared/modern';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/desktop/index.js

@@ -3,4 +3,12 @@ import 'react';
 import '@alfalab/core-components-input/modern/desktop';
 import '../components/number-input/Component.js';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '@alfalab/core-components-shared/modern';
 import '../utils.js';
+import '../components/steppers/Component.js';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/index.js

@@ -1,6 +1,15 @@
 export { NumberInputResponsive as NumberInput } from './Component.responsive.js';
 import 'react';
 import '@alfalab/core-components-input/modern';
+import '@alfalab/core-components-mq/modern';
 import './components/number-input/Component.js';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '@alfalab/core-components-shared/modern';
 import './utils.js';
+import './components/steppers/Component.js';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/mobile/index.js

@@ -3,4 +3,12 @@ import 'react';
 import '@alfalab/core-components-input/modern/mobile';
 import '../components/number-input/Component.js';
 import 'react-merge-refs';
+import '@maskito/core';
+import '@maskito/react';
+import 'classnames';
+import '@alfalab/core-components-shared/modern';
 import '../utils.js';
+import '../components/steppers/Component.js';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/icons-glyph/MinusMIcon';
+import '@alfalab/icons-glyph/PlusMediumMIcon';

package/modern/utils.d.ts

@@ -1,13 +1,23 @@
-declare const SIGNS: string[];
+import { MaskitoOptions, MaskitoPlugin } from '@maskito/core';
+declare const MINUS_SIGN = "-";
 declare const SEPARATORS: string[];
-declare function createSeparatorsRegExp(): RegExp;
+declare const MAX_SAFE_INTEGER: number;
+declare const MIN_SAFE_INTEGER: number;
+declare const MAX_DIGITS = 15;
+declare function parseNumber(value?: string | number | null): number;
 /**
- * Проверка вводимых значений.
+ * Преобразовать число в строку с заменой экспоненты на десятичную дробь
  */
-declare const getAllowedValue: ({ value, fractionLength, separator, allowSigns, }: {
-    value: string;
-    fractionLength?: number | undefined;
+declare function stringifyNumberWithoutExp(value: number): string;
+declare function createMaskOptions({ separator, fractionLength, min, max, }: {
     separator: string;
-    allowSigns: boolean;
-}) => string;
-export { SIGNS, SEPARATORS, createSeparatorsRegExp, getAllowedValue };
+    fractionLength: number;
+    min: number;
+    max: number;
+}): MaskitoOptions;
+declare function createMinMaxPlugin({ min, max }: {
+    min: number;
+    max: number;
+}): MaskitoPlugin;
+declare function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin;
+export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin };

package/modern/utils.js

@@ -1,28 +1,233 @@
-const SIGNS = ['-', '+'];
+import { maskitoTransform } from '@maskito/core';
+import { fnUtils } from '@alfalab/core-components-shared/modern';
+
+/* eslint-disable no-param-reassign */
+const MINUS_SIGN = '-';
 const SEPARATORS = [',', '.'];
-function createSeparatorsRegExp() {
-    return new RegExp(`[${SEPARATORS.map((s) => `\\${s}`).join('')}]`, 'g');
+const MAX_SAFE_INTEGER = 2 ** 53 - 1;
+const MIN_SAFE_INTEGER = -MAX_SAFE_INTEGER;
+const MAX_DIGITS = 15; // с 16 уже упираемся в MAX_SAFE_INTEGER
+function parseNumber(value = '') {
+    if (typeof value === 'number')
+        return value;
+    const pseudoSeparatorsRegExp = new RegExp(`[${SEPARATORS.join('')}]`, 'gi');
+    return value
+        ? parseFloat(value
+            .replace(new RegExp(`[^${MINUS_SIGN}${SEPARATORS.join('')}0-9]`, 'gi'), '')
+            .replace(pseudoSeparatorsRegExp, '.'))
+        : NaN;
 }
-const getNumberRegExp = (fractionLength) => {
-    let reStr = '[0-9]+';
+/**
+ * Преобразовать число в строку с заменой экспоненты на десятичную дробь
+ */
+function stringifyNumberWithoutExp(value) {
+    const valueString = String(value);
+    const [numberPart, expPart] = valueString.split('e-');
+    let valueWithoutExp = valueString;
+    if (expPart) {
+        const [, fractionalPart] = numberPart.split('.');
+        const decimalDigits = Number(expPart) + (fractionalPart?.length || 0);
+        valueWithoutExp = value.toFixed(decimalDigits);
+    }
+    return valueWithoutExp;
+}
+const getNumberRegExp = (min, fractionLength) => {
+    let reStr = '[0-9]*';
+    if (min < 0) {
+        reStr = `(\\${MINUS_SIGN})?${reStr}`;
+    }
     if (fractionLength !== 0) {
-        reStr = `${reStr}[${SEPARATORS.map((s) => `\\${s}`).join('')}]?[0-9]{0,${fractionLength || Number.MAX_SAFE_INTEGER}}`;
+        reStr = `${reStr}[${SEPARATORS.map((s) => `\\${s}`).join('')}]?[0-9]{0,${fractionLength || MAX_DIGITS}}`;
     }
     return new RegExp(`^${reStr}$`);
 };
+function createMaskOptions({ separator, fractionLength, min, max, }) {
+    return {
+        mask: getNumberRegExp(min, fractionLength),
+        preprocessors: [
+            createPseudoSeparatorPreprocessor(separator),
+            createNotEmptyIntegerPartPreprocessor({ separator, fractionLength }),
+            createZeroFractionLengthPreprocessor(fractionLength, separator),
+            createRepeatedSeparatorPreprocessor(separator),
+        ],
+        postprocessors: [
+            createLeadingZeroesValidationPostprocessor(separator),
+            createMinMaxPostprocessor({ min, max, separator }),
+        ],
+        plugins: [createNotEmptyPartsPlugin(separator), createMinMaxPlugin({ min, max })],
+    };
+}
 /**
- * Проверка вводимых значений.
+ *  Заполняет целочисленную часть при вводе separator.
+ *  @example Type , => 0,
  */
-const getAllowedValue = ({ value = '', fractionLength, separator, allowSigns, }) => {
-    const sign = allowSigns && SIGNS.some((s) => s === value[0]) ? value[0] : '';
-    const testedValue = sign ? value.slice(1) : value;
-    if (getNumberRegExp(fractionLength).test(testedValue)) {
-        return value;
+function createNotEmptyIntegerPartPreprocessor({ separator, fractionLength, }) {
+    const startWithDecimalSepRegExp = new RegExp(`^\\D*\\${separator}`);
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        const [from] = selection;
+        if (fractionLength <= 0 ||
+            value.includes(separator) ||
+            !data.match(startWithDecimalSepRegExp)) {
+            return { elementState, data };
+        }
+        const digitsBeforeCursor = value.slice(0, from).match(/\d+/);
+        return {
+            elementState,
+            data: digitsBeforeCursor ? data : `0${data}`,
+        };
+    };
+}
+/**
+ * Не позволяет вводить невалидный разделитель.
+ */
+function createPseudoSeparatorPreprocessor(separator) {
+    const pseudoSeparatorsRegExp = new RegExp(`[${SEPARATORS.join('')}]`, 'gi');
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        return {
+            elementState: {
+                selection,
+                value: value.replace(pseudoSeparatorsRegExp, separator),
+            },
+            data: data.replace(pseudoSeparatorsRegExp, separator),
+        };
+    };
+}
+/**
+ * Помогает верно обрезать значения при вставке, если fractionLength===0
+ * @example paste 123,123 -> 123
+ */
+function createZeroFractionLengthPreprocessor(fractionLength, separator) {
+    if (fractionLength > 0) {
+        return (state) => state;
     }
-    const [majorPart, minorPart] = testedValue
-        .split(separator)
-        .map((v) => v.replace(/[^0-9]/g, ''));
-    return `${sign}${majorPart}${minorPart ? separator + minorPart.slice(0, fractionLength) : ''}`;
-};
+    const decimalPartRegExp = new RegExp(`\\${separator}.*$`, 'g');
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        const [from, to] = selection;
+        const newValue = value.replace(decimalPartRegExp, '');
+        return {
+            elementState: {
+                selection: [Math.min(from, newValue.length), Math.min(to, newValue.length)],
+                value: newValue,
+            },
+            data: data.replace(decimalPartRegExp, ''),
+        };
+    };
+}
+/**
+ *  Запрещает вводить второй сепаратор
+ */
+function createRepeatedSeparatorPreprocessor(separator) {
+    return ({ elementState, data }) => {
+        const { value, selection } = elementState;
+        const [from, to] = selection;
+        return {
+            elementState,
+            data: !value.includes(separator) || value.slice(from, to + 1).includes(separator)
+                ? data
+                : data.replace(new RegExp(`\\${separator}`), ''),
+        };
+    };
+}
+/**
+ * Удаляет лишние нули в начале целой части.
+ * @example 0,|00005 => Backspace => |5
+ * @example -0,|00005 => Backspace => -|5
+ * @example "000000" => 0|
+ * @example 0| => Type "5" => 5|
+ */
+function createLeadingZeroesValidationPostprocessor(separator) {
+    const trimLeadingZeroes = (value) => value
+        .replace(new RegExp('^(\\D+)?0+(?=0)'), '$1')
+        .replace(new RegExp('^(\\D+)?0+(?=[1-9])'), '$1');
+    const countTrimmedZeroesBefore = (value, index) => {
+        const valueBefore = value.slice(0, index);
+        const followedByZero = value.slice(index).startsWith('0');
+        return (valueBefore.length - trimLeadingZeroes(valueBefore).length + (followedByZero ? 1 : 0));
+    };
+    return ({ value, selection }) => {
+        const [from, to] = selection;
+        const hasSeparator = value.includes(separator);
+        const [integerPart, decimalPart = ''] = value.split(separator);
+        const zeroTrimmedIntegerPart = trimLeadingZeroes(integerPart);
+        if (integerPart === zeroTrimmedIntegerPart) {
+            return { value, selection };
+        }
+        const newFrom = from - countTrimmedZeroesBefore(value, from);
+        const newTo = to - countTrimmedZeroesBefore(value, to);
+        return {
+            value: zeroTrimmedIntegerPart + (hasSeparator ? separator : '') + decimalPart,
+            selection: [Math.max(newFrom, 0), Math.max(newTo, 0)],
+        };
+    };
+}
+/**
+ * Валидирует значение с учетом min max значений.
+ * Работает совместно с createMinMaxPlugin
+ */
+function createMinMaxPostprocessor({ min, max, separator, }) {
+    return ({ value, selection }) => {
+        const parsedNumber = parseNumber(value);
+        const limitedValue = 
+        /**
+         * Здесь невозможно ограничить нижнюю границу, если пользователь вводит положительное число.
+         * То же самое для верхней границы и отрицательного числа.
+         * Если min=5, то без этого условия не получится ввести 40, похожая ситуация и с отрицательным max
+         */
+        parsedNumber > 0 ? Math.min(parsedNumber, max) : Math.max(parsedNumber, min);
+        if (!Number.isNaN(parsedNumber) && limitedValue !== parsedNumber) {
+            const newValue = `${limitedValue}`.replace('.', separator);
+            return {
+                value: newValue,
+                selection: [newValue.length, newValue.length],
+            };
+        }
+        return {
+            value,
+            selection,
+        };
+    };
+}
+function createMinMaxPlugin({ min, max }) {
+    return (element, options) => {
+        const listener = () => {
+            const parsedNumber = parseNumber(element.value);
+            const clampedNumber = fnUtils.clamp(parsedNumber, min, max);
+            if (!Number.isNaN(parsedNumber) && parsedNumber !== clampedNumber) {
+                element.value = maskitoTransform(stringifyNumberWithoutExp(clampedNumber), options);
+                element.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        };
+        const evListenerOptions = { capture: true };
+        element.addEventListener('blur', listener, evListenerOptions);
+        return () => element.removeEventListener('blur', listener, evListenerOptions);
+    };
+}
+function createNotEmptyPartsPlugin(separator) {
+    return (element) => {
+        const listener = () => {
+            const newValue = element.value
+                // 0,9000000 -> 0,9
+                .replace(new RegExp(`(\\${separator}\\d*?)(0+$)`), '$1')
+                // ,2 => 0,2
+                .replace(new RegExp(`^(\\D+)?\\${separator}`), `$10${separator}`)
+                // 0, -> 0
+                .replace(new RegExp(`\\${separator}$`), '')
+                // -0 -> 0
+                .replace(new RegExp(`^${MINUS_SIGN}0$`), '0')
+                // - -> ''
+                .replace(new RegExp(`^${MINUS_SIGN}$`), '');
+            if (newValue !== element.value) {
+                element.value = newValue;
+                element.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        };
+        const evListenerOptions = { capture: true };
+        element.addEventListener('blur', listener, evListenerOptions);
+        return () => element.removeEventListener('blur', listener, evListenerOptions);
+    };
+}
 
-export { SEPARATORS, SIGNS, createSeparatorsRegExp, getAllowedValue };
+export { MAX_DIGITS, MAX_SAFE_INTEGER, MINUS_SIGN, MIN_SAFE_INTEGER, SEPARATORS, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, parseNumber, stringifyNumberWithoutExp };