@alfalab/core-components 42.11.0 → 42.12.0

package/amount-input/esm/Component.js

@@ -6,13 +6,13 @@ import { withSuffix } from '../../with-suffix/esm';
 import { getCurrencySymbol, formatAmount, THINSP } from '@alfalab/utils';
 import { getAmountValueFromStr, getFormattedValue } from './utils/index.js';
 
-var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_h1cko"};
+var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1fbkr"};
 require('./default.css');
 
-var styles = {"container":"amount-input__container_lvbqd","bold":"amount-input__bold_lvbqd","input":"amount-input__input_lvbqd","suffixContainer":"amount-input__suffixContainer_lvbqd","filled":"amount-input__filled_lvbqd"};
+var styles = {"container":"amount-input__container_1ohcr","bold":"amount-input__bold_1ohcr","input":"amount-input__input_1ohcr","suffixContainer":"amount-input__suffixContainer_1ohcr","filled":"amount-input__filled_1ohcr"};
 require('./index.css');
 
-var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_90d9n"};
+var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_17alg"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -28,28 +28,29 @@ var SuffixInput = withSuffix(Input);
  */
 var AmountInput = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.value, value = _c === void 0 ? null : _c, _d = _a.integerLength, integerLength = _d === void 0 ? 9 : _d, _e = _a.minority, minority = _e === void 0 ? 100 : _e, _f = _a.currency, currency = _f === void 0 ? 'RUR' : _f, _g = _a.suffix, suffix = _g === void 0 ? currency : _g, _h = _a.placeholder, placeholder = _h === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencySymbol(currency) || '' : suffix) : _h, _j = _a.integersOnly, integersOnly = _j === void 0 ? false : _j, _k = _a.positiveOnly, positiveOnly = _k === void 0 ? true : _k, _l = _a.bold, bold = _l === void 0 ? true : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _o = _a.clear, clear = _o === void 0 ? false : _o, onChange = _a.onChange, onClear = _a.onClear, _p = _a.breakpoint, breakpoint = _p === void 0 ? 1024 : _p, restProps = __rest(_a, ["value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "breakpoint"]);
-    var getFormattedAmount = useCallback(function () {
-        if (value === '' || value === null || value === '-')
+    var _c = _a.view, view = _c === void 0 ? 'default' : _c, _d = _a.value, value = _d === void 0 ? null : _d, _e = _a.integerLength, integerLengthProp = _e === void 0 ? 9 : _e, _f = _a.minority, minority = _f === void 0 ? 100 : _f, _g = _a.currency, currency = _g === void 0 ? 'RUR' : _g, _h = _a.suffix, suffix = _h === void 0 ? currency : _h, _j = _a.placeholder, placeholder = _j === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencySymbol(currency) || '' : suffix) : _j, _k = _a.integersOnly, integersOnly = _k === void 0 ? false : _k, _l = _a.positiveOnly, positiveOnly = _l === void 0 ? true : _l, _m = _a.bold, bold = _m === void 0 ? true : _m, _o = _a.colors, colors = _o === void 0 ? 'default' : _o, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _p = _a.clear, clear = _p === void 0 ? false : _p, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _q = _a.breakpoint, breakpoint = _q === void 0 ? 1024 : _q, restProps = __rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint"]);
+    var integerLength = Math.min(integerLengthProp, 15);
+    var getFormattedAmount = useCallback(function (val) {
+        if (val === '' || val === null || val === '-')
             return '';
         return formatAmount({
-            value: +value,
+            value: +val,
             currency: currency,
             minority: minority,
-            view: 'default',
+            view: view,
             negativeSymbol: 'hyphen-minus',
         }).formatted;
-    }, [currency, minority, value]);
-    var _q = useState(getFormattedAmount()), inputValue = _q[0], setInputValue = _q[1];
+    }, [currency, minority, view]);
+    var _r = useState(function () { return getFormattedAmount(value); }), inputValue = _r[0], setInputValue = _r[1];
+    var _s = inputValue.split(','), majorPart = _s[0], minorPart = _s[1];
     var currencySymbol = getCurrencySymbol(currency);
     useEffect(function () {
         var currentAmountValue = getAmountValueFromStr(inputValue, minority);
         if (currentAmountValue !== value) {
-            return setInputValue(getFormattedAmount());
+            setInputValue(getFormattedAmount(value));
         }
-        return function () { return undefined; };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFormattedAmount]);
+    }, [value, getFormattedAmount]);
     var handleChange = function (e) {
         var input = e.target;
         var enteredValue = input.value.replace(/\s/g, '').replace('.', ',');
@@ -88,12 +89,10 @@ var AmountInput = forwardRef(function (_a, ref) {
                 });
             }
             setInputValue(newFormattedValue);
-            if (onChange) {
-                onChange(e, {
-                    value: getAmountValueFromStr(newFormattedValue, minority),
-                    valueString: newFormattedValue,
-                });
-            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, {
+                value: getAmountValueFromStr(newFormattedValue, minority),
+                valueString: newFormattedValue,
+            });
         }
         else {
             // Не двигаем каретку когда вставляется невалидный символ
@@ -110,7 +109,22 @@ var AmountInput = forwardRef(function (_a, ref) {
             onClear(event);
         }
     }, [onClear]);
-    var _r = inputValue.split(','), majorPart = _r[0], minorPart = _r[1];
+    var handleBlur = function (event) {
+        if (view === 'withZeroMinorPart') {
+            var newValue = getAmountValueFromStr(inputValue, minority);
+            if (newValue !== null) {
+                var formatted = getFormattedAmount(newValue);
+                if (formatted !== inputValue) {
+                    setInputValue(formatted);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+                        value: newValue,
+                        valueString: formatted,
+                    });
+                }
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
     return (React.createElement("div", { className: cn(styles.container, (_b = {},
             _b[styles.bold] = bold,
             _b[styles.filled] = Boolean(inputValue),
@@ -120,7 +134,7 @@ var AmountInput = forwardRef(function (_a, ref) {
                 React.createElement("span", { className: colorStyles[colors].minorPartAndCurrency },
                     minorPart !== undefined && ",".concat(minorPart),
                     THINSP,
-                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, onBlur: handleBlur, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
 });
 
 export { AmountInput };

package/amount-input/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: 5bapc */
+/* hash: 11fn3 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
@@ -17,6 +17,6 @@
 } :root {
 } :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
-} .amount-input__minorPartAndCurrency_h1cko {
+} .amount-input__minorPartAndCurrency_1fbkr {
     color: var(--amount-input-minor-part-and-currency-color);
 }

package/amount-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: ns810 */
+/* hash: 1m0n7 */
 :root {
 } /* 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 */ /* 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 */
@@ -25,14 +25,14 @@
 * Решение
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
-*/ .amount-input__container_lvbqd {
+*/ .amount-input__container_1ohcr {
     position: relative;
-} .amount-input__bold_lvbqd .amount-input__input_lvbqd,
-.amount-input__bold_lvbqd .amount-input__suffixContainer_lvbqd {
+} .amount-input__bold_1ohcr .amount-input__input_1ohcr,
+.amount-input__bold_1ohcr .amount-input__suffixContainer_1ohcr {
     font-weight: bold;
-} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_lvbqd > *:first-child {
+} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_1ohcr > *:first-child {
     display: none;
-} .amount-input__filled_lvbqd .amount-input__input_lvbqd,
-.amount-input__input_lvbqd:focus {
+} .amount-input__filled_1ohcr .amount-input__input_1ohcr,
+.amount-input__input_1ohcr:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1kvo0 */
+/* hash: 10meb */
 :root {
 } /* 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 */ /* 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 */
@@ -18,6 +18,6 @@
     --amount-input-inverted-minor-part-and-currency-color: var(
         --color-light-text-secondary-inverted
     );
-} .amount-input__minorPartAndCurrency_90d9n {
+} .amount-input__minorPartAndCurrency_17alg {
     color: var(--amount-input-inverted-minor-part-and-currency-color);
 }

package/amount-input/index.css

@@ -1,4 +1,4 @@
-/* hash: ns810 */
+/* hash: 1m0n7 */
 :root {
 } /* 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 */ /* 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 */
@@ -25,14 +25,14 @@
 * Решение
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
-*/ .amount-input__container_lvbqd {
+*/ .amount-input__container_1ohcr {
     position: relative;
-} .amount-input__bold_lvbqd .amount-input__input_lvbqd,
-.amount-input__bold_lvbqd .amount-input__suffixContainer_lvbqd {
+} .amount-input__bold_1ohcr .amount-input__input_1ohcr,
+.amount-input__bold_1ohcr .amount-input__suffixContainer_1ohcr {
     font-weight: bold;
-} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_lvbqd > *:first-child {
+} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_1ohcr > *:first-child {
     display: none;
-} .amount-input__filled_lvbqd .amount-input__input_lvbqd,
-.amount-input__input_lvbqd:focus {
+} .amount-input__filled_1ohcr .amount-input__input_1ohcr,
+.amount-input__input_1ohcr:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1kvo0 */
+/* hash: 10meb */
 :root {
 } /* 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 */ /* 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 */
@@ -18,6 +18,6 @@
     --amount-input-inverted-minor-part-and-currency-color: var(
         --color-light-text-secondary-inverted
     );
-} .amount-input__minorPartAndCurrency_90d9n {
+} .amount-input__minorPartAndCurrency_17alg {
     color: var(--amount-input-inverted-minor-part-and-currency-color);
 }

package/amount-input/modern/Component.d.ts

@@ -8,6 +8,12 @@ type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
      * Значение null - значит не установлено
      */
     value?: string | number | null;
+    /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: 'default' | 'withZeroMinorPart';
     /**
      * Валюта
      */
@@ -18,6 +24,7 @@ type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     suffix?: string;
     /**
      * Максимальное число знаков до запятой
+     * max 15
      */
     integerLength?: number;
     /**
@@ -61,6 +68,12 @@ declare const AmountInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
      * Значение null - значит не установлено
      */
     value?: string | number | null | undefined;
+    /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
     /**
      * Валюта
      */
@@ -71,6 +84,7 @@ declare const AmountInput: React.ForwardRefExoticComponent<Omit<InputProps, "val
     suffix?: string | undefined;
     /**
      * Максимальное число знаков до запятой
+     * max 15
      */
     integerLength?: number | undefined;
     /**

package/amount-input/modern/Component.js

@@ -5,13 +5,13 @@ import { withSuffix } from '../../with-suffix/modern';
 import { formatAmount, getCurrencySymbol, THINSP } from '@alfalab/utils';
 import { getAmountValueFromStr, getFormattedValue } from './utils/index.js';
 
-const defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_h1cko"};
+const defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1fbkr"};
 require('./default.css');
 
-const styles = {"container":"amount-input__container_lvbqd","bold":"amount-input__bold_lvbqd","input":"amount-input__input_lvbqd","suffixContainer":"amount-input__suffixContainer_lvbqd","filled":"amount-input__filled_lvbqd"};
+const styles = {"container":"amount-input__container_1ohcr","bold":"amount-input__bold_1ohcr","input":"amount-input__input_1ohcr","suffixContainer":"amount-input__suffixContainer_1ohcr","filled":"amount-input__filled_1ohcr"};
 require('./index.css');
 
-const invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_90d9n"};
+const invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_17alg"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -25,28 +25,29 @@ const SuffixInput = withSuffix(Input);
 /**
  * Компонент для ввода денежных значений
  */
-const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, breakpoint = 1024, ...restProps }, ref) => {
-    const getFormattedAmount = useCallback(() => {
-        if (value === '' || value === null || value === '-')
+const AmountInput = forwardRef(({ view = 'default', value = null, integerLength: integerLengthProp = 9, minority = 100, currency = 'RUR', suffix = currency, placeholder = `0\u2009${suffix === currency ? getCurrencySymbol(currency) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, onBlur, breakpoint = 1024, ...restProps }, ref) => {
+    const integerLength = Math.min(integerLengthProp, 15);
+    const getFormattedAmount = useCallback((val) => {
+        if (val === '' || val === null || val === '-')
             return '';
         return formatAmount({
-            value: +value,
+            value: +val,
             currency,
             minority,
-            view: 'default',
+            view,
             negativeSymbol: 'hyphen-minus',
         }).formatted;
-    }, [currency, minority, value]);
-    const [inputValue, setInputValue] = useState(getFormattedAmount());
+    }, [currency, minority, view]);
+    const [inputValue, setInputValue] = useState(() => getFormattedAmount(value));
+    const [majorPart, minorPart] = inputValue.split(',');
     const currencySymbol = getCurrencySymbol(currency);
     useEffect(() => {
         const currentAmountValue = getAmountValueFromStr(inputValue, minority);
         if (currentAmountValue !== value) {
-            return setInputValue(getFormattedAmount());
+            setInputValue(getFormattedAmount(value));
         }
-        return () => undefined;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getFormattedAmount]);
+    }, [value, getFormattedAmount]);
     const handleChange = (e) => {
         const input = e.target;
         let enteredValue = input.value.replace(/\s/g, '').replace('.', ',');
@@ -85,12 +86,10 @@ const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 10
                 });
             }
             setInputValue(newFormattedValue);
-            if (onChange) {
-                onChange(e, {
-                    value: getAmountValueFromStr(newFormattedValue, minority),
-                    valueString: newFormattedValue,
-                });
-            }
+            onChange?.(e, {
+                value: getAmountValueFromStr(newFormattedValue, minority),
+                valueString: newFormattedValue,
+            });
         }
         else {
             // Не двигаем каретку когда вставляется невалидный символ
@@ -107,7 +106,22 @@ const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 10
             onClear(event);
         }
     }, [onClear]);
-    const [majorPart, minorPart] = inputValue.split(',');
+    const handleBlur = (event) => {
+        if (view === 'withZeroMinorPart') {
+            const newValue = getAmountValueFromStr(inputValue, minority);
+            if (newValue !== null) {
+                const formatted = getFormattedAmount(newValue);
+                if (formatted !== inputValue) {
+                    setInputValue(formatted);
+                    onChange?.(event, {
+                        value: newValue,
+                        valueString: formatted,
+                    });
+                }
+            }
+        }
+        onBlur?.(event);
+    };
     return (React.createElement("div", { className: cn(styles.container, {
             [styles.bold]: bold,
             [styles.filled]: Boolean(inputValue),
@@ -117,7 +131,7 @@ const AmountInput = forwardRef(({ value = null, integerLength = 9, minority = 10
                 React.createElement("span", { className: colorStyles[colors].minorPartAndCurrency },
                     minorPart !== undefined && `,${minorPart}`,
                     THINSP,
-                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, inputMode: 'decimal', pattern: `[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`, dataTestId: dataTestId, ref: ref, breakpoint: breakpoint })));
+                    suffix === currency ? currencySymbol : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, placeholder: placeholder, value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: styles.input, onChange: handleChange, onClear: handleClear, onBlur: handleBlur, inputMode: 'decimal', pattern: `[${positiveOnly ? '' : '-'}0-9\\s\\.,]*`, dataTestId: dataTestId, ref: ref, breakpoint: breakpoint })));
 });
 
 export { AmountInput };

package/amount-input/modern/default.css

@@ -1,4 +1,4 @@
-/* hash: 5bapc */
+/* hash: 11fn3 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* 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 */
@@ -17,6 +17,6 @@
 } :root {
 } :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
-} .amount-input__minorPartAndCurrency_h1cko {
+} .amount-input__minorPartAndCurrency_1fbkr {
     color: var(--amount-input-minor-part-and-currency-color);
 }

package/amount-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: ns810 */
+/* hash: 1m0n7 */
 :root {
 } /* 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 */ /* 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 */
@@ -25,14 +25,14 @@
 * Решение
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
-*/ .amount-input__container_lvbqd {
+*/ .amount-input__container_1ohcr {
     position: relative;
-} .amount-input__bold_lvbqd .amount-input__input_lvbqd,
-.amount-input__bold_lvbqd .amount-input__suffixContainer_lvbqd {
+} .amount-input__bold_1ohcr .amount-input__input_1ohcr,
+.amount-input__bold_1ohcr .amount-input__suffixContainer_1ohcr {
     font-weight: bold;
-} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_lvbqd > *:first-child {
+} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_1ohcr > *:first-child {
     display: none;
-} .amount-input__filled_lvbqd .amount-input__input_lvbqd,
-.amount-input__input_lvbqd:focus {
+} .amount-input__filled_1ohcr .amount-input__input_1ohcr,
+.amount-input__input_1ohcr:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/modern/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1kvo0 */
+/* hash: 10meb */
 :root {
 } /* 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 */ /* 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 */
@@ -18,6 +18,6 @@
     --amount-input-inverted-minor-part-and-currency-color: var(
         --color-light-text-secondary-inverted
     );
-} .amount-input__minorPartAndCurrency_90d9n {
+} .amount-input__minorPartAndCurrency_17alg {
     color: var(--amount-input-inverted-minor-part-and-currency-color);
 }

package/attach/Component.js

@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"attach__component_1r90o","label":"attach__label_1r90o","control":"attach__control_1r90o","xxs":"attach__xxs_1r90o","file":"attach__file_1r90o","noFile":"attach__noFile_1r90o","xs":"attach__xs_1r90o","s":"attach__s_1r90o","m":"attach__m_1r90o","l":"attach__l_1r90o","abbreviation":"attach__abbreviation_1r90o","clear":"attach__clear_1r90o","progressBar":"attach__progressBar_1r90o","disabled":"attach__disabled_1r90o","icon":"attach__icon_1r90o","focused":"attach__focused_1r90o"};
+var styles = {"component":"attach__component_17kr9","label":"attach__label_17kr9","control":"attach__control_17kr9","xxs":"attach__xxs_17kr9","file":"attach__file_17kr9","noFile":"attach__noFile_17kr9","xs":"attach__xs_17kr9","s":"attach__s_17kr9","m":"attach__m_17kr9","l":"attach__l_17kr9","abbreviation":"attach__abbreviation_17kr9","clear":"attach__clear_17kr9","progressBar":"attach__progressBar_17kr9","disabled":"attach__disabled_17kr9","icon":"attach__icon_17kr9","focused":"attach__focused_17kr9"};
 require('./index.css');
 
 var MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];

package/attach/esm/Component.js

@@ -10,7 +10,7 @@ import { PaperclipSIcon } from '@alfalab/icons-glyph/PaperclipSIcon';
 import { pluralize } from '@alfalab/utils';
 import { truncateFilename } from './utils/index.js';
 
-var styles = {"component":"attach__component_1r90o","label":"attach__label_1r90o","control":"attach__control_1r90o","xxs":"attach__xxs_1r90o","file":"attach__file_1r90o","noFile":"attach__noFile_1r90o","xs":"attach__xs_1r90o","s":"attach__s_1r90o","m":"attach__m_1r90o","l":"attach__l_1r90o","abbreviation":"attach__abbreviation_1r90o","clear":"attach__clear_1r90o","progressBar":"attach__progressBar_1r90o","disabled":"attach__disabled_1r90o","icon":"attach__icon_1r90o","focused":"attach__focused_1r90o"};
+var styles = {"component":"attach__component_17kr9","label":"attach__label_17kr9","control":"attach__control_17kr9","xxs":"attach__xxs_17kr9","file":"attach__file_17kr9","noFile":"attach__noFile_17kr9","xs":"attach__xs_17kr9","s":"attach__s_17kr9","m":"attach__m_17kr9","l":"attach__l_17kr9","abbreviation":"attach__abbreviation_17kr9","clear":"attach__clear_17kr9","progressBar":"attach__progressBar_17kr9","disabled":"attach__disabled_17kr9","icon":"attach__icon_17kr9","focused":"attach__focused_17kr9"};
 require('./index.css');
 
 var MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];

package/attach/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: odr0h */
+/* hash: u5r35 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -18,7 +18,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .attach__component_1r90o {
+} .attach__component_17kr9 {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -27,7 +27,7 @@
     * {
         box-sizing: border-box;
     }
-} .attach__label_1r90o {
+} .attach__label_17kr9 {
     position: absolute;
     top: 0;
     left: 0;
@@ -36,42 +36,42 @@
     cursor: inherit;
     width: 0;
     height: 0;
-} .attach__control_1r90o {
+} .attach__control_17kr9 {
     opacity: 0;
     cursor: inherit
-} .attach__control_1r90o::-webkit-file-upload-button {
+} .attach__control_17kr9::-webkit-file-upload-button {
         cursor: inherit;
-    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__xxs_1r90o .attach__file_1r90o,
-.attach__xxs_1r90o .attach__noFile_1r90o,
-.attach__xs_1r90o .attach__file_1r90o,
-.attach__xs_1r90o .attach__noFile_1r90o {
+    } /* TODO обновить типографику на новую, когда ее зарелизят */ .attach__xxs_17kr9 .attach__file_17kr9,
+.attach__xxs_17kr9 .attach__noFile_17kr9,
+.attach__xs_17kr9 .attach__file_17kr9,
+.attach__xs_17kr9 .attach__noFile_17kr9 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-} .attach__s_1r90o .attach__file_1r90o,
-.attach__s_1r90o .attach__noFile_1r90o {
+} .attach__s_17kr9 .attach__file_17kr9,
+.attach__s_17kr9 .attach__noFile_17kr9 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__m_1r90o .attach__file_1r90o,
-.attach__m_1r90o .attach__noFile_1r90o {
+} .attach__m_17kr9 .attach__file_17kr9,
+.attach__m_17kr9 .attach__noFile_17kr9 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-} .attach__l_1r90o .attach__file_1r90o,
-.attach__l_1r90o .attach__noFile_1r90o {
+} .attach__l_17kr9 .attach__file_17kr9,
+.attach__l_17kr9 .attach__noFile_17kr9 {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
-} .attach__file_1r90o,
-.attach__noFile_1r90o {
+} .attach__file_17kr9,
+.attach__noFile_17kr9 {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
     color: var(--color-light-text-secondary);
-} .attach__abbreviation_1r90o {
+} .attach__abbreviation_17kr9 {
     text-decoration: none;
-} .attach__clear_1r90o {
+} .attach__clear_17kr9 {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -82,17 +82,17 @@
     font: inherit;
     background: none;
     border: none
-} .attach__clear_1r90o:before {
+} .attach__clear_17kr9:before {
         content: '\D7';
-    } .attach__progressBar_1r90o {
+    } .attach__progressBar_17kr9 {
     margin-top: var(--gap-2xs);
-} .attach__disabled_1r90o .attach__noFile_1r90o,
-.attach__disabled_1r90o .attach__file_1r90o,
-.attach__disabled_1r90o .attach__icon_1r90o {
+} .attach__disabled_17kr9 .attach__noFile_17kr9,
+.attach__disabled_17kr9 .attach__file_17kr9,
+.attach__disabled_17kr9 .attach__icon_17kr9 {
     opacity: 0.3;
-} .attach__disabled_1r90o .attach__clear_1r90o {
+} .attach__disabled_17kr9 .attach__clear_17kr9 {
     display: none;
-} .attach__focused_1r90o {
+} .attach__focused_17kr9 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }