@alfalab/core-components 47.26.0-beta.1 → 48.0.0-beta.1

package/amount-input/cssm/Component.js

@@ -4,7 +4,6 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsInput = require('../../input/cssm');
-var coreComponentsShared = require('../../shared/cssm');
 var coreComponentsWithSuffix = require('../../with-suffix/cssm');
 var utils = require('@alfalab/utils');
 var utils_index = require('./utils/index.js');
@@ -33,7 +32,7 @@ var SuffixInput = coreComponentsWithSuffix.withSuffix(coreComponentsInput.Input)
  */
 var AmountInput = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? utils_index.getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? coreComponentsShared.getComponentBreakpoint() : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, inputClassName = _a.inputClassName, label = _a.label, labelView = _a.labelView, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor", "inputClassName", "label", "labelView"]);
+    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? utils_index.getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, breakpoint = _a.breakpoint, client = _a.client, _s = _a.transparentMinor, transparentMinor = _s === void 0 ? true : _s, inputClassName = _a.inputClassName, label = _a.label, labelView = _a.labelView, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "onKeyDown", "breakpoint", "client", "transparentMinor", "inputClassName", "label", "labelView"]);
     var integerLength = Math.min(integerLengthProp, 15);
     var getFormattedAmount = React.useCallback(function (val) {
         if (val === '' || val === null || val === '-')
@@ -46,8 +45,8 @@ var AmountInput = React.forwardRef(function (_a, ref) {
             negativeSymbol: 'hyphen-minus',
         }).formatted;
     }, [currency, minority, view]);
-    var _u = React.useState(function () { return getFormattedAmount(value); }), inputValue = _u[0], setInputValue = _u[1];
-    var _v = inputValue.split(','), majorPart = _v[0], minorPart = _v[1];
+    var _t = React.useState(function () { return getFormattedAmount(value); }), inputValue = _t[0], setInputValue = _t[1];
+    var _u = inputValue.split(','), majorPart = _u[0], minorPart = _u[1];
     var currencyCode = utils_index.getCurrencyCodeWithFormat(currency, codeFormat);
     React.useEffect(function () {
         var currentAmountValue = utils_index.getAmountValueFromStr(inputValue, minority);
@@ -178,7 +177,7 @@ var AmountInput = React.forwardRef(function (_a, ref) {
                         _c)) },
                     minorPart !== undefined && ",".concat(minorPart),
                     utils.THINSP,
-                    suffix === currency ? currencyCode : suffix)), suffixContainerClassName: styles__default.default.suffixContainer, clear: clear, labelView: labelView, label: label, placeholder: utils_index.getVisiblePlaceholder(placeholder, label, labelView), value: inputValue, colors: colors, className: cn__default.default(styles__default.default.component, className), focusedClassName: focusedClassName, inputClassName: cn__default.default(styles__default.default.input, inputClassName), onChange: handleChange, onClear: handleClear, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '\\-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
+                    suffix === currency ? currencyCode : suffix)), suffixContainerClassName: styles__default.default.suffixContainer, clear: clear, labelView: labelView, label: label, placeholder: utils_index.getVisiblePlaceholder(placeholder, label, labelView), value: inputValue, colors: colors, className: cn__default.default(styles__default.default.component, className), focusedClassName: focusedClassName, inputClassName: cn__default.default(styles__default.default.input, inputClassName), onChange: handleChange, onClear: handleClear, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '\\-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint, client: client }))));
 });
 AmountInput.displayName = 'AmountInput';
 SuffixInput.displayName = 'SuffixInput';

package/amount-input/cssm/index.d.ts

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

package/amount-input/cssm/utils/index.d.ts

@@ -1,16 +1,18 @@
+/// <reference types="react" />
 /**
  * https://github.com/core-ds/utils
  * TODO: нужно перенести утилиты в этот проект, когда он будет готов
  */
 import { CurrencyCodes } from '@alfalab/data';
-import { AmountInputProps } from '../Component';
+import { AmountInputProps } from "../Component";
 /**
  * Форматирует введенное значение
  * @param enteredValue Значение введенное в инпут
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-export declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
-export declare function getAmountValueFromStr(str: string, minority: number): number | null;
-export declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
-export declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
+declare function getAmountValueFromStr(str: string, minority: number): number | null;
+declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
+declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+export { getFormattedValue, getAmountValueFromStr, getCurrencyCodeWithFormat, getVisiblePlaceholder };

package/amount-input/default.css

@@ -23,9 +23,9 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
     --amount-input-disabled: var(--color-light-text-tertiary);
-} .amount-input__minorPartAndCurrency_158ju {
+} .amount-input__minorPartAndCurrency_gbt6d {
     color: var(--amount-input-minor-part-and-currency-color)
-} .amount-input__minorPartAndCurrency_158ju.amount-input__disabled_158ju,
-    .amount-input__minorPartAndCurrency_158ju.amount-input__readOnly_158ju {
+} .amount-input__minorPartAndCurrency_gbt6d.amount-input__disabled_gbt6d,
+    .amount-input__minorPartAndCurrency_gbt6d.amount-input__readOnly_gbt6d {
         color: var(--amount-input-disabled);
     }

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import React from 'react';
-import { InputProps } from '../../input';
+import { InputProps } from "../../input";
 import { CurrencyCodes } from '@alfalab/data';
-export declare type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
+type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     /**
      * Денежное значение в минорных единицах
      * Значение null - значит не установлено
@@ -69,4 +70,69 @@ export declare type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | '
 /**
  * Компонент для ввода денежных значений
  */
-export declare const AmountInput: React.ForwardRefExoticComponent<Omit<AmountInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const AmountInput: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "onChange" | "type"> & {
+    /**
+     * Денежное значение в минорных единицах
+     * Значение null - значит не установлено
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Формат отображения кода валюты
+     */
+    codeFormat?: "letter" | "symbolic" | undefined;
+    /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
+    /**
+     * Валюта
+     */
+    currency?: "ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BOV" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "HRK" | "CUP" | "CUC" | "CZK" | "DKK" | "DOP" | "XCD" | "EGP" | "SVC" | "EEK" | "EUR" | "FKP" | "FJD" | "FRF" | "GHC" | "GIP" | "GTQ" | "GGP" | "GYD" | "HNL" | "HKD" | "HUF" | "ISK" | "INR" | "IDR" | "IRR" | "IMP" | "ILS" | "JMD" | "JPY" | "JEP" | "KZT" | "KGS" | "LAK" | "LVL" | "LBP" | "LRD" | "LTL" | "MKD" | "MYR" | "MUR" | "MXN" | "MXV" | "MNT" | "MZN" | "NAD" | "NPR" | "ANG" | "NZD" | "NIO" | "NGN" | "KPW" | "NOK" | "OMR" | "PKR" | "PAB" | "PYG" | "PEN" | "PHP" | "PLN" | "QAR" | "RON" | "RUR" | "RUB" | "SHP" | "SAR" | "RSD" | "SCR" | "SGD" | "SBD" | "SOS" | "ZAR" | "KRW" | "LKR" | "SEK" | "CHF" | "SRD" | "SYP" | "TWD" | "THB" | "TTD" | "TRY" | "TRL" | "TVD" | "UAH" | "GBP" | "USD" | "UYU" | "UYI" | "UZS" | "VEF" | "VND" | "YER" | "ZWD" | "A98" | "A99" | "A76" | "A33" | "AMD" | "BDT" | "BIF" | "GEL" | "GHS" | "SDG" | "TJS" | "KWD" | "MDL" | "AED" | "DZD" | "BHD" | "VED" | "VES" | "VUV" | "GNF" | "HTG" | "GMD" | "STN" | "ZWL" | "ZMW" | "JOD" | "IQD" | "AOA" | "KES" | "PGK" | "KMF" | "CDF" | "MMK" | "SLE" | "SLL" | "LYD" | "SZL" | "LSL" | "MWK" | "MGA" | "MAD" | "ERN" | "BTN" | "TMT" | "TOP" | "MOP" | "MVR" | "TZS" | "WST" | "TND" | "UGX" | "MRU" | "DJF" | "XAF" | "XPF" | "XOF" | "RWF" | "CVE" | "ETB" | "SSP" | undefined;
+    /**
+     * Дополнительный закрепленный текст справа от основного значения. (по умолчанию — символ валюты)
+     */
+    suffix?: string | undefined;
+    /**
+     * Максимальное число знаков до запятой
+     * max 15
+     */
+    integerLength?: number | undefined;
+    /**
+     * Минорные единицы
+     */
+    minority?: number | undefined;
+    /**
+     * Позволяет вводить только целые значения
+     */
+    integersOnly?: boolean | undefined;
+    /**
+     * @default - true. Нельзя вводить отрицательные значения.
+     * Возможность вводить только положительные значения
+     */
+    positiveOnly?: boolean | undefined;
+    /**
+     * Жир
+     */
+    bold?: boolean | undefined;
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement>, payload: {
+        /**
+         * Денежное значение в минорных единицах
+         * Значение null - значит не установлено
+         */
+        value: number | null;
+        /**
+         * Значение инпута
+         */
+        valueString: string;
+    }) => void) | undefined;
+    /**
+     * Делает минорную часть полупрозрачной
+     */
+    transparentMinor?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { AmountInputProps, AmountInput };

package/amount-input/esm/Component.js

@@ -2,18 +2,17 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useCallback, useState, useEffect, Fragment } from 'react';
 import cn from 'classnames';
 import { Input } from '../../input/esm';
-import { getComponentBreakpoint } from '../../shared/esm';
 import { withSuffix } from '../../with-suffix/esm';
 import { formatAmount, THINSP } from '@alfalab/utils';
 import { getCurrencyCodeWithFormat, getAmountValueFromStr, getVisiblePlaceholder, getFormattedValue } from './utils/index.js';
 
-var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_158ju","disabled":"amount-input__disabled_158ju","readOnly":"amount-input__readOnly_158ju"};
+var defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_gbt6d","disabled":"amount-input__disabled_gbt6d","readOnly":"amount-input__readOnly_gbt6d"};
 require('./default.css');
 
-var styles = {"container":"amount-input__container_11ly9","bold":"amount-input__bold_11ly9","input":"amount-input__input_11ly9","suffixContainer":"amount-input__suffixContainer_11ly9","filled":"amount-input__filled_11ly9"};
+var styles = {"container":"amount-input__container_1f37s","bold":"amount-input__bold_1f37s","input":"amount-input__input_1f37s","suffixContainer":"amount-input__suffixContainer_1f37s","filled":"amount-input__filled_1f37s"};
 require('./index.css');
 
-var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_x7kje","disabled":"amount-input__disabled_x7kje","readOnly":"amount-input__readOnly_x7kje"};
+var invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1rggk","disabled":"amount-input__disabled_1rggk","readOnly":"amount-input__readOnly_1rggk"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -29,7 +28,7 @@ var SuffixInput = withSuffix(Input);
  */
 var AmountInput = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? getComponentBreakpoint() : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, inputClassName = _a.inputClassName, label = _a.label, labelView = _a.labelView, restProps = __rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor", "inputClassName", "label", "labelView"]);
+    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, breakpoint = _a.breakpoint, client = _a.client, _s = _a.transparentMinor, transparentMinor = _s === void 0 ? true : _s, inputClassName = _a.inputClassName, label = _a.label, labelView = _a.labelView, restProps = __rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "onKeyDown", "breakpoint", "client", "transparentMinor", "inputClassName", "label", "labelView"]);
     var integerLength = Math.min(integerLengthProp, 15);
     var getFormattedAmount = useCallback(function (val) {
         if (val === '' || val === null || val === '-')
@@ -42,8 +41,8 @@ var AmountInput = forwardRef(function (_a, ref) {
             negativeSymbol: 'hyphen-minus',
         }).formatted;
     }, [currency, minority, view]);
-    var _u = useState(function () { return getFormattedAmount(value); }), inputValue = _u[0], setInputValue = _u[1];
-    var _v = inputValue.split(','), majorPart = _v[0], minorPart = _v[1];
+    var _t = useState(function () { return getFormattedAmount(value); }), inputValue = _t[0], setInputValue = _t[1];
+    var _u = inputValue.split(','), majorPart = _u[0], minorPart = _u[1];
     var currencyCode = getCurrencyCodeWithFormat(currency, codeFormat);
     useEffect(function () {
         var currentAmountValue = getAmountValueFromStr(inputValue, minority);
@@ -174,7 +173,7 @@ var AmountInput = forwardRef(function (_a, ref) {
                         _c)) },
                     minorPart !== undefined && ",".concat(minorPart),
                     THINSP,
-                    suffix === currency ? currencyCode : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, labelView: labelView, label: label, placeholder: getVisiblePlaceholder(placeholder, label, labelView), value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: cn(styles.input, inputClassName), onChange: handleChange, onClear: handleClear, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '\\-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint }))));
+                    suffix === currency ? currencyCode : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, labelView: labelView, label: label, placeholder: getVisiblePlaceholder(placeholder, label, labelView), value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: cn(styles.input, inputClassName), onChange: handleChange, onClear: handleClear, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: 'decimal', pattern: "[".concat(positiveOnly ? '' : '\\-', "0-9\\s\\.,]*"), dataTestId: dataTestId, ref: ref, breakpoint: breakpoint, client: client }))));
 });
 AmountInput.displayName = 'AmountInput';
 SuffixInput.displayName = 'SuffixInput';

package/amount-input/esm/default.css

@@ -23,9 +23,9 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
     --amount-input-disabled: var(--color-light-text-tertiary);
-} .amount-input__minorPartAndCurrency_158ju {
+} .amount-input__minorPartAndCurrency_gbt6d {
     color: var(--amount-input-minor-part-and-currency-color)
-} .amount-input__minorPartAndCurrency_158ju.amount-input__disabled_158ju,
-    .amount-input__minorPartAndCurrency_158ju.amount-input__readOnly_158ju {
+} .amount-input__minorPartAndCurrency_gbt6d.amount-input__disabled_gbt6d,
+    .amount-input__minorPartAndCurrency_gbt6d.amount-input__readOnly_gbt6d {
         color: var(--amount-input-disabled);
     }

package/amount-input/esm/index.css

@@ -29,14 +29,14 @@
 * Решение
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
-*/ .amount-input__container_11ly9 {
+*/ .amount-input__container_1f37s {
     position: relative;
-} .amount-input__bold_11ly9 .amount-input__input_11ly9,
-.amount-input__bold_11ly9 .amount-input__suffixContainer_11ly9 {
+} .amount-input__bold_1f37s .amount-input__input_1f37s,
+.amount-input__bold_1f37s .amount-input__suffixContainer_1f37s {
     font-weight: bold;
-} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_11ly9 > *:first-child {
+} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_1f37s > *:first-child {
     display: none;
-} .amount-input__filled_11ly9 .amount-input__input_11ly9,
-.amount-input__input_11ly9:focus {
+} .amount-input__filled_1f37s .amount-input__input_1f37s,
+.amount-input__input_1f37s:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/esm/index.d.ts

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

package/amount-input/esm/index.js

@@ -3,7 +3,6 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../../input/esm';
-import '../../shared/esm';
 import '../../with-suffix/esm';
 import '@alfalab/utils';
 import './utils/index.js';

package/amount-input/esm/inverted.css

@@ -24,9 +24,9 @@
         --color-light-text-secondary-inverted
     );
     --amount-input-inverted-disabled: var(--color-light-text-tertiary-inverted);
-} .amount-input__minorPartAndCurrency_x7kje {
+} .amount-input__minorPartAndCurrency_1rggk {
     color: var(--amount-input-inverted-minor-part-and-currency-color)
-} .amount-input__minorPartAndCurrency_x7kje.amount-input__disabled_x7kje,
-    .amount-input__minorPartAndCurrency_x7kje.amount-input__readOnly_x7kje {
+} .amount-input__minorPartAndCurrency_1rggk.amount-input__disabled_1rggk,
+    .amount-input__minorPartAndCurrency_1rggk.amount-input__readOnly_1rggk {
         color: var(--amount-input-inverted-disabled);
     }

package/amount-input/esm/utils/index.d.ts

@@ -1,16 +1,18 @@
+/// <reference types="react" />
 /**
  * https://github.com/core-ds/utils
  * TODO: нужно перенести утилиты в этот проект, когда он будет готов
  */
 import { CurrencyCodes } from '@alfalab/data';
-import { AmountInputProps } from '../Component';
+import { AmountInputProps } from "../Component";
 /**
  * Форматирует введенное значение
  * @param enteredValue Значение введенное в инпут
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-export declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
-export declare function getAmountValueFromStr(str: string, minority: number): number | null;
-export declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
-export declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
+declare function getAmountValueFromStr(str: string, minority: number): number | null;
+declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
+declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+export { getFormattedValue, getAmountValueFromStr, getCurrencyCodeWithFormat, getVisiblePlaceholder };

package/amount-input/index.css

@@ -29,14 +29,14 @@
 * Решение
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
-*/ .amount-input__container_11ly9 {
+*/ .amount-input__container_1f37s {
     position: relative;
-} .amount-input__bold_11ly9 .amount-input__input_11ly9,
-.amount-input__bold_11ly9 .amount-input__suffixContainer_11ly9 {
+} .amount-input__bold_1f37s .amount-input__input_1f37s,
+.amount-input__bold_1f37s .amount-input__suffixContainer_1f37s {
     font-weight: bold;
-} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_11ly9 > *:first-child {
+} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_1f37s > *:first-child {
     display: none;
-} .amount-input__filled_11ly9 .amount-input__input_11ly9,
-.amount-input__input_11ly9:focus {
+} .amount-input__filled_1f37s .amount-input__input_1f37s,
+.amount-input__input_1f37s:focus {
     -webkit-text-fill-color: transparent;
 }

package/amount-input/index.d.ts

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

package/amount-input/inverted.css

@@ -24,9 +24,9 @@
         --color-light-text-secondary-inverted
     );
     --amount-input-inverted-disabled: var(--color-light-text-tertiary-inverted);
-} .amount-input__minorPartAndCurrency_x7kje {
+} .amount-input__minorPartAndCurrency_1rggk {
     color: var(--amount-input-inverted-minor-part-and-currency-color)
-} .amount-input__minorPartAndCurrency_x7kje.amount-input__disabled_x7kje,
-    .amount-input__minorPartAndCurrency_x7kje.amount-input__readOnly_x7kje {
+} .amount-input__minorPartAndCurrency_1rggk.amount-input__disabled_1rggk,
+    .amount-input__minorPartAndCurrency_1rggk.amount-input__readOnly_1rggk {
         color: var(--amount-input-inverted-disabled);
     }

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import React from 'react';
-import { InputProps } from '../../input';
+import { InputProps } from "../../input";
 import { CurrencyCodes } from '@alfalab/data';
-export declare type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
+type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     /**
      * Денежное значение в минорных единицах
      * Значение null - значит не установлено
@@ -69,4 +70,69 @@ export declare type AmountInputProps = Omit<InputProps, 'value' | 'onChange' | '
 /**
  * Компонент для ввода денежных значений
  */
-export declare const AmountInput: React.ForwardRefExoticComponent<Omit<AmountInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const AmountInput: React.ForwardRefExoticComponent<Omit<InputProps, "value" | "onChange" | "type"> & {
+    /**
+     * Денежное значение в минорных единицах
+     * Значение null - значит не установлено
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Формат отображения кода валюты
+     */
+    codeFormat?: "letter" | "symbolic" | undefined;
+    /**
+     * default - не отображаем копейки, если их значение 0
+     * withZeroMinorPart - отображаем копейки, даже если их значение равно 0
+     * @default default
+     */
+    view?: "default" | "withZeroMinorPart" | undefined;
+    /**
+     * Валюта
+     */
+    currency?: "ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BOV" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "HRK" | "CUP" | "CUC" | "CZK" | "DKK" | "DOP" | "XCD" | "EGP" | "SVC" | "EEK" | "EUR" | "FKP" | "FJD" | "FRF" | "GHC" | "GIP" | "GTQ" | "GGP" | "GYD" | "HNL" | "HKD" | "HUF" | "ISK" | "INR" | "IDR" | "IRR" | "IMP" | "ILS" | "JMD" | "JPY" | "JEP" | "KZT" | "KGS" | "LAK" | "LVL" | "LBP" | "LRD" | "LTL" | "MKD" | "MYR" | "MUR" | "MXN" | "MXV" | "MNT" | "MZN" | "NAD" | "NPR" | "ANG" | "NZD" | "NIO" | "NGN" | "KPW" | "NOK" | "OMR" | "PKR" | "PAB" | "PYG" | "PEN" | "PHP" | "PLN" | "QAR" | "RON" | "RUR" | "RUB" | "SHP" | "SAR" | "RSD" | "SCR" | "SGD" | "SBD" | "SOS" | "ZAR" | "KRW" | "LKR" | "SEK" | "CHF" | "SRD" | "SYP" | "TWD" | "THB" | "TTD" | "TRY" | "TRL" | "TVD" | "UAH" | "GBP" | "USD" | "UYU" | "UYI" | "UZS" | "VEF" | "VND" | "YER" | "ZWD" | "A98" | "A99" | "A76" | "A33" | "AMD" | "BDT" | "BIF" | "GEL" | "GHS" | "SDG" | "TJS" | "KWD" | "MDL" | "AED" | "DZD" | "BHD" | "VED" | "VES" | "VUV" | "GNF" | "HTG" | "GMD" | "STN" | "ZWL" | "ZMW" | "JOD" | "IQD" | "AOA" | "KES" | "PGK" | "KMF" | "CDF" | "MMK" | "SLE" | "SLL" | "LYD" | "SZL" | "LSL" | "MWK" | "MGA" | "MAD" | "ERN" | "BTN" | "TMT" | "TOP" | "MOP" | "MVR" | "TZS" | "WST" | "TND" | "UGX" | "MRU" | "DJF" | "XAF" | "XPF" | "XOF" | "RWF" | "CVE" | "ETB" | "SSP" | undefined;
+    /**
+     * Дополнительный закрепленный текст справа от основного значения. (по умолчанию — символ валюты)
+     */
+    suffix?: string | undefined;
+    /**
+     * Максимальное число знаков до запятой
+     * max 15
+     */
+    integerLength?: number | undefined;
+    /**
+     * Минорные единицы
+     */
+    minority?: number | undefined;
+    /**
+     * Позволяет вводить только целые значения
+     */
+    integersOnly?: boolean | undefined;
+    /**
+     * @default - true. Нельзя вводить отрицательные значения.
+     * Возможность вводить только положительные значения
+     */
+    positiveOnly?: boolean | undefined;
+    /**
+     * Жир
+     */
+    bold?: boolean | undefined;
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement>, payload: {
+        /**
+         * Денежное значение в минорных единицах
+         * Значение null - значит не установлено
+         */
+        value: number | null;
+        /**
+         * Значение инпута
+         */
+        valueString: string;
+    }) => void) | undefined;
+    /**
+     * Делает минорную часть полупрозрачной
+     */
+    transparentMinor?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { AmountInputProps, AmountInput };

package/amount-input/modern/Component.js

@@ -1,18 +1,17 @@
 import React, { forwardRef, useCallback, useState, useEffect, Fragment } from 'react';
 import cn from 'classnames';
 import { Input } from '../../input/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
 import { withSuffix } from '../../with-suffix/modern';
 import { formatAmount, THINSP } from '@alfalab/utils';
 import { getCurrencyCodeWithFormat, getAmountValueFromStr, getVisiblePlaceholder, getFormattedValue } from './utils/index.js';
 
-const defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_158ju","disabled":"amount-input__disabled_158ju","readOnly":"amount-input__readOnly_158ju"};
+const defaultColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_gbt6d","disabled":"amount-input__disabled_gbt6d","readOnly":"amount-input__readOnly_gbt6d"};
 require('./default.css');
 
-const styles = {"container":"amount-input__container_11ly9","bold":"amount-input__bold_11ly9","input":"amount-input__input_11ly9","suffixContainer":"amount-input__suffixContainer_11ly9","filled":"amount-input__filled_11ly9"};
+const styles = {"container":"amount-input__container_1f37s","bold":"amount-input__bold_1f37s","input":"amount-input__input_1f37s","suffixContainer":"amount-input__suffixContainer_1f37s","filled":"amount-input__filled_1f37s"};
 require('./index.css');
 
-const invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_x7kje","disabled":"amount-input__disabled_x7kje","readOnly":"amount-input__readOnly_x7kje"};
+const invertedColors = {"minorPartAndCurrency":"amount-input__minorPartAndCurrency_1rggk","disabled":"amount-input__disabled_1rggk","readOnly":"amount-input__readOnly_1rggk"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -26,7 +25,7 @@ const SuffixInput = withSuffix(Input);
 /**
  * Компонент для ввода денежных значений
  */
-const AmountInput = forwardRef(({ view = 'default', value = null, integerLength: integerLengthProp = 9, minority = 100, currency = 'RUR', suffix = currency, codeFormat = 'symbolic', placeholder = `0\u2009${suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, onBlur, breakpoint = getComponentBreakpoint(), onKeyDown, transparentMinor = true, inputClassName, label, labelView, ...restProps }, ref) => {
+const AmountInput = forwardRef(({ view = 'default', value = null, integerLength: integerLengthProp = 9, minority = 100, currency = 'RUR', suffix = currency, codeFormat = 'symbolic', placeholder = `0\u2009${suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, onBlur, onKeyDown, breakpoint, client, transparentMinor = true, inputClassName, label, labelView, ...restProps }, ref) => {
     const integerLength = Math.min(integerLengthProp, 15);
     const getFormattedAmount = useCallback((val) => {
         if (val === '' || val === null || val === '-')
@@ -171,7 +170,7 @@ const AmountInput = forwardRef(({ view = 'default', value = null, integerLength:
                     }) },
                     minorPart !== undefined && `,${minorPart}`,
                     THINSP,
-                    suffix === currency ? currencyCode : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, labelView: labelView, label: label, placeholder: getVisiblePlaceholder(placeholder, label, labelView), value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: cn(styles.input, inputClassName), onChange: handleChange, onClear: handleClear, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: 'decimal', pattern: `[${positiveOnly ? '' : '\\-'}0-9\\s\\.,]*`, dataTestId: dataTestId, ref: ref, breakpoint: breakpoint })));
+                    suffix === currency ? currencyCode : suffix)), suffixContainerClassName: styles.suffixContainer, clear: clear, labelView: labelView, label: label, placeholder: getVisiblePlaceholder(placeholder, label, labelView), value: inputValue, colors: colors, className: cn(styles.component, className), focusedClassName: focusedClassName, inputClassName: cn(styles.input, inputClassName), onChange: handleChange, onClear: handleClear, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: 'decimal', pattern: `[${positiveOnly ? '' : '\\-'}0-9\\s\\.,]*`, dataTestId: dataTestId, ref: ref, breakpoint: breakpoint, client: client })));
 });
 AmountInput.displayName = 'AmountInput';
 SuffixInput.displayName = 'SuffixInput';

package/amount-input/modern/default.css

@@ -23,9 +23,9 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --amount-input-minor-part-and-currency-color: var(--color-light-text-secondary);
     --amount-input-disabled: var(--color-light-text-tertiary);
-} .amount-input__minorPartAndCurrency_158ju {
+} .amount-input__minorPartAndCurrency_gbt6d {
     color: var(--amount-input-minor-part-and-currency-color)
-} .amount-input__minorPartAndCurrency_158ju.amount-input__disabled_158ju,
-    .amount-input__minorPartAndCurrency_158ju.amount-input__readOnly_158ju {
+} .amount-input__minorPartAndCurrency_gbt6d.amount-input__disabled_gbt6d,
+    .amount-input__minorPartAndCurrency_gbt6d.amount-input__readOnly_gbt6d {
         color: var(--amount-input-disabled);
     }

package/amount-input/modern/index.css

@@ -29,14 +29,14 @@
 * Решение
 * Делаем скрытый текст где держим то же значение, добавляем символ валюты
 * Важно расположить этот текст ровно на месте инпута и чтобы он имел те же параметры что и текст в инпуте
-*/ .amount-input__container_11ly9 {
+*/ .amount-input__container_1f37s {
     position: relative;
-} .amount-input__bold_11ly9 .amount-input__input_11ly9,
-.amount-input__bold_11ly9 .amount-input__suffixContainer_11ly9 {
+} .amount-input__bold_1f37s .amount-input__input_1f37s,
+.amount-input__bold_1f37s .amount-input__suffixContainer_1f37s {
     font-weight: bold;
-} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_11ly9 > *:first-child {
+} /* суффикс = текст в поле. Скрываем спейсер, чтобы суффикс выглядел как введенное в поле значение */ .amount-input__suffixContainer_1f37s > *:first-child {
     display: none;
-} .amount-input__filled_11ly9 .amount-input__input_11ly9,
-.amount-input__input_11ly9:focus {
+} .amount-input__filled_1f37s .amount-input__input_1f37s,
+.amount-input__input_1f37s:focus {
     -webkit-text-fill-color: transparent;
 }

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

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

package/amount-input/modern/index.js

@@ -2,7 +2,6 @@ export { AmountInput } from './Component.js';
 import 'react';
 import 'classnames';
 import '../../input/modern';
-import '../../shared/modern';
 import '../../with-suffix/modern';
 import '@alfalab/utils';
 import './utils/index.js';

package/amount-input/modern/inverted.css

@@ -24,9 +24,9 @@
         --color-light-text-secondary-inverted
     );
     --amount-input-inverted-disabled: var(--color-light-text-tertiary-inverted);
-} .amount-input__minorPartAndCurrency_x7kje {
+} .amount-input__minorPartAndCurrency_1rggk {
     color: var(--amount-input-inverted-minor-part-and-currency-color)
-} .amount-input__minorPartAndCurrency_x7kje.amount-input__disabled_x7kje,
-    .amount-input__minorPartAndCurrency_x7kje.amount-input__readOnly_x7kje {
+} .amount-input__minorPartAndCurrency_1rggk.amount-input__disabled_1rggk,
+    .amount-input__minorPartAndCurrency_1rggk.amount-input__readOnly_1rggk {
         color: var(--amount-input-inverted-disabled);
     }

package/amount-input/modern/utils/index.d.ts

@@ -1,16 +1,18 @@
+/// <reference types="react" />
 /**
  * https://github.com/core-ds/utils
  * TODO: нужно перенести утилиты в этот проект, когда он будет готов
  */
 import { CurrencyCodes } from '@alfalab/data';
-import { AmountInputProps } from '../Component';
+import { AmountInputProps } from "../Component";
 /**
  * Форматирует введенное значение
  * @param enteredValue Значение введенное в инпут
  * @param currency валюта
  * @param minority количество минорных единиц
  */
-export declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
-export declare function getAmountValueFromStr(str: string, minority: number): number | null;
-export declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
-export declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
+declare function getAmountValueFromStr(str: string, minority: number): number | null;
+declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
+declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+export { getFormattedValue, getAmountValueFromStr, getCurrencyCodeWithFormat, getVisiblePlaceholder };