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

Comparing version 12.2.0 to 12.2.1

Component.desktop.js

@@ -23,6 +23,6 @@ 'use strict';
 
-var defaultColors = {"error":"input__error_1mgwp"};
+var defaultColors = {"error":"input__error_r1nbe"};
 require('./default.desktop.css')
 
-var invertedColors = {"error":"input__error_1n58r"};
+var invertedColors = {"error":"input__error_1ec9a"};
 require('./inverted.desktop.css')
@@ -29,0 +29,0 @@

Component.mobile.js

@@ -23,6 +23,6 @@ 'use strict';
 
-var defaultColors = {"error":"input__error_5kqoo"};
+var defaultColors = {"error":"input__error_jmez5"};
 require('./default.mobile.css')
 
-var invertedColors = {"error":"input__error_d85wh"};
+var invertedColors = {"error":"input__error_tejl7"};
 require('./inverted.mobile.css')
@@ -29,0 +29,0 @@

components/base-input/Component.js

@@ -23,9 +23,9 @@ 'use strict';
 
-var defaultColors = {"input":"input__input_1tfbb","hasInnerLabel":"input__hasInnerLabel_1tfbb","clearIcon":"input__clearIcon_1tfbb"};
+var defaultColors = {"input":"input__input_la9js","hasInnerLabel":"input__hasInnerLabel_la9js","clearIcon":"input__clearIcon_la9js","disableUserInput":"input__disableUserInput_la9js"};
 require('./default.css')
 
-var styles = {"input":"input__input_j6py4","hasInnerLabel":"input__hasInnerLabel_j6py4","s":"input__s_j6py4","m":"input__m_j6py4","l":"input__l_j6py4","xl":"input__xl_j6py4","block":"input__block_j6py4","clearIcon":"input__clearIcon_j6py4","errorIcon":"input__errorIcon_j6py4","errorColorIcon":"input__errorColorIcon_j6py4","clearButton":"input__clearButton_j6py4","successIcon":"input__successIcon_j6py4","successColorIcon":"input__successColorIcon_j6py4","focusVisible":"input__focusVisible_j6py4","onautofillstart":"input__onautofillstart_j6py4","onautofillcancel":"input__onautofillcancel_j6py4"};
+var styles = {"input":"input__input_rzpfh","hasInnerLabel":"input__hasInnerLabel_rzpfh","s":"input__s_rzpfh","m":"input__m_rzpfh","l":"input__l_rzpfh","xl":"input__xl_rzpfh","block":"input__block_rzpfh","clearIcon":"input__clearIcon_rzpfh","errorIcon":"input__errorIcon_rzpfh","errorColorIcon":"input__errorColorIcon_rzpfh","clearButton":"input__clearButton_rzpfh","successIcon":"input__successIcon_rzpfh","successColorIcon":"input__successColorIcon_rzpfh","focusVisible":"input__focusVisible_rzpfh","onautofillstart":"input__onautofillstart_rzpfh","onautofillcancel":"input__onautofillcancel_rzpfh"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_1u44r","hasInnerLabel":"input__hasInnerLabel_1u44r","clearIcon":"input__clearIcon_1u44r"};
+var invertedColors = {"input":"input__input_ejuxo","hasInnerLabel":"input__hasInnerLabel_ejuxo","clearIcon":"input__clearIcon_ejuxo","disableUserInput":"input__disableUserInput_ejuxo"};
 require('./inverted.css')
@@ -40,4 +40,5 @@
     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, 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, 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", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles", "onKeyDown", "disableUserInput"]);
+    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, 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, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, 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", "colorStyles", "disableUserInput"]);
     var uncontrolled = value === undefined;
+    var readOnly = readOnlyProp || disableUserInput;
     var inputRef = React.useRef(null);
@@ -93,6 +94,2 @@ var focusVisible = hooks.useFocus(inputRef, 'keyboard')[0];
     }, [onAnimationStart]);
-    var handleKeyDown = function (e) {
-        coreComponentsShared.inputUtils.disableUserInput(disableUserInput, e);
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    };
     var renderRightAddons = function () {
@@ -111,4 +108,5 @@ var addonsVisible = clearButtonVisible || rightAddons || error || success;
             _b[styles.focusVisible] = focusVisible,
-            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnly, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
+            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnlyProp, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
         React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles.input, colorCommonStyles[colors].input, colorStyles[colors].input, (_c = {},
+                _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
                 _c[styles.error] = error,
@@ -119,5 +117,5 @@ _c[colorStyles[colors].error] = error,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _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;
+                _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;
 });
 
 exports.BaseInput = BaseInput;

cssm/components/base-input/Component.js

@@ -36,4 +36,5 @@ 'use strict';
     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, 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, 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", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles", "onKeyDown", "disableUserInput"]);
+    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, 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, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, 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", "colorStyles", "disableUserInput"]);
     var uncontrolled = value === undefined;
+    var readOnly = readOnlyProp || disableUserInput;
     var inputRef = React.useRef(null);
@@ -89,6 +90,2 @@ var focusVisible = hooks.useFocus(inputRef, 'keyboard')[0];
     }, [onAnimationStart]);
-    var handleKeyDown = function (e) {
-        coreComponentsShared.inputUtils.disableUserInput(disableUserInput, e);
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    };
     var renderRightAddons = function () {
@@ -107,4 +104,5 @@ var addonsVisible = clearButtonVisible || rightAddons || error || success;
             _b[styles__default.default.focusVisible] = focusVisible,
-            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnly, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
+            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnlyProp, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
         React__default.default.createElement("input", tslib.__assign({}, restProps, { className: cn__default.default(styles__default.default.input, colorCommonStyles[colors].input, colorStyles[colors].input, (_c = {},
+                _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
                 _c[styles__default.default.error] = error,
@@ -115,5 +113,5 @@ _c[colorStyles[colors].error] = error,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _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;
+                _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;
 });
 
 exports.BaseInput = BaseInput;

esm/Component.desktop.js

@@ -15,6 +15,6 @@ import { __assign } from 'tslib';
 
-var defaultColors = {"error":"input__error_1mgwp"};
+var defaultColors = {"error":"input__error_r1nbe"};
 require('./default.desktop.css')
 
-var invertedColors = {"error":"input__error_1n58r"};
+var invertedColors = {"error":"input__error_1ec9a"};
 require('./inverted.desktop.css')
@@ -21,0 +21,0 @@

esm/Component.mobile.js

@@ -15,6 +15,6 @@ import { __assign } from 'tslib';
 
-var defaultColors = {"error":"input__error_5kqoo"};
+var defaultColors = {"error":"input__error_jmez5"};
 require('./default.mobile.css')
 
-var invertedColors = {"error":"input__error_d85wh"};
+var invertedColors = {"error":"input__error_tejl7"};
 require('./inverted.mobile.css')
@@ -21,0 +21,0 @@

esm/components/base-input/Component.js

@@ -7,3 +7,3 @@ import { __rest, __assign } from 'tslib';
 import { Button } from '@alfalab/core-components-button/esm';
-import { getDataTestId, inputUtils } from '@alfalab/core-components-shared/esm';
+import { getDataTestId } from '@alfalab/core-components-shared/esm';
 import { useFocus } from '@alfalab/hooks';
@@ -14,9 +14,9 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-var defaultColors = {"input":"input__input_1tfbb","hasInnerLabel":"input__hasInnerLabel_1tfbb","clearIcon":"input__clearIcon_1tfbb"};
+var defaultColors = {"input":"input__input_la9js","hasInnerLabel":"input__hasInnerLabel_la9js","clearIcon":"input__clearIcon_la9js","disableUserInput":"input__disableUserInput_la9js"};
 require('./default.css')
 
-var styles = {"input":"input__input_j6py4","hasInnerLabel":"input__hasInnerLabel_j6py4","s":"input__s_j6py4","m":"input__m_j6py4","l":"input__l_j6py4","xl":"input__xl_j6py4","block":"input__block_j6py4","clearIcon":"input__clearIcon_j6py4","errorIcon":"input__errorIcon_j6py4","errorColorIcon":"input__errorColorIcon_j6py4","clearButton":"input__clearButton_j6py4","successIcon":"input__successIcon_j6py4","successColorIcon":"input__successColorIcon_j6py4","focusVisible":"input__focusVisible_j6py4","onautofillstart":"input__onautofillstart_j6py4","onautofillcancel":"input__onautofillcancel_j6py4"};
+var styles = {"input":"input__input_rzpfh","hasInnerLabel":"input__hasInnerLabel_rzpfh","s":"input__s_rzpfh","m":"input__m_rzpfh","l":"input__l_rzpfh","xl":"input__xl_rzpfh","block":"input__block_rzpfh","clearIcon":"input__clearIcon_rzpfh","errorIcon":"input__errorIcon_rzpfh","errorColorIcon":"input__errorColorIcon_rzpfh","clearButton":"input__clearButton_rzpfh","successIcon":"input__successIcon_rzpfh","successColorIcon":"input__successColorIcon_rzpfh","focusVisible":"input__focusVisible_rzpfh","onautofillstart":"input__onautofillstart_rzpfh","onautofillcancel":"input__onautofillcancel_rzpfh"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_1u44r","hasInnerLabel":"input__hasInnerLabel_1u44r","clearIcon":"input__clearIcon_1u44r"};
+var invertedColors = {"input":"input__input_ejuxo","hasInnerLabel":"input__hasInnerLabel_ejuxo","clearIcon":"input__clearIcon_ejuxo","disableUserInput":"input__disableUserInput_ejuxo"};
 require('./inverted.css')
@@ -31,4 +31,5 @@
     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, 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, 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", "rightAddonsProps", "leftAddonsProps", "focusedClassName", "filledClassName", "label", "labelView", "leftAddons", "onFocus", "onBlur", "onChange", "onClear", "onClick", "onMouseDown", "onMouseUp", "onAnimationStart", "rightAddons", "value", "defaultValue", "wrapperRef", "readOnly", "FormControlComponent", "colorStyles", "onKeyDown", "disableUserInput"]);
+    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, 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, _k = _a.colorStyles, colorStyles = _k === void 0 ? { default: {}, inverted: {} } : _k, 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", "colorStyles", "disableUserInput"]);
     var uncontrolled = value === undefined;
+    var readOnly = readOnlyProp || disableUserInput;
     var inputRef = useRef(null);
@@ -84,6 +85,2 @@ var focusVisible = useFocus(inputRef, 'keyboard')[0];
     }, [onAnimationStart]);
-    var handleKeyDown = function (e) {
-        inputUtils.disableUserInput(disableUserInput, e);
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    };
     var renderRightAddons = function () {
@@ -102,4 +99,5 @@ var addonsVisible = clearButtonVisible || rightAddons || error || success;
             _b[styles.focusVisible] = focusVisible,
-            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnly, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
+            _b)), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnlyProp, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
         React.createElement("input", __assign({}, restProps, { className: cn(styles.input, colorCommonStyles[colors].input, colorStyles[colors].input, (_c = {},
+                _c[colorCommonStyles[colors].disableUserInput] = disableUserInput,
                 _c[styles.error] = error,
@@ -110,5 +108,5 @@ _c[colorStyles[colors].error] = error,
                 _c[colorCommonStyles[colors].hasInnerLabel] = hasInnerLabel,
-                _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;
+                _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;
 });
 
 export { BaseInput };

modern/Component.desktop.js

@@ -14,6 +14,6 @@ import React, { forwardRef } from 'react';
 
-const defaultColors = {"error":"input__error_1mgwp"};
+const defaultColors = {"error":"input__error_r1nbe"};
 require('./default.desktop.css')
 
-const invertedColors = {"error":"input__error_1n58r"};
+const invertedColors = {"error":"input__error_1ec9a"};
 require('./inverted.desktop.css')
@@ -20,0 +20,0 @@

modern/Component.mobile.js

@@ -14,6 +14,6 @@ import React, { forwardRef } from 'react';
 
-const defaultColors = {"error":"input__error_5kqoo"};
+const defaultColors = {"error":"input__error_jmez5"};
 require('./default.mobile.css')
 
-const invertedColors = {"error":"input__error_d85wh"};
+const invertedColors = {"error":"input__error_tejl7"};
 require('./inverted.mobile.css')
@@ -20,0 +20,0 @@

modern/components/base-input/Component.js

@@ -6,3 +6,3 @@ import React, { useRef, useState, useCallback, Fragment } from 'react';
 import { Button } from '@alfalab/core-components-button/modern';
-import { getDataTestId, inputUtils } from '@alfalab/core-components-shared/modern';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { useFocus } from '@alfalab/hooks';
@@ -13,9 +13,9 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 
-const defaultColors = {"input":"input__input_1tfbb","hasInnerLabel":"input__hasInnerLabel_1tfbb","clearIcon":"input__clearIcon_1tfbb"};
+const defaultColors = {"input":"input__input_la9js","hasInnerLabel":"input__hasInnerLabel_la9js","clearIcon":"input__clearIcon_la9js","disableUserInput":"input__disableUserInput_la9js"};
 require('./default.css')
 
-const styles = {"input":"input__input_j6py4","hasInnerLabel":"input__hasInnerLabel_j6py4","s":"input__s_j6py4","m":"input__m_j6py4","l":"input__l_j6py4","xl":"input__xl_j6py4","block":"input__block_j6py4","clearIcon":"input__clearIcon_j6py4","errorIcon":"input__errorIcon_j6py4","errorColorIcon":"input__errorColorIcon_j6py4","clearButton":"input__clearButton_j6py4","successIcon":"input__successIcon_j6py4","successColorIcon":"input__successColorIcon_j6py4","focusVisible":"input__focusVisible_j6py4","onautofillstart":"input__onautofillstart_j6py4","onautofillcancel":"input__onautofillcancel_j6py4"};
+const styles = {"input":"input__input_rzpfh","hasInnerLabel":"input__hasInnerLabel_rzpfh","s":"input__s_rzpfh","m":"input__m_rzpfh","l":"input__l_rzpfh","xl":"input__xl_rzpfh","block":"input__block_rzpfh","clearIcon":"input__clearIcon_rzpfh","errorIcon":"input__errorIcon_rzpfh","errorColorIcon":"input__errorColorIcon_rzpfh","clearButton":"input__clearButton_rzpfh","successIcon":"input__successIcon_rzpfh","successColorIcon":"input__successColorIcon_rzpfh","focusVisible":"input__focusVisible_rzpfh","onautofillstart":"input__onautofillstart_rzpfh","onautofillcancel":"input__onautofillcancel_rzpfh"};
 require('./index.css')
 
-const invertedColors = {"input":"input__input_1u44r","hasInnerLabel":"input__hasInnerLabel_1u44r","clearIcon":"input__clearIcon_1u44r"};
+const invertedColors = {"input":"input__input_ejuxo","hasInnerLabel":"input__hasInnerLabel_ejuxo","clearIcon":"input__clearIcon_ejuxo","disableUserInput":"input__disableUserInput_ejuxo"};
 require('./inverted.css')
@@ -28,4 +28,5 @@
 const preventDefault = (e) => e.preventDefault();
-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, rightAddonsProps, leftAddonsProps, 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 BaseInput = React.forwardRef(({ size = 's', 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, colorStyles = { default: {}, inverted: {} }, disableUserInput, ...restProps }, ref) => {
     const uncontrolled = value === undefined;
+    const readOnly = readOnlyProp || disableUserInput;
     const inputRef = useRef(null);
@@ -81,6 +82,2 @@ const [focusVisible] = useFocus(inputRef, 'keyboard');
     }, [onAnimationStart]);
-    const handleKeyDown = (e) => {
-        inputUtils.disableUserInput(disableUserInput, e);
-        onKeyDown?.(e);
-    };
     const renderRightAddons = () => {
@@ -99,4 +96,5 @@ const addonsVisible = clearButtonVisible || rightAddons || error || success;
             [styles.focusVisible]: focusVisible,
-        }), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnly, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
+        }), labelClassName: labelClassName, addonsClassName: addonsClassName, size: size, colors: colors, block: block, disabled: disabled, readOnly: readOnlyProp, filled: filled || autofilled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: renderRightAddons(), bottomAddons: bottomAddons, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, dataTestId: getDataTestId(dataTestId, 'form-control'), rightAddonsProps: rightAddonsProps, leftAddonsProps: leftAddonsProps },
         React.createElement("input", { ...restProps, className: cn(styles.input, colorCommonStyles[colors].input, colorStyles[colors].input, {
+                [colorCommonStyles[colors].disableUserInput]: disableUserInput,
                 [styles.error]: error,
@@ -107,5 +105,5 @@ [colorStyles[colors].error]: error,
                 [colorCommonStyles[colors].hasInnerLabel]: hasInnerLabel,
-            }, 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;
+            }, 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;
 });
 
 export { BaseInput };

package.json

 {
     "name": "@alfalab/core-components-input",
-    "version": "12.2.0",
+    "version": "12.2.1",
     "description": "",
@@ -37,7 +37,7 @@ "keywords": [],
     "dependencies": {
-        "@alfalab/core-components-button": "^9.0.5",
-        "@alfalab/core-components-form-control": "^10.1.0",
+        "@alfalab/core-components-button": "^9.0.6",
+        "@alfalab/core-components-form-control": "^10.1.1",
         "@alfalab/core-components-badge": "^5.2.0",
         "@alfalab/core-components-mq": "^4.2.0",
-        "@alfalab/core-components-shared": "^0.5.0",
+        "@alfalab/core-components-shared": "^0.6.0",
         "@alfalab/hooks": "^1.13.0",
@@ -44,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

237279

increased by0.17%

Worsened metrics

Lines of code

5393

decreased by-0.22%

Dependency changes

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

• - Removed@alfalab/core-components-shared@0.5.0(transitive)

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

• Updated@alfalab/core-components-form-control@^10.1.1

• Updated@alfalab/core-components-shared@^0.6.0