@alfalab/core-components 48.6.0-beta.1 → 48.7.0

package/file-upload-item/types/file-upload-item-props.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ElementType, HTMLAttributeAnchorTarget, MouseEvent } from "react";
+import { FileUploadItemStatus } from "./status";
 type FileUploadItemProps = {
     /**
      * Дополнительный класс
@@ -46,7 +47,7 @@ type FileUploadItemProps = {
     /**
      * Статус загрузки файла
      */
-    uploadStatus?: string;
+    uploadStatus?: FileUploadItemStatus;
     /**
      * Сообщение об ошибке
      */

package/file-upload-item/types/status.d.ts

@@ -0,0 +1,2 @@
+type FileUploadItemStatus = 'INITIAL' | 'SUCCESS' | 'ERROR' | 'UPLOADING' | 'UPLOADED' | 'DELETED';
+export { FileUploadItemStatus };

package/file-upload-item/types/status.js

@@ -0,0 +1 @@
+

package/file-upload-item/utils.d.ts

@@ -1,8 +1,9 @@
+import { FileUploadItemStatus } from "./types/status";
 declare function humanFileSize(size: string | number): string;
 declare const getExtension: (filename: string) => string | undefined;
-declare const isInitialStatus: (status?: string) => boolean;
-declare const isSuccessStatus: (status?: string) => boolean;
-declare const isErrorStatus: (status?: string) => boolean;
-declare const isUploadingStatus: (status?: string) => boolean;
-declare const isUploadedStatus: (status?: string) => boolean;
+declare const isInitialStatus: (status?: FileUploadItemStatus) => boolean;
+declare const isSuccessStatus: (status?: FileUploadItemStatus) => boolean;
+declare const isErrorStatus: (status?: FileUploadItemStatus) => boolean;
+declare const isUploadingStatus: (status?: FileUploadItemStatus) => boolean;
+declare const isUploadedStatus: (status?: FileUploadItemStatus) => boolean;
 export { humanFileSize, getExtension, isInitialStatus, isSuccessStatus, isErrorStatus, isUploadingStatus, isUploadedStatus };

package/gallery/components/image-viewer/component.js

@@ -14,7 +14,7 @@ var utils_constants = require('../../utils/constants.js');
 var components_imageViewer_hooks = require('./hooks.js');
 var components_imageViewer_slide = require('./slide.js');
 require('swiper/swiper.min.css');
-var index_module = require('../../index.module-179d71da.js');
+var index_module = require('../../index.module-1e975ef9.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/image-viewer/hooks.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var elementClosest = require('element-closest');
 var context = require('../../context.js');
-var index_module = require('../../index.module-179d71da.js');
+var index_module = require('../../index.module-1e975ef9.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/image-viewer/single.js

@@ -6,7 +6,7 @@ var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var components_imageViewer_hooks = require('./hooks.js');
 var components_imageViewer_slide = require('./slide.js');
-var index_module = require('../../index.module-179d71da.js');
+var index_module = require('../../index.module-1e975ef9.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/components/image-viewer/slide.js

@@ -8,7 +8,7 @@ var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
 var components_imageViewer_paths = require('./paths.js');
 var components_imageViewer_video_index = require('./video/index.js');
-var index_module = require('../../index.module-179d71da.js');
+var index_module = require('../../index.module-1e975ef9.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/gallery/esm/Component.js

@@ -13,7 +13,7 @@ import { HeaderMobile } from './components/header-mobile/Component.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-e08f1a14.js';
+import './index.module-becebb0c.js';
 import './components/image-viewer/slide.js';
 import '../../typography/esm';
 import './utils/constants.js';

package/gallery/esm/components/image-viewer/component.js

@@ -12,7 +12,7 @@ import { TestIds } from '../../utils/constants.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
-import { s as styles } from '../../index.module-e08f1a14.js';
+import { s as styles } from '../../index.module-becebb0c.js';
 import 'element-closest';
 import '../../../../typography/esm';
 import './paths.js';

package/gallery/esm/components/image-viewer/hooks.js

@@ -1,7 +1,7 @@
 import { useContext, useRef, useCallback, useEffect } from 'react';
 import elementClosest from 'element-closest';
 import { GalleryContext } from '../../context.js';
-import { s as styles } from '../../index.module-e08f1a14.js';
+import { s as styles } from '../../index.module-becebb0c.js';
 
 var useHandleImageViewer = function () {
     var _a = useContext(GalleryContext), view = _a.view, onClose = _a.onClose, setImageMeta = _a.setImageMeta;

package/gallery/esm/components/image-viewer/index.js

@@ -12,7 +12,7 @@ import '../../utils/utils.js';
 import '../../utils/constants.js';
 import './hooks.js';
 import 'element-closest';
-import '../../index.module-e08f1a14.js';
+import '../../index.module-becebb0c.js';
 import './slide.js';
 import '../../../../typography/esm';
 import './paths.js';

package/gallery/esm/components/image-viewer/single.js

@@ -4,7 +4,7 @@ import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
-import { s as styles } from '../../index.module-e08f1a14.js';
+import { s as styles } from '../../index.module-becebb0c.js';
 import 'element-closest';
 import '../../../../typography/esm';
 import '../../utils/constants.js';

package/gallery/esm/components/image-viewer/slide.js

@@ -6,7 +6,7 @@ import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
-import { s as styles } from '../../index.module-e08f1a14.js';
+import { s as styles } from '../../index.module-becebb0c.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';

package/gallery/esm/components/index.js

@@ -33,7 +33,7 @@ import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import './image-viewer/hooks.js';
 import 'element-closest';
-import '../index.module-e08f1a14.js';
+import '../index.module-becebb0c.js';
 import './image-viewer/slide.js';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';

package/gallery/esm/index.js

@@ -9,7 +9,7 @@ import './context.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-e08f1a14.js';
+import './index.module-becebb0c.js';
 import './components/image-viewer/slide.js';
 import '../../typography/esm';
 import './components/image-viewer/paths.js';

package/gallery/modern/Component.js

@@ -13,7 +13,7 @@ import { HeaderMobile } from './components/header-mobile/Component.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-6085e667.js';
+import './index.module-25834c2f.js';
 import './components/image-viewer/slide.js';
 import '../../typography/modern';
 import './utils/constants.js';

package/gallery/modern/components/image-viewer/component.js

@@ -11,7 +11,7 @@ import { TestIds } from '../../utils/constants.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import 'swiper/swiper.min.css';
-import { s as styles } from '../../index.module-6085e667.js';
+import { s as styles } from '../../index.module-25834c2f.js';
 import 'element-closest';
 import '../../../../typography/modern';
 import './paths.js';

package/gallery/modern/components/image-viewer/hooks.js

@@ -1,7 +1,7 @@
 import { useContext, useRef, useCallback, useEffect } from 'react';
 import elementClosest from 'element-closest';
 import { GalleryContext } from '../../context.js';
-import { s as styles } from '../../index.module-6085e667.js';
+import { s as styles } from '../../index.module-25834c2f.js';
 
 const useHandleImageViewer = () => {
     const { view, onClose, setImageMeta } = useContext(GalleryContext);

package/gallery/modern/components/image-viewer/index.js

@@ -11,7 +11,7 @@ import '../../utils/utils.js';
 import '../../utils/constants.js';
 import './hooks.js';
 import 'element-closest';
-import '../../index.module-6085e667.js';
+import '../../index.module-25834c2f.js';
 import './slide.js';
 import '../../../../typography/modern';
 import './paths.js';

package/gallery/modern/components/image-viewer/single.js

@@ -4,7 +4,7 @@ import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
-import { s as styles } from '../../index.module-6085e667.js';
+import { s as styles } from '../../index.module-25834c2f.js';
 import 'element-closest';
 import '../../../../typography/modern';
 import '../../utils/constants.js';

package/gallery/modern/components/image-viewer/slide.js

@@ -6,7 +6,7 @@ import { isSmallImage, isVideo, getImageAlt } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { NoImagePaths } from './paths.js';
 import { Video } from './video/index.js';
-import { s as styles } from '../../index.module-6085e667.js';
+import { s as styles } from '../../index.module-25834c2f.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';

package/gallery/modern/components/index.js

@@ -32,7 +32,7 @@ import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import './image-viewer/hooks.js';
 import 'element-closest';
-import '../index.module-6085e667.js';
+import '../index.module-25834c2f.js';
 import './image-viewer/slide.js';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';

package/gallery/modern/index.js

@@ -9,7 +9,7 @@ import './context.js';
 import './utils/utils.js';
 import './components/image-viewer/hooks.js';
 import 'element-closest';
-import './index.module-6085e667.js';
+import './index.module-25834c2f.js';
 import './components/image-viewer/slide.js';
 import '../../typography/modern';
 import './components/image-viewer/paths.js';

package/input/components/base-input/Component.js

@@ -42,6 +42,7 @@ var inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
 var BaseInput = React__default.default.forwardRef(function (_a, ref) {
     var _b, _c;
     var _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, _f = _a.block, block = _f === void 0 ? false : _f, _g = _a.colors, colors = _g === void 0 ? 'default' : _g, bottomAddons = _a.bottomAddons, dataTestId = _a.dataTestId, _h = _a.clear, clear = _h === void 0 ? false : _h, disabled = _a.disabled, error = _a.error, success = _a.success, hint = _a.hint, className = _a.className, fieldClassName = _a.fieldClassName, inputClassName = _a.inputClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, rightAddonsProps = _a.rightAddonsProps, leftAddonsProps = _a.leftAddonsProps, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, _j = _a.labelView, labelView = _j === void 0 ? 'inner' : _j, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onClear = _a.onClear, onClick = _a.onClick, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onAnimationStart = _a.onAnimationStart, rightAddons = _a.rightAddons, value = _a.value, defaultValue = _a.defaultValue, wrapperRef = _a.wrapperRef, readOnlyProp = _a.readOnly, FormControlComponent = _a.FormControlComponent, disableUserInput = _a.disableUserInput, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "disableUserInput"]);
+    var onKeyDown = restProps.onKeyDown;
     var uncontrolled = value === undefined;
     var readOnly = readOnlyProp || disableUserInput;
     var inputRef = React.useRef(null);
@@ -79,13 +80,37 @@ var BaseInput = React__default.default.forwardRef(function (_a, ref) {
         }
     }, [onBlur]);
     var handleInputChange = React.useCallback(function (event) {
+        var inputValue = event.target.value;
+        var target = event.target;
+        var isInputTypeNumber = target.getAttribute('type') === 'number';
+        var pattern = /[eE]/g;
+        if (isInputTypeNumber && pattern.test(inputValue)) {
+            inputValue = inputValue.replace(pattern, '');
+        }
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: inputValue });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(inputValue);
         }
     }, [onChange, uncontrolled]);
+    var handleKeyDown = React.useCallback(function (event) {
+        /**
+         * По умолчанию в input[type=number] можно вводить числа типа 2e5 (200 000)
+         * Это ломает некоторое поведение, поэтому запрещаем ввод символов [eE]
+         * @see DS-6808
+         */
+        var key = event.key, target = event.target;
+        var eventTarget = target;
+        var isInputTypeNumber = eventTarget.getAttribute('type') === 'number';
+        if (isInputTypeNumber && (key === 'e' || key === 'E')) {
+            event.preventDefault();
+            return;
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
     var handleClear = React.useCallback(function (event) {
         if (!clearButtonVisible)
             return;
@@ -125,7 +150,7 @@ var BaseInput = React__default.default.forwardRef(function (_a, ref) {
                 _c[styles[SIZE_TO_CLASSNAME_MAP[size]]] = hasInnerLabel,
                 _c[styles.hasInnerLabel] = hasInnerLabel,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs__default.default([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
+                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onKeyDown: handleKeyDown, onAnimationStart: handleAnimationStart, ref: mergeRefs__default.default([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
 });
 
 exports.BaseInput = BaseInput;

package/input/cssm/components/base-input/Component.js

@@ -39,6 +39,7 @@ var inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
 var BaseInput = React__default.default.forwardRef(function (_a, ref) {
     var _b, _c;
     var _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, _f = _a.block, block = _f === void 0 ? false : _f, _g = _a.colors, colors = _g === void 0 ? 'default' : _g, bottomAddons = _a.bottomAddons, dataTestId = _a.dataTestId, _h = _a.clear, clear = _h === void 0 ? false : _h, disabled = _a.disabled, error = _a.error, success = _a.success, hint = _a.hint, className = _a.className, fieldClassName = _a.fieldClassName, inputClassName = _a.inputClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, rightAddonsProps = _a.rightAddonsProps, leftAddonsProps = _a.leftAddonsProps, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, _j = _a.labelView, labelView = _j === void 0 ? 'inner' : _j, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onClear = _a.onClear, onClick = _a.onClick, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onAnimationStart = _a.onAnimationStart, rightAddons = _a.rightAddons, value = _a.value, defaultValue = _a.defaultValue, wrapperRef = _a.wrapperRef, readOnlyProp = _a.readOnly, FormControlComponent = _a.FormControlComponent, disableUserInput = _a.disableUserInput, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "disableUserInput"]);
+    var onKeyDown = restProps.onKeyDown;
     var uncontrolled = value === undefined;
     var readOnly = readOnlyProp || disableUserInput;
     var inputRef = React.useRef(null);
@@ -76,13 +77,37 @@ var BaseInput = React__default.default.forwardRef(function (_a, ref) {
         }
     }, [onBlur]);
     var handleInputChange = React.useCallback(function (event) {
+        var inputValue = event.target.value;
+        var target = event.target;
+        var isInputTypeNumber = target.getAttribute('type') === 'number';
+        var pattern = /[eE]/g;
+        if (isInputTypeNumber && pattern.test(inputValue)) {
+            inputValue = inputValue.replace(pattern, '');
+        }
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: inputValue });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(inputValue);
         }
     }, [onChange, uncontrolled]);
+    var handleKeyDown = React.useCallback(function (event) {
+        /**
+         * По умолчанию в input[type=number] можно вводить числа типа 2e5 (200 000)
+         * Это ломает некоторое поведение, поэтому запрещаем ввод символов [eE]
+         * @see DS-6808
+         */
+        var key = event.key, target = event.target;
+        var eventTarget = target;
+        var isInputTypeNumber = eventTarget.getAttribute('type') === 'number';
+        if (isInputTypeNumber && (key === 'e' || key === 'E')) {
+            event.preventDefault();
+            return;
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
     var handleClear = React.useCallback(function (event) {
         if (!clearButtonVisible)
             return;
@@ -122,7 +147,7 @@ var BaseInput = React__default.default.forwardRef(function (_a, ref) {
                 _c[styles__default.default[SIZE_TO_CLASSNAME_MAP[size]]] = hasInnerLabel,
                 _c[styles__default.default.hasInnerLabel] = hasInnerLabel,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs__default.default([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
+                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onKeyDown: handleKeyDown, onAnimationStart: handleAnimationStart, ref: mergeRefs__default.default([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
 });
 
 exports.BaseInput = BaseInput;

package/input/esm/components/base-input/Component.js

@@ -36,6 +36,7 @@ var inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
 var BaseInput = React.forwardRef(function (_a, ref) {
     var _b, _c;
     var _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, _f = _a.block, block = _f === void 0 ? false : _f, _g = _a.colors, colors = _g === void 0 ? 'default' : _g, bottomAddons = _a.bottomAddons, dataTestId = _a.dataTestId, _h = _a.clear, clear = _h === void 0 ? false : _h, disabled = _a.disabled, error = _a.error, success = _a.success, hint = _a.hint, className = _a.className, fieldClassName = _a.fieldClassName, inputClassName = _a.inputClassName, labelClassName = _a.labelClassName, addonsClassName = _a.addonsClassName, rightAddonsProps = _a.rightAddonsProps, leftAddonsProps = _a.leftAddonsProps, focusedClassName = _a.focusedClassName, filledClassName = _a.filledClassName, label = _a.label, _j = _a.labelView, labelView = _j === void 0 ? 'inner' : _j, leftAddons = _a.leftAddons, onFocus = _a.onFocus, onBlur = _a.onBlur, onChange = _a.onChange, onClear = _a.onClear, onClick = _a.onClick, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onAnimationStart = _a.onAnimationStart, rightAddons = _a.rightAddons, value = _a.value, defaultValue = _a.defaultValue, wrapperRef = _a.wrapperRef, readOnlyProp = _a.readOnly, FormControlComponent = _a.FormControlComponent, disableUserInput = _a.disableUserInput, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "disableUserInput"]);
+    var onKeyDown = restProps.onKeyDown;
     var uncontrolled = value === undefined;
     var readOnly = readOnlyProp || disableUserInput;
     var inputRef = useRef(null);
@@ -73,13 +74,37 @@ var BaseInput = React.forwardRef(function (_a, ref) {
         }
     }, [onBlur]);
     var handleInputChange = useCallback(function (event) {
+        var inputValue = event.target.value;
+        var target = event.target;
+        var isInputTypeNumber = target.getAttribute('type') === 'number';
+        var pattern = /[eE]/g;
+        if (isInputTypeNumber && pattern.test(inputValue)) {
+            inputValue = inputValue.replace(pattern, '');
+        }
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: inputValue });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(inputValue);
         }
     }, [onChange, uncontrolled]);
+    var handleKeyDown = useCallback(function (event) {
+        /**
+         * По умолчанию в input[type=number] можно вводить числа типа 2e5 (200 000)
+         * Это ломает некоторое поведение, поэтому запрещаем ввод символов [eE]
+         * @see DS-6808
+         */
+        var key = event.key, target = event.target;
+        var eventTarget = target;
+        var isInputTypeNumber = eventTarget.getAttribute('type') === 'number';
+        if (isInputTypeNumber && (key === 'e' || key === 'E')) {
+            event.preventDefault();
+            return;
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
     var handleClear = useCallback(function (event) {
         if (!clearButtonVisible)
             return;
@@ -119,7 +144,7 @@ var BaseInput = React.forwardRef(function (_a, ref) {
                 _c[styles[SIZE_TO_CLASSNAME_MAP[size]]] = hasInnerLabel,
                 _c[styles.hasInnerLabel] = hasInnerLabel,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
+                _c), inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onKeyDown: handleKeyDown, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined })))) : null;
 });
 
 export { BaseInput };

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

@@ -33,6 +33,7 @@ const SIZE_TO_CLASSNAME_MAP = {
 };
 const inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
 const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, colors = 'default', bottomAddons, dataTestId, clear = false, disabled, error, success, hint, className, fieldClassName, inputClassName, labelClassName, addonsClassName, rightAddonsProps, leftAddonsProps, focusedClassName, filledClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onClear, onClick, onMouseDown, onMouseUp, onAnimationStart, rightAddons, value, defaultValue, wrapperRef, readOnly: readOnlyProp, FormControlComponent, disableUserInput, ...restProps }, ref) => {
+    const { onKeyDown } = restProps;
     const uncontrolled = value === undefined;
     const readOnly = readOnlyProp || disableUserInput;
     const inputRef = useRef(null);
@@ -70,13 +71,37 @@ const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, c
         }
     }, [onBlur]);
     const handleInputChange = useCallback((event) => {
+        let inputValue = event.target.value;
+        const target = event.target;
+        const isInputTypeNumber = target.getAttribute('type') === 'number';
+        const pattern = /[eE]/g;
+        if (isInputTypeNumber && pattern.test(inputValue)) {
+            inputValue = inputValue.replace(pattern, '');
+        }
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: inputValue });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(inputValue);
         }
     }, [onChange, uncontrolled]);
+    const handleKeyDown = useCallback((event) => {
+        /**
+         * По умолчанию в input[type=number] можно вводить числа типа 2e5 (200 000)
+         * Это ломает некоторое поведение, поэтому запрещаем ввод символов [eE]
+         * @see DS-6808
+         */
+        const { key, target } = event;
+        const eventTarget = target;
+        const isInputTypeNumber = eventTarget.getAttribute('type') === 'number';
+        if (isInputTypeNumber && (key === 'e' || key === 'E')) {
+            event.preventDefault();
+            return;
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
     const handleClear = useCallback((event) => {
         if (!clearButtonVisible)
             return;
@@ -116,7 +141,7 @@ const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, c
                 [styles[SIZE_TO_CLASSNAME_MAP[size]]]: hasInnerLabel,
                 [styles.hasInnerLabel]: hasInnerLabel,
                 [colorCommonStyles[colors].hasInnerLabel]: hasInnerLabel,
-            }, inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined }))) : null;
+            }, inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onKeyDown: handleKeyDown, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined }))) : null;
 });
 
 export { BaseInput };

package/input/moderncssm/components/base-input/Component.js

@@ -30,6 +30,7 @@ const SIZE_TO_CLASSNAME_MAP = {
 };
 const inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
 const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, colors = 'default', bottomAddons, dataTestId, clear = false, disabled, error, success, hint, className, fieldClassName, inputClassName, labelClassName, addonsClassName, rightAddonsProps, leftAddonsProps, focusedClassName, filledClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onClear, onClick, onMouseDown, onMouseUp, onAnimationStart, rightAddons, value, defaultValue, wrapperRef, readOnly: readOnlyProp, FormControlComponent, disableUserInput, ...restProps }, ref) => {
+    const { onKeyDown } = restProps;
     const uncontrolled = value === undefined;
     const readOnly = readOnlyProp || disableUserInput;
     const inputRef = useRef(null);
@@ -67,13 +68,37 @@ const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, c
         }
     }, [onBlur]);
     const handleInputChange = useCallback((event) => {
+        let inputValue = event.target.value;
+        const target = event.target;
+        const isInputTypeNumber = target.getAttribute('type') === 'number';
+        const pattern = /[eE]/g;
+        if (isInputTypeNumber && pattern.test(inputValue)) {
+            inputValue = inputValue.replace(pattern, '');
+        }
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: inputValue });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(inputValue);
         }
     }, [onChange, uncontrolled]);
+    const handleKeyDown = useCallback((event) => {
+        /**
+         * По умолчанию в input[type=number] можно вводить числа типа 2e5 (200 000)
+         * Это ломает некоторое поведение, поэтому запрещаем ввод символов [eE]
+         * @see DS-6808
+         */
+        const { key, target } = event;
+        const eventTarget = target;
+        const isInputTypeNumber = eventTarget.getAttribute('type') === 'number';
+        if (isInputTypeNumber && (key === 'e' || key === 'E')) {
+            event.preventDefault();
+            return;
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
     const handleClear = useCallback((event) => {
         if (!clearButtonVisible)
             return;
@@ -113,7 +138,7 @@ const BaseInput = React.forwardRef(({ size = 48, type = 'text', block = false, c
                 [styles[SIZE_TO_CLASSNAME_MAP[size]]]: hasInnerLabel,
                 [styles.hasInnerLabel]: hasInnerLabel,
                 [colorCommonStyles[colors].hasInnerLabel]: hasInnerLabel,
-            }, inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined }))) : null;
+            }, inputClassName), disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, onChange: handleInputChange, onKeyDown: handleKeyDown, onAnimationStart: handleAnimationStart, ref: mergeRefs([ref, inputRef]), type: type, value: uncontrolled ? stateValue : value, readOnly: readOnly, "data-test-id": dataTestId, "aria-label": typeof label === 'string' ? label : undefined }))) : null;
 });
 
 export { BaseInput };