@alfalab/core-components-number-input 2.3.17 → 2.4.0

package/moderncssm/components/steppers/Component.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
+import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+function preventDefault(e) {
+    e.preventDefault();
+}
+const Steppers = ({ className, onIncrement, onDecrement, value, min, max, disabled, dataTestId, colors, }) => {
+    const decButtonDisabled = disabled || value <= min;
+    const incButtonDisabled = disabled || value >= max;
+    return (React.createElement("div", { className: cn(styles.component, className) },
+        React.createElement(IconButton, { colors: colors, 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: cn(styles.separator, colorStyles[colors].separator) }),
+        React.createElement(IconButton, { colors: colors, 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/moderncssm/components/steppers/default.module.css

@@ -0,0 +1,5 @@
+/* */
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300);
+}

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

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

package/moderncssm/components/steppers/index.js

@@ -0,0 +1 @@
+export { Steppers } from './Component.js';

package/moderncssm/components/steppers/index.module.css

@@ -0,0 +1,20 @@
+/* */
+
+.component {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: 5px;
+    transition: background-color 0.2s ease;
+    overflow: visible;
+}
+
+.separator {
+    height: 18px;
+    width: 1px;
+}
+
+.button {
+    width: 40px;
+    height: 40px;
+}

package/moderncssm/components/steppers/inverted.module.css

@@ -0,0 +1,5 @@
+/* */
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NumberInputProps } from "../components/number-input/index";
+type NumberInputDesktopProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
+declare const NumberInputDesktop: React.ForwardRefExoticComponent<NumberInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInputDesktopProps, NumberInputDesktop };

package/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { InputDesktop } from '@alfalab/core-components-input/moderncssm/desktop';
+import { NumberInput } from '../components/number-input/Component.js';
+
+const NumberInputDesktop = forwardRef((props, ref) => React.createElement(NumberInput, { ...props, Input: InputDesktop, ref: ref, view: 'desktop' }));
+
+export { NumberInputDesktop };

package/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInputDesktop, NumberInputDesktopProps } from "./Component.desktop";
+export {};

package/moderncssm/desktop/index.js

@@ -0,0 +1 @@
+export { NumberInputDesktop } from './Component.desktop.js';

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInputResponsive as NumberInput, NumberInputResponsiveProps as NumberInputProps } from "./Component.responsive";
+export {};

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { NumberInputResponsive as NumberInput } from './Component.responsive.js';

package/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { NumberInputProps } from "../components/number-input/index";
+type NumberInputMobileProps = Omit<NumberInputProps, 'Input' | 'breakpoint' | 'view'>;
+declare const NumberInputMobile: React.ForwardRefExoticComponent<NumberInputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { NumberInputMobileProps, NumberInputMobile };

package/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { InputMobile } from '@alfalab/core-components-input/moderncssm/mobile';
+import { NumberInput } from '../components/number-input/Component.js';
+
+const NumberInputMobile = forwardRef((props, ref) => React.createElement(NumberInput, { ...props, Input: InputMobile, ref: ref, view: 'mobile' }));
+
+export { NumberInputMobile };

package/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInputMobile, NumberInputMobileProps } from "./Component.mobile";
+export {};

package/moderncssm/mobile/index.js

@@ -0,0 +1 @@
+export { NumberInputMobile } from './Component.mobile.js';

package/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getNumberInputTestIds } from "../utils";

package/moderncssm/shared/index.js

@@ -0,0 +1 @@
+export { getNumberInputTestIds } from '../utils.js';

package/moderncssm/utils.d.ts

@@ -0,0 +1,34 @@
+import { MaskitoOptions, MaskitoPlugin } from '@maskito/core';
+declare const MINUS_SIGN = "-";
+declare const SEPARATORS: string[];
+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 function stringifyNumberWithoutExp(value: number): string;
+declare function createMaskOptions({ separator, fractionLength, min, max, }: {
+    separator: string;
+    fractionLength: number;
+    min: number;
+    max: number;
+}): MaskitoOptions;
+declare function createMinMaxPlugin({ min, max }: {
+    min: number;
+    max: number;
+}): MaskitoPlugin;
+declare function createNotEmptyPartsPlugin(separator: string): MaskitoPlugin;
+declare function getNumberInputTestIds(dataTestId: string): {
+    input: string;
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+    decrementButton: string;
+    incrementButton: string;
+};
+export { MINUS_SIGN, SEPARATORS, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, MAX_DIGITS, parseNumber, stringifyNumberWithoutExp, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds };

package/moderncssm/utils.js

@@ -0,0 +1,246 @@
+import { maskitoTransform } from '@maskito/core';
+import { getDataTestId, fnUtils } from '@alfalab/core-components-shared/moderncssm';
+
+/* eslint-disable no-param-reassign */
+const MINUS_SIGN = '-';
+const SEPARATORS = [',', '.'];
+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;
+}
+/**
+ * Преобразовать число в строку с заменой экспоненты на десятичную дробь
+ */
+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 || 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,
+ */
+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 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);
+    };
+}
+function getNumberInputTestIds(dataTestId) {
+    return {
+        input: dataTestId,
+        inputWrapper: getDataTestId(dataTestId, 'form-control'),
+        inputWrapperInner: getDataTestId(dataTestId, 'form-control-inner'),
+        leftAddons: getDataTestId(dataTestId, 'form-control-left-addons'),
+        rightAddons: getDataTestId(dataTestId, 'form-control-right-addons'),
+        error: getDataTestId(dataTestId, 'form-control-error-message'),
+        hint: getDataTestId(dataTestId, 'form-control-hint'),
+        decrementButton: getDataTestId(dataTestId, 'decrement-button'),
+        incrementButton: getDataTestId(dataTestId, 'increment-button'),
+    };
+}
+
+export { MAX_DIGITS, MAX_SAFE_INTEGER, MINUS_SIGN, MIN_SAFE_INTEGER, SEPARATORS, createMaskOptions, createMinMaxPlugin, createNotEmptyPartsPlugin, getNumberInputTestIds, parseNumber, stringifyNumberWithoutExp };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-number-input",
-    "version": "2.3.17",
+    "version": "2.4.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,9 +14,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^15.0.5",
+        "@alfalab/core-components-input": "^15.1.0",
         "@alfalab/core-components-mq": "^4.3.0",
-        "@alfalab/core-components-icon-button": "^6.7.5",
+        "@alfalab/core-components-icon-button": "^6.8.0",
         "@alfalab/core-components-shared": "^0.12.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "@maskito/core": "^1.7.0",
@@ -25,6 +25,6 @@
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/number-input/default.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .steppers {
     background-color: var(--color-light-neutral-translucent-0);

package/src/components/number-input/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .size-48 {
     margin-right: var(--gap-8-neg);

package/src/components/number-input/inverted.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .steppers {
     background-color: var(--color-light-neutral-translucent-0-inverted);

package/src/components/steppers/default.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .separator {
     background-color: var(--color-light-neutral-translucent-300);

package/src/components/steppers/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;

package/src/components/steppers/inverted.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .separator {
     background-color: var(--color-light-neutral-translucent-300-inverted);