@alfalab/core-components-input - npm Package Compare versions

Comparing version 12.0.2 to 12.1.0

Component.desktop.js

@@ -13,2 +13,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -23,6 +24,6 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 
-var defaultColors = {"error":"input__error_1gs2t"};
+var defaultColors = {"error":"input__error_1yr3d"};
 require('./default.desktop.css')
 
-var invertedColors = {"error":"input__error_1n3x9"};
+var invertedColors = {"error":"input__error_1tzz3"};
 require('./inverted.desktop.css')
@@ -29,0 +30,0 @@

Component.mobile.js

@@ -13,2 +13,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -23,6 +24,6 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 
-var defaultColors = {"error":"input__error_14roc"};
+var defaultColors = {"error":"input__error_125e3"};
 require('./default.mobile.css')
 
-var invertedColors = {"error":"input__error_nmz2r"};
+var invertedColors = {"error":"input__error_zqach"};
 require('./inverted.mobile.css')
@@ -29,0 +30,0 @@

Component.responsive.js

@@ -16,2 +16,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -18,0 +19,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

components/base-input/Component.d.ts

@@ -139,2 +139,6 @@ /// <reference types="react" />
     colorStyles?: StyleColors;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
 };
@@ -268,3 +272,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
     colorStyles?: StyleColors | undefined;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { StyleColors, BaseInputProps, BaseInput };

components/base-input/Component.js

@@ -11,2 +11,3 @@ 'use strict';
 var coreComponentsButton = require('@alfalab/core-components-button');
+var coreComponentsShared = require('@alfalab/core-components-shared');
 var hooks = require('@alfalab/hooks');
@@ -23,9 +24,9 @@ var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 
-var defaultColors = {"input":"input__input_1053s","hasInnerLabel":"input__hasInnerLabel_1053s","clearIcon":"input__clearIcon_1053s"};
+var defaultColors = {"input":"input__input_1fvbv","hasInnerLabel":"input__hasInnerLabel_1fvbv","clearIcon":"input__clearIcon_1fvbv"};
 require('./default.css')
 
-var styles = {"input":"input__input_1uzmv","hasInnerLabel":"input__hasInnerLabel_1uzmv","s":"input__s_1uzmv","m":"input__m_1uzmv","l":"input__l_1uzmv","xl":"input__xl_1uzmv","block":"input__block_1uzmv","clearIcon":"input__clearIcon_1uzmv","errorIcon":"input__errorIcon_1uzmv","errorColorIcon":"input__errorColorIcon_1uzmv","clearButton":"input__clearButton_1uzmv","successIcon":"input__successIcon_1uzmv","successColorIcon":"input__successColorIcon_1uzmv","focusVisible":"input__focusVisible_1uzmv","onautofillstart":"input__onautofillstart_1uzmv","onautofillcancel":"input__onautofillcancel_1uzmv"};
+var styles = {"input":"input__input_uo405","hasInnerLabel":"input__hasInnerLabel_uo405","s":"input__s_uo405","m":"input__m_uo405","l":"input__l_uo405","xl":"input__xl_uo405","block":"input__block_uo405","clearIcon":"input__clearIcon_uo405","errorIcon":"input__errorIcon_uo405","errorColorIcon":"input__errorColorIcon_uo405","clearButton":"input__clearButton_uo405","successIcon":"input__successIcon_uo405","successColorIcon":"input__successColorIcon_uo405","focusVisible":"input__focusVisible_uo405","onautofillstart":"input__onautofillstart_uo405","onautofillcancel":"input__onautofillcancel_uo405"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_r6bsa","hasInnerLabel":"input__hasInnerLabel_r6bsa","clearIcon":"input__clearIcon_r6bsa"};
+var invertedColors = {"input":"input__input_16wjv","hasInnerLabel":"input__hasInnerLabel_16wjv","clearIcon":"input__clearIcon_16wjv"};
 require('./inverted.css')
@@ -39,3 +40,3 @@
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 's' : _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, 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, readOnly = _a.readOnly, FormControlComponent = _a.FormControlComponent, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles"]);
+    var _d = _a.size, size = _d === void 0 ? 's' : _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, 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, readOnly = _a.readOnly, FormControlComponent = _a.FormControlComponent, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, onKeyDown = _a.onKeyDown, disableUserInput = _a.disableUserInput, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles", "onKeyDown", "disableUserInput"]);
     var uncontrolled = value === undefined;
@@ -92,2 +93,6 @@ var inputRef = React.useRef(null);
     }, [onAnimationStart]);
+    var handleKeyDown = function (e) {
+        coreComponentsShared.inputUtils.disableUserInput(disableUserInput, e);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
     var renderRightAddons = function () {
@@ -113,5 +118,5 @@ var addonsVisible = clearButtonVisible || rightAddons || error || success;
                 _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;

components/base-input/index.js

@@ -12,2 +12,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -14,0 +15,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/Component.desktop.js

@@ -15,2 +15,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -17,0 +18,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/Component.mobile.js

@@ -15,2 +15,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -17,0 +18,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/Component.responsive.js

@@ -16,2 +16,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -18,0 +19,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/components/base-input/Component.d.ts

@@ -139,2 +139,6 @@ /// <reference types="react" />
     colorStyles?: StyleColors;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
 };
@@ -268,3 +272,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
     colorStyles?: StyleColors | undefined;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { StyleColors, BaseInputProps, BaseInput };

cssm/components/base-input/Component.js

@@ -11,2 +11,3 @@ 'use strict';
 var coreComponentsButton = require('@alfalab/core-components-button/cssm');
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var hooks = require('@alfalab/hooks');
@@ -35,3 +36,3 @@ var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 's' : _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, 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, readOnly = _a.readOnly, FormControlComponent = _a.FormControlComponent, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles"]);
+    var _d = _a.size, size = _d === void 0 ? 's' : _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, 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, readOnly = _a.readOnly, FormControlComponent = _a.FormControlComponent, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, onKeyDown = _a.onKeyDown, disableUserInput = _a.disableUserInput, restProps = tslib.__rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles", "onKeyDown", "disableUserInput"]);
     var uncontrolled = value === undefined;
@@ -88,2 +89,6 @@ var inputRef = React.useRef(null);
     }, [onAnimationStart]);
+    var handleKeyDown = function (e) {
+        coreComponentsShared.inputUtils.disableUserInput(disableUserInput, e);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
     var renderRightAddons = function () {
@@ -109,5 +114,5 @@ var addonsVisible = clearButtonVisible || rightAddons || error || success;
                 _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;

cssm/components/base-input/index.js

@@ -12,2 +12,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -14,0 +15,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/desktop.js

@@ -14,2 +14,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -16,0 +17,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/index.js

@@ -16,2 +16,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -18,0 +19,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

cssm/mobile.js

@@ -14,2 +14,3 @@ 'use strict';
 require('@alfalab/core-components-button/cssm');
+require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
@@ -16,0 +17,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

desktop.js

@@ -14,2 +14,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -16,0 +17,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

esm/Component.desktop.js

@@ -9,2 +9,3 @@ import { __assign } from 'tslib';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -15,6 +16,6 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-var defaultColors = {"error":"input__error_1gs2t"};
+var defaultColors = {"error":"input__error_1yr3d"};
 require('./default.desktop.css')
 
-var invertedColors = {"error":"input__error_1n3x9"};
+var invertedColors = {"error":"input__error_1tzz3"};
 require('./inverted.desktop.css')
@@ -21,0 +22,0 @@

esm/Component.mobile.js

@@ -9,2 +9,3 @@ import { __assign } from 'tslib';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -15,6 +16,6 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-var defaultColors = {"error":"input__error_14roc"};
+var defaultColors = {"error":"input__error_125e3"};
 require('./default.mobile.css')
 
-var invertedColors = {"error":"input__error_nmz2r"};
+var invertedColors = {"error":"input__error_zqach"};
 require('./inverted.mobile.css')
@@ -21,0 +22,0 @@

esm/Component.responsive.js

@@ -12,2 +12,3 @@ import { __rest, __assign } from 'tslib';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -14,0 +15,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

esm/components/base-input/Component.d.ts

@@ -139,2 +139,6 @@ /// <reference types="react" />
     colorStyles?: StyleColors;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
 };
@@ -268,3 +272,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
     colorStyles?: StyleColors | undefined;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { StyleColors, BaseInputProps, BaseInput };

esm/components/base-input/Component.js

@@ -7,2 +7,3 @@ import { __rest, __assign } from 'tslib';
 import { Button } from '@alfalab/core-components-button/esm';
+import { inputUtils } from '@alfalab/core-components-shared/esm';
 import { useFocus } from '@alfalab/hooks';
@@ -13,9 +14,9 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-var defaultColors = {"input":"input__input_1053s","hasInnerLabel":"input__hasInnerLabel_1053s","clearIcon":"input__clearIcon_1053s"};
+var defaultColors = {"input":"input__input_1fvbv","hasInnerLabel":"input__hasInnerLabel_1fvbv","clearIcon":"input__clearIcon_1fvbv"};
 require('./default.css')
 
-var styles = {"input":"input__input_1uzmv","hasInnerLabel":"input__hasInnerLabel_1uzmv","s":"input__s_1uzmv","m":"input__m_1uzmv","l":"input__l_1uzmv","xl":"input__xl_1uzmv","block":"input__block_1uzmv","clearIcon":"input__clearIcon_1uzmv","errorIcon":"input__errorIcon_1uzmv","errorColorIcon":"input__errorColorIcon_1uzmv","clearButton":"input__clearButton_1uzmv","successIcon":"input__successIcon_1uzmv","successColorIcon":"input__successColorIcon_1uzmv","focusVisible":"input__focusVisible_1uzmv","onautofillstart":"input__onautofillstart_1uzmv","onautofillcancel":"input__onautofillcancel_1uzmv"};
+var styles = {"input":"input__input_uo405","hasInnerLabel":"input__hasInnerLabel_uo405","s":"input__s_uo405","m":"input__m_uo405","l":"input__l_uo405","xl":"input__xl_uo405","block":"input__block_uo405","clearIcon":"input__clearIcon_uo405","errorIcon":"input__errorIcon_uo405","errorColorIcon":"input__errorColorIcon_uo405","clearButton":"input__clearButton_uo405","successIcon":"input__successIcon_uo405","successColorIcon":"input__successColorIcon_uo405","focusVisible":"input__focusVisible_uo405","onautofillstart":"input__onautofillstart_uo405","onautofillcancel":"input__onautofillcancel_uo405"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_r6bsa","hasInnerLabel":"input__hasInnerLabel_r6bsa","clearIcon":"input__clearIcon_r6bsa"};
+var invertedColors = {"input":"input__input_16wjv","hasInnerLabel":"input__hasInnerLabel_16wjv","clearIcon":"input__clearIcon_16wjv"};
 require('./inverted.css')
@@ -29,3 +30,3 @@
     var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 's' : _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, 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, readOnly = _a.readOnly, FormControlComponent = _a.FormControlComponent, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles"]);
+    var _d = _a.size, size = _d === void 0 ? 's' : _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, 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, readOnly = _a.readOnly, FormControlComponent = _a.FormControlComponent, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, onKeyDown = _a.onKeyDown, disableUserInput = _a.disableUserInput, restProps = __rest(_a, ["size", "type", "block", "colors", "bottomAddons", "dataTestId", "clear", "disabled", "error", "success", "hint", "className", "fieldClassName", "inputClassName", "labelClassName", "addonsClassName", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles", "onKeyDown", "disableUserInput"]);
     var uncontrolled = value === undefined;
@@ -82,2 +83,6 @@ var inputRef = useRef(null);
     }, [onAnimationStart]);
+    var handleKeyDown = function (e) {
+        inputUtils.disableUserInput(disableUserInput, e);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
     var renderRightAddons = function () {
@@ -103,5 +108,5 @@ var addonsVisible = clearButtonVisible || rightAddons || error || success;
                 _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 };

esm/components/base-input/index.js

@@ -8,2 +8,3 @@ export { BaseInput } from './Component.js';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -10,0 +11,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

esm/desktop.js

@@ -10,2 +10,3 @@ export { InputDesktop } from './Component.desktop.js';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -12,0 +13,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

esm/index.js

@@ -12,2 +12,3 @@ export { Input } from './Component.responsive.js';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -14,0 +15,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

esm/mobile.js

@@ -10,2 +10,3 @@ export { InputMobile } from './Component.mobile.js';
 import '@alfalab/core-components-button/esm';
+import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
@@ -12,0 +13,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

index.js

@@ -16,2 +16,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -18,0 +19,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

mobile.js

@@ -14,2 +14,3 @@ 'use strict';
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
@@ -16,0 +17,0 @@ require('@alfalab/icons-glyph/CheckmarkCircleMIcon');

modern/Component.desktop.js

@@ -8,2 +8,3 @@ import React, { forwardRef } from 'react';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -14,6 +15,6 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-const defaultColors = {"error":"input__error_1gs2t"};
+const defaultColors = {"error":"input__error_1yr3d"};
 require('./default.desktop.css')
 
-const invertedColors = {"error":"input__error_1n3x9"};
+const invertedColors = {"error":"input__error_1tzz3"};
 require('./inverted.desktop.css')
@@ -20,0 +21,0 @@

modern/Component.mobile.js

@@ -8,2 +8,3 @@ import React, { forwardRef } from 'react';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -14,6 +15,6 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-const defaultColors = {"error":"input__error_14roc"};
+const defaultColors = {"error":"input__error_125e3"};
 require('./default.mobile.css')
 
-const invertedColors = {"error":"input__error_nmz2r"};
+const invertedColors = {"error":"input__error_zqach"};
 require('./inverted.mobile.css')
@@ -20,0 +21,0 @@

modern/Component.responsive.js

@@ -11,2 +11,3 @@ import React, { forwardRef } from 'react';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -13,0 +14,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

modern/components/base-input/Component.d.ts

@@ -139,2 +139,6 @@ /// <reference types="react" />
     colorStyles?: StyleColors;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
 };
@@ -268,3 +272,7 @@ declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
     colorStyles?: StyleColors | undefined;
+    /**
+     * Запрещает ввод с клавиатуры
+     */
+    disableUserInput?: boolean | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { StyleColors, BaseInputProps, BaseInput };

modern/components/base-input/Component.js

@@ -6,2 +6,3 @@ import React, { useRef, useState, useCallback, Fragment } from 'react';
 import { Button } from '@alfalab/core-components-button/modern';
+import { inputUtils } from '@alfalab/core-components-shared/modern';
 import { useFocus } from '@alfalab/hooks';
@@ -12,9 +13,9 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-const defaultColors = {"input":"input__input_1053s","hasInnerLabel":"input__hasInnerLabel_1053s","clearIcon":"input__clearIcon_1053s"};
+const defaultColors = {"input":"input__input_1fvbv","hasInnerLabel":"input__hasInnerLabel_1fvbv","clearIcon":"input__clearIcon_1fvbv"};
 require('./default.css')
 
-const styles = {"input":"input__input_1uzmv","hasInnerLabel":"input__hasInnerLabel_1uzmv","s":"input__s_1uzmv","m":"input__m_1uzmv","l":"input__l_1uzmv","xl":"input__xl_1uzmv","block":"input__block_1uzmv","clearIcon":"input__clearIcon_1uzmv","errorIcon":"input__errorIcon_1uzmv","errorColorIcon":"input__errorColorIcon_1uzmv","clearButton":"input__clearButton_1uzmv","successIcon":"input__successIcon_1uzmv","successColorIcon":"input__successColorIcon_1uzmv","focusVisible":"input__focusVisible_1uzmv","onautofillstart":"input__onautofillstart_1uzmv","onautofillcancel":"input__onautofillcancel_1uzmv"};
+const styles = {"input":"input__input_uo405","hasInnerLabel":"input__hasInnerLabel_uo405","s":"input__s_uo405","m":"input__m_uo405","l":"input__l_uo405","xl":"input__xl_uo405","block":"input__block_uo405","clearIcon":"input__clearIcon_uo405","errorIcon":"input__errorIcon_uo405","errorColorIcon":"input__errorColorIcon_uo405","clearButton":"input__clearButton_uo405","successIcon":"input__successIcon_uo405","successColorIcon":"input__successColorIcon_uo405","focusVisible":"input__focusVisible_uo405","onautofillstart":"input__onautofillstart_uo405","onautofillcancel":"input__onautofillcancel_uo405"};
 require('./index.css')
 
-const invertedColors = {"input":"input__input_r6bsa","hasInnerLabel":"input__hasInnerLabel_r6bsa","clearIcon":"input__clearIcon_r6bsa"};
+const invertedColors = {"input":"input__input_16wjv","hasInnerLabel":"input__hasInnerLabel_16wjv","clearIcon":"input__clearIcon_16wjv"};
 require('./inverted.css')
@@ -26,3 +27,3 @@
 };
-const BaseInput = React.forwardRef(({ size = 's', type = 'text', block = false, colors = 'default', bottomAddons, dataTestId, clear = false, disabled, error, success, hint, className, fieldClassName, inputClassName, labelClassName, addonsClassName, focusedClassName, filledClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onClear, onClick, onMouseDown, onMouseUp, onAnimationStart, rightAddons, value, defaultValue, wrapperRef, readOnly, FormControlComponent, colorStyles = { default: {}, inverted: {} }, ...restProps }, ref) => {
+const BaseInput = React.forwardRef(({ size = 's', type = 'text', block = false, colors = 'default', bottomAddons, dataTestId, clear = false, disabled, error, success, hint, className, fieldClassName, inputClassName, labelClassName, addonsClassName, focusedClassName, filledClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onClear, onClick, onMouseDown, onMouseUp, onAnimationStart, rightAddons, value, defaultValue, wrapperRef, readOnly, FormControlComponent, colorStyles = { default: {}, inverted: {} }, onKeyDown, disableUserInput, ...restProps }, ref) => {
     const uncontrolled = value === undefined;
@@ -79,2 +80,6 @@ const inputRef = useRef(null);
     }, [onAnimationStart]);
+    const handleKeyDown = (e) => {
+        inputUtils.disableUserInput(disableUserInput, e);
+        onKeyDown?.(e);
+    };
     const renderRightAddons = () => {
@@ -100,5 +105,5 @@ const addonsVisible = clearButtonVisible || rightAddons || error || success;
                 [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 };

modern/components/base-input/index.js

@@ -7,2 +7,3 @@ export { BaseInput } from './Component.js';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -9,0 +10,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

modern/desktop.js

@@ -9,2 +9,3 @@ export { InputDesktop } from './Component.desktop.js';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -11,0 +12,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

modern/index.js

@@ -11,2 +11,3 @@ export { Input } from './Component.responsive.js';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -13,0 +14,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

modern/mobile.js

@@ -9,2 +9,3 @@ export { InputMobile } from './Component.mobile.js';
 import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
@@ -11,0 +12,0 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';

package.json

 {
     "name": "@alfalab/core-components-input",
-    "version": "12.0.2",
+    "version": "12.1.0",
     "description": "",
@@ -37,6 +37,7 @@ "keywords": [],
     "dependencies": {
-        "@alfalab/core-components-button": "^9.0.2",
+        "@alfalab/core-components-button": "^9.0.3",
         "@alfalab/core-components-form-control": "^10.0.0",
         "@alfalab/core-components-badge": "^5.2.0",
         "@alfalab/core-components-mq": "^4.2.0",
+        "@alfalab/core-components-shared": "^0.3.0",
         "@alfalab/hooks": "^1.13.0",
@@ -43,0 +44,0 @@ "@alfalab/icons-glyph": "^2.108.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

229678

increased by1.89%

Lines of code

5261

increased by1.92%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Added@alfalab/core-components-shared@^0.3.0

• + Added@alfalab/core-components-shared@0.3.0(transitive)

• Updated@alfalab/core-components-button@^9.0.3