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

Comparing version 14.4.1 to 14.4.2

components/base-input/Component.d.ts

@@ -143,3 +143,3 @@ /// <reference types="react" />
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
@@ -146,0 +146,0 @@ * Значение поля ввода

components/base-input/Component.js

@@ -9,7 +9,5 @@ 'use strict';
 var cn = require('classnames');
-var coreComponentsBadge = require('@alfalab/core-components-badge');
 var coreComponentsShared = require('@alfalab/core-components-shared');
+var coreComponentsStatusBadge = require('@alfalab/core-components-status-badge');
 var hooks = require('@alfalab/hooks');
-var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var components_clearButton_Component = require('../clear-button/Component.js');
@@ -23,9 +21,9 @@
 
-var defaultColors = {"input":"input__input_1g27g","hasInnerLabel":"input__hasInnerLabel_1g27g","disableUserInput":"input__disableUserInput_1g27g","error":"input__error_1g27g"};
+var defaultColors = {"input":"input__input_eg1rv","hasInnerLabel":"input__hasInnerLabel_eg1rv","disableUserInput":"input__disableUserInput_eg1rv","error":"input__error_eg1rv"};
 require('./default.css')
 
-var styles = {"input":"input__input_18bus","hasInnerLabel":"input__hasInnerLabel_18bus","size-48":"input__size-48_18bus","size-56":"input__size-56_18bus","size-64":"input__size-64_18bus","size-72":"input__size-72_18bus","block":"input__block_18bus","errorIcon":"input__errorIcon_18bus","errorColorIcon":"input__errorColorIcon_18bus","successIcon":"input__successIcon_18bus","successColorIcon":"input__successColorIcon_18bus","focusVisible":"input__focusVisible_18bus","onautofillstart":"input__onautofillstart_18bus","onautofillcancel":"input__onautofillcancel_18bus"};
+var styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_1ixcf","hasInnerLabel":"input__hasInnerLabel_1ixcf","disableUserInput":"input__disableUserInput_1ixcf","error":"input__error_1ixcf"};
+var invertedColors = {"input":"input__input_39l17","hasInnerLabel":"input__hasInnerLabel_39l17","disableUserInput":"input__disableUserInput_39l17","error":"input__error_39l17"};
 require('./inverted.css')
@@ -105,8 +103,8 @@
         return (addonsVisible && (React__default.default.createElement(React.Fragment, null,
-            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors })),
+            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React__default.default.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, { className: styles.errorColorIcon }) }))),
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'negative-alert', size: 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'error-icon') }))),
             success && !error && (React__default.default.createElement("div", { className: styles.successIcon },
-                React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles.successColorIcon }) }))))));
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'success-icon') }))))));
     };
@@ -113,0 +111,0 @@ return FormControlComponent ? (React__default.default.createElement(FormControlComponent, { ref: wrapperRef, className: cn__default.default(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn__default.default(fieldClassName, (_b = {},

components/clear-button/Component.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

components/clear-button/Component.js

@@ -15,9 +15,9 @@ 'use strict';
 
-var defaultColors = {"clearIcon":"input__clearIcon_bqq6e"};
+var defaultColors = {"clearIcon":"input__clearIcon_v42u0"};
 require('./default.css')
 
-var styles = {"clearIcon":"input__clearIcon_ho0m9","clearButton":"input__clearButton_ho0m9"};
+var styles = {"clearIcon":"input__clearIcon_ydl5f","clearButton":"input__clearButton_ydl5f"};
 require('./index.css')
 
-var invertedColors = {"clearIcon":"input__clearIcon_17p7e"};
+var invertedColors = {"clearIcon":"input__clearIcon_1r2k2"};
 require('./inverted.css')
@@ -31,4 +31,4 @@
 var ClearButton = function (_a) {
-    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick;
-    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault },
+    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
         React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles.clearIcon, colorStyles[colors].clearIcon) })));
@@ -35,0 +35,0 @@ };

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

@@ -143,3 +143,3 @@ /// <reference types="react" />
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
@@ -146,0 +146,0 @@ * Значение поля ввода

cssm/components/base-input/Component.js

@@ -9,7 +9,5 @@ 'use strict';
 var cn = require('classnames');
-var coreComponentsBadge = require('@alfalab/core-components-badge/cssm');
 var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
+var coreComponentsStatusBadge = require('@alfalab/core-components-status-badge/cssm');
 var hooks = require('@alfalab/hooks');
-var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var components_clearButton_Component = require('../clear-button/Component.js');
@@ -101,8 +99,8 @@ var defaultColors = require('./default.module.css');
         return (addonsVisible && (React__default.default.createElement(React.Fragment, null,
-            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors })),
+            clearButtonVisible && (React__default.default.createElement(components_clearButton_Component.ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React__default.default.createElement("div", { className: styles__default.default.errorIcon, "data-addon": 'error-icon' },
-                React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, { className: styles__default.default.errorColorIcon }) }))),
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'negative-alert', size: 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'error-icon') }))),
             success && !error && (React__default.default.createElement("div", { className: styles__default.default.successIcon },
-                React__default.default.createElement(coreComponentsBadge.Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles__default.default.successColorIcon }) }))))));
+                React__default.default.createElement(coreComponentsStatusBadge.StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'success-icon') }))))));
     };
@@ -109,0 +107,0 @@ return FormControlComponent ? (React__default.default.createElement(FormControlComponent, { ref: wrapperRef, className: cn__default.default(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn__default.default(fieldClassName, (_b = {},

cssm/components/clear-button/Component.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

cssm/components/clear-button/Component.js

@@ -27,4 +27,4 @@ 'use strict';
 var ClearButton = function (_a) {
-    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick;
-    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles__default.default.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault },
+    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId;
+    return (React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles__default.default.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
         React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { className: cn__default.default(styles__default.default.clearIcon, colorStyles[colors].clearIcon) })));
@@ -31,0 +31,0 @@ };

cssm/utils.d.ts

@@ -9,3 +9,6 @@ declare function getInputTestIds(dataTestId: string): {
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

cssm/utils.js

@@ -16,2 +16,5 @@ 'use strict';
         hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: coreComponentsShared.getDataTestId(dataTestId, 'error-icon'),
+        successIcon: coreComponentsShared.getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'),
     };
@@ -18,0 +21,0 @@ }

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

@@ -143,3 +143,3 @@ /// <reference types="react" />
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
@@ -146,0 +146,0 @@ * Значение поля ввода

esm/components/base-input/Component.js

@@ -5,16 +5,14 @@ import { __rest, __assign } from 'tslib';
 import cn from 'classnames';
-import { Badge } from '@alfalab/core-components-badge/esm';
 import { getDataTestId } from '@alfalab/core-components-shared/esm';
+import { StatusBadge } from '@alfalab/core-components-status-badge/esm';
 import { useFocus } from '@alfalab/hooks';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { ClearButton } from '../clear-button/Component.js';
 
-var defaultColors = {"input":"input__input_1g27g","hasInnerLabel":"input__hasInnerLabel_1g27g","disableUserInput":"input__disableUserInput_1g27g","error":"input__error_1g27g"};
+var defaultColors = {"input":"input__input_eg1rv","hasInnerLabel":"input__hasInnerLabel_eg1rv","disableUserInput":"input__disableUserInput_eg1rv","error":"input__error_eg1rv"};
 require('./default.css')
 
-var styles = {"input":"input__input_18bus","hasInnerLabel":"input__hasInnerLabel_18bus","size-48":"input__size-48_18bus","size-56":"input__size-56_18bus","size-64":"input__size-64_18bus","size-72":"input__size-72_18bus","block":"input__block_18bus","errorIcon":"input__errorIcon_18bus","errorColorIcon":"input__errorColorIcon_18bus","successIcon":"input__successIcon_18bus","successColorIcon":"input__successColorIcon_18bus","focusVisible":"input__focusVisible_18bus","onautofillstart":"input__onautofillstart_18bus","onautofillcancel":"input__onautofillcancel_18bus"};
+var styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
 require('./index.css')
 
-var invertedColors = {"input":"input__input_1ixcf","hasInnerLabel":"input__hasInnerLabel_1ixcf","disableUserInput":"input__disableUserInput_1ixcf","error":"input__error_1ixcf"};
+var invertedColors = {"input":"input__input_39l17","hasInnerLabel":"input__hasInnerLabel_39l17","disableUserInput":"input__disableUserInput_39l17","error":"input__error_39l17"};
 require('./inverted.css')
@@ -94,8 +92,8 @@
         return (addonsVisible && (React.createElement(Fragment, null,
-            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors })),
+            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, { className: styles.errorColorIcon }) }))),
+                React.createElement(StatusBadge, { view: 'negative-alert', size: 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
             success && !error && (React.createElement("div", { className: styles.successIcon },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.successColorIcon }) }))))));
+                React.createElement(StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: getDataTestId(dataTestId, 'success-icon') }))))));
     };
@@ -102,0 +100,0 @@ return FormControlComponent ? (React.createElement(FormControlComponent, { ref: wrapperRef, className: cn(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn(fieldClassName, (_b = {},

esm/components/clear-button/Component.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

esm/components/clear-button/Component.js

@@ -6,9 +6,9 @@ import React from 'react';
 
-var defaultColors = {"clearIcon":"input__clearIcon_bqq6e"};
+var defaultColors = {"clearIcon":"input__clearIcon_v42u0"};
 require('./default.css')
 
-var styles = {"clearIcon":"input__clearIcon_ho0m9","clearButton":"input__clearButton_ho0m9"};
+var styles = {"clearIcon":"input__clearIcon_ydl5f","clearButton":"input__clearButton_ydl5f"};
 require('./index.css')
 
-var invertedColors = {"clearIcon":"input__clearIcon_17p7e"};
+var invertedColors = {"clearIcon":"input__clearIcon_1r2k2"};
 require('./inverted.css')
@@ -22,4 +22,4 @@
 var ClearButton = function (_a) {
-    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick;
-    return (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault },
+    var colors = _a.colors, disabled = _a.disabled, onClick = _a.onClick, dataTestId = _a.dataTestId;
+    return (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
         React.createElement(CrossCircleMIcon, { className: cn(styles.clearIcon, colorStyles[colors].clearIcon) })));
@@ -26,0 +26,0 @@ };

esm/utils.d.ts

@@ -9,3 +9,6 @@ declare function getInputTestIds(dataTestId: string): {
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

esm/utils.js

@@ -12,2 +12,5 @@ import { getDataTestId } from '@alfalab/core-components-shared/esm';
         hint: getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: getDataTestId(dataTestId, 'error-icon'),
+        successIcon: getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: getDataTestId(dataTestId, 'clear-icon'),
     };
@@ -14,0 +17,0 @@ }

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

@@ -143,3 +143,3 @@ /// <reference types="react" />
 };
-declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "enterKeyHint"> & {
     /**
@@ -146,0 +146,0 @@ * Значение поля ввода

modern/components/base-input/Component.js

 import React, { useRef, useState, useCallback, Fragment } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Badge } from '@alfalab/core-components-badge/modern';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { StatusBadge } from '@alfalab/core-components-status-badge/modern';
 import { useFocus } from '@alfalab/hooks';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { ClearButton } from '../clear-button/Component.js';
 
-const defaultColors = {"input":"input__input_1g27g","hasInnerLabel":"input__hasInnerLabel_1g27g","disableUserInput":"input__disableUserInput_1g27g","error":"input__error_1g27g"};
+const defaultColors = {"input":"input__input_eg1rv","hasInnerLabel":"input__hasInnerLabel_eg1rv","disableUserInput":"input__disableUserInput_eg1rv","error":"input__error_eg1rv"};
 require('./default.css')
 
-const styles = {"input":"input__input_18bus","hasInnerLabel":"input__hasInnerLabel_18bus","size-48":"input__size-48_18bus","size-56":"input__size-56_18bus","size-64":"input__size-64_18bus","size-72":"input__size-72_18bus","block":"input__block_18bus","errorIcon":"input__errorIcon_18bus","errorColorIcon":"input__errorColorIcon_18bus","successIcon":"input__successIcon_18bus","successColorIcon":"input__successColorIcon_18bus","focusVisible":"input__focusVisible_18bus","onautofillstart":"input__onautofillstart_18bus","onautofillcancel":"input__onautofillcancel_18bus"};
+const styles = {"input":"input__input_1p1fb","hasInnerLabel":"input__hasInnerLabel_1p1fb","size-48":"input__size-48_1p1fb","size-56":"input__size-56_1p1fb","size-64":"input__size-64_1p1fb","size-72":"input__size-72_1p1fb","block":"input__block_1p1fb","errorIcon":"input__errorIcon_1p1fb","successIcon":"input__successIcon_1p1fb","focusVisible":"input__focusVisible_1p1fb","onautofillstart":"input__onautofillstart_1p1fb","onautofillcancel":"input__onautofillcancel_1p1fb"};
 require('./index.css')
 
-const invertedColors = {"input":"input__input_1ixcf","hasInnerLabel":"input__hasInnerLabel_1ixcf","disableUserInput":"input__disableUserInput_1ixcf","error":"input__error_1ixcf"};
+const invertedColors = {"input":"input__input_39l17","hasInnerLabel":"input__hasInnerLabel_39l17","disableUserInput":"input__disableUserInput_39l17","error":"input__error_39l17"};
 require('./inverted.css')
@@ -90,8 +88,8 @@
         return (addonsVisible && (React.createElement(Fragment, null,
-            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors })),
+            clearButtonVisible && (React.createElement(ClearButton, { onClick: handleClear, disabled: disabled, colors: colors, dataTestId: getDataTestId(dataTestId, 'clear-icon') })),
             rightAddons,
             error && (React.createElement("div", { className: styles.errorIcon, "data-addon": 'error-icon' },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, { className: styles.errorColorIcon }) }))),
+                React.createElement(StatusBadge, { view: 'negative-alert', size: 20, dataTestId: getDataTestId(dataTestId, 'error-icon') }))),
             success && !error && (React.createElement("div", { className: styles.successIcon },
-                React.createElement(Badge, { view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.successColorIcon }) }))))));
+                React.createElement(StatusBadge, { view: 'positive-checkmark', size: 20, dataTestId: getDataTestId(dataTestId, 'success-icon') }))))));
     };
@@ -98,0 +96,0 @@ return FormControlComponent ? (React.createElement(FormControlComponent, { ref: wrapperRef, className: cn(className, focused && focusedClassName, filled && filledClassName), fieldClassName: cn(fieldClassName, {

modern/components/clear-button/Component.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
     colors: 'default' | 'inverted';
+    dataTestId?: string;
 }
 declare const ClearButton: React.FC<ClearButtonProps>;
 export { ClearButton };

modern/components/clear-button/Component.js

@@ -6,9 +6,9 @@ import React from 'react';
 
-const defaultColors = {"clearIcon":"input__clearIcon_bqq6e"};
+const defaultColors = {"clearIcon":"input__clearIcon_v42u0"};
 require('./default.css')
 
-const styles = {"clearIcon":"input__clearIcon_ho0m9","clearButton":"input__clearButton_ho0m9"};
+const styles = {"clearIcon":"input__clearIcon_ydl5f","clearButton":"input__clearButton_ydl5f"};
 require('./index.css')
 
-const invertedColors = {"clearIcon":"input__clearIcon_17p7e"};
+const invertedColors = {"clearIcon":"input__clearIcon_1r2k2"};
 require('./inverted.css')
@@ -21,5 +21,5 @@
 const preventDefault = (e) => e.preventDefault();
-const ClearButton = ({ colors, disabled, onClick }) => (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault },
+const ClearButton = ({ colors, disabled, onClick, dataTestId, }) => (React.createElement(Button, { type: 'button', view: 'text', disabled: disabled, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', className: styles.clearButton, onClick: onClick, tabIndex: -1, onMouseDown: preventDefault, dataTestId: dataTestId },
     React.createElement(CrossCircleMIcon, { className: cn(styles.clearIcon, colorStyles[colors].clearIcon) })));
 
 export { ClearButton };

modern/utils.d.ts

@@ -9,3 +9,6 @@ declare function getInputTestIds(dataTestId: string): {
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

modern/utils.js

@@ -12,2 +12,5 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
         hint: getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: getDataTestId(dataTestId, 'error-icon'),
+        successIcon: getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: getDataTestId(dataTestId, 'clear-icon'),
     };
@@ -14,0 +17,0 @@ }

package.json

 {
     "name": "@alfalab/core-components-input",
-    "version": "14.4.1",
+    "version": "14.4.2",
     "description": "",
@@ -19,3 +19,3 @@ "keywords": [],
         "@alfalab/core-components-form-control": "^12.2.1",
-        "@alfalab/core-components-badge": "^5.5.1",
+        "@alfalab/core-components-status-badge": "^1.0.0",
         "@alfalab/core-components-mq": "^4.2.0",
@@ -22,0 +22,0 @@ "@alfalab/core-components-shared": "^0.9.1",

src/utils.ts

@@ -12,3 +12,6 @@ import { getDataTestId } from '@alfalab/core-components-shared';
         hint: getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: getDataTestId(dataTestId, 'error-icon'),
+        successIcon: getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: getDataTestId(dataTestId, 'clear-icon'),
     };
 }

utils.d.ts

@@ -9,3 +9,6 @@ declare function getInputTestIds(dataTestId: string): {
     hint: string;
+    errorIcon: string;
+    successIcon: string;
+    clearIcon: string;
 };
 export { getInputTestIds };

utils.js

@@ -16,2 +16,5 @@ 'use strict';
         hint: coreComponentsShared.getDataTestId(dataTestId, 'form-control-hint'),
+        errorIcon: coreComponentsShared.getDataTestId(dataTestId, 'error-icon'),
+        successIcon: coreComponentsShared.getDataTestId(dataTestId, 'success-icon'),
+        clearIcon: coreComponentsShared.getDataTestId(dataTestId, 'clear-icon'),
     };
@@ -18,0 +21,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

Worsened metrics

Total package byte prevSize

236174

decreased by-0.35%

Lines of code

4554

decreased by-0.22%

Dependency changes

• + Added@alfalab/core-components-status-badge@^1.0.0

• + Added@alfalab/core-components-status-badge@1.2.0(transitive)

• - Removed@alfalab/core-components-badge@^5.5.1

• - Removed@alfalab/core-components-badge@5.6.1(transitive)