@alfalab/core-components-input-autocomplete 12.7.2 → 12.8.0

package/moderncssm/utils.d.ts

@@ -9,6 +9,8 @@ declare function getInputAutocompleteDesktopTestIds(dataTestId: string): {
     fieldLeftAddons: string;
     fieldRightAddons: string;
     fieldError: string;
+    fieldErrorIcon: string;
+    fieldSuccessIcon: string;
     fieldHint: string;
 };
 declare function getInputAutocompleteMobileTestIds(dataTestId: string): {
@@ -28,6 +30,8 @@ declare function getInputAutocompleteMobileTestIds(dataTestId: string): {
     fieldLeftAddons: string;
     fieldRightAddons: string;
     fieldError: string;
+    fieldErrorIcon: string;
+    fieldSuccessIcon: string;
     fieldHint: string;
     searchInput: string;
     searchFormControl: string;

package/moderncssm/utils.js

@@ -14,6 +14,8 @@ function getInputAutocompleteDesktopTestIds(dataTestId) {
         fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),
         fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldErrorIcon: getDataTestId(dataTestId, 'field-form-control-error-icon'),
+        fieldSuccessIcon: getDataTestId(dataTestId, 'field-form-control-success-icon'),
         fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),
     };
 }
@@ -35,6 +37,8 @@ function getInputAutocompleteMobileTestIds(dataTestId) {
         fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),
         fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldErrorIcon: getDataTestId(dataTestId, 'field-error-icon'),
+        fieldSuccessIcon: getDataTestId(dataTestId, 'field-success-icon'),
         fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),
         searchInput: getDataTestId(dataTestId, 'search'),
         searchFormControl: getDataTestId(dataTestId, 'search-form-control'),

package/moderncssm/vars.css

@@ -0,0 +1,5 @@
+:root {
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-input-autocomplete",
-    "version": "12.7.2",
+    "version": "12.8.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,11 +15,12 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-form-control": "^12.8.0",
-        "@alfalab/core-components-input": "^15.5.0",
-        "@alfalab/core-components-popover": "^6.3.6",
-        "@alfalab/core-components-select": "^17.20.1",
-        "@alfalab/core-components-shared": "^0.14.1",
+        "@alfalab/core-components-form-control": "^12.8.1",
+        "@alfalab/core-components-input": "^15.5.1",
+        "@alfalab/core-components-popover": "^6.3.7",
+        "@alfalab/core-components-select": "^17.20.3",
+        "@alfalab/core-components-status-badge": "^1.2.3",
+        "@alfalab/core-components-shared": "^0.15.0",
         "@alfalab/core-components-mq": "^4.4.1",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
@@ -31,5 +32,5 @@
         "@types/lodash": "^4.17.13"
     },
     "themesVersion": "13.7.0",
-    "varsVersion": "9.16.0"
+    "varsVersion": "9.18.0"
 }

package/src/autocomplete-mobile-field/Component.tsx

@@ -8,6 +8,7 @@ import {
 import { ClearButton } from '@alfalab/core-components-input/shared';
 import type { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/shared';
 import { getDataTestId } from '@alfalab/core-components-shared';
+import { StatusBadge } from '@alfalab/core-components-status-badge';
 import { useFocus } from '@alfalab/hooks';
 
 import styles from './index.module.css';
@@ -47,6 +48,7 @@ export const AutocompleteMobileField = ({
     error,
     readOnly,
     clear,
+    success,
     onClear,
     onInput,
     colors = 'default',
@@ -64,6 +66,37 @@ export const AutocompleteMobileField = ({
 
     const { tabIndex, ...restInnerProps } = innerProps;
 
+    const formRightAddons = (Arrow || rightAddons || clearButtonVisible || error || success) && (
+        <React.Fragment>
+            {clearButtonVisible && (
+                <ClearButton onClick={onClear} disabled={disabled} colors={colors} />
+            )}
+            {rightAddons}
+            {Arrow}
+            {error && (
+                <div
+                    className={cn(styles.errorIcon, styles[`size-${size}`])}
+                    data-addon='error-icon'
+                >
+                    <StatusBadge
+                        view='negative-alert'
+                        size={size === 40 ? 16 : 20}
+                        dataTestId={getDataTestId(dataTestId, 'error-icon')}
+                    />
+                </div>
+            )}
+            {success && !error && (
+                <div className={cn(styles.successIcon, styles[`size-${size}`])}>
+                    <StatusBadge
+                        view='positive-checkmark'
+                        size={size === 40 ? 16 : 20}
+                        dataTestId={getDataTestId(dataTestId, 'success-icon')}
+                    />
+                </div>
+            )}
+        </React.Fragment>
+    );
+
     return (
         <div
             className={styles.component}
@@ -90,21 +123,7 @@ export const AutocompleteMobileField = ({
                 readOnly={readOnly}
                 colors={colors}
                 error={error}
-                rightAddons={
-                    (Arrow || rightAddons || clearButtonVisible) && (
-                        <React.Fragment>
-                            {clearButtonVisible && (
-                                <ClearButton
-                                    onClick={onClear}
-                                    disabled={disabled}
-                                    colors={colors}
-                                />
-                            )}
-                            {rightAddons}
-                            {Arrow}
-                        </React.Fragment>
-                    )
-                }
+                rightAddons={formRightAddons}
             >
                 <div className={styles.contentWrapper}>
                     {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}

package/src/autocomplete-mobile-field/index.module.css

@@ -1,4 +1,5 @@
 @import '@alfalab/core-components-vars/src/index.css';
+@import '../vars.css';
 
 .component {
     width: 100%;
@@ -9,6 +10,42 @@
     cursor: pointer;
 }
 
+.errorIcon {
+    display: var(--input-error-icon-display);
+
+    &:not(:only-child) {
+        margin-left: var(--gap-4);
+    }
+
+    &.size-40:not(:only-child) {
+        margin-left: 6px;
+    }
+}
+
+* + .errorIcon {
+    display: var(--input-error-icon-not-alone-display);
+}
+
+button[class*='eye'] + .errorIcon {
+    margin-right: var(--gap-12);
+}
+
+.successIcon {
+    display: var(--input-success-icon-display);
+
+    &:not(:only-child) {
+        margin-left: var(--gap-4);
+    }
+
+    &.size-40:not(:only-child) {
+        margin-left: 6px;
+    }
+}
+
+button[class*='eye'] + .successIcon {
+    margin-right: var(--gap-12);
+}
+
 .disabled {
     cursor: var(--disabled-cursor);
 }

package/src/mobile/Component.mobile.tsx

@@ -43,6 +43,7 @@ export const InputAutocompleteMobile = React.forwardRef(
             onCancel,
             onApply,
             title,
+            success,
             ...restProps
         }: InputAutocompleteMobileProps,
         ref,
@@ -171,6 +172,7 @@ export const InputAutocompleteMobile = React.forwardRef(
                     value: isOpen ? frozenValue.current : value,
                     clear,
                     onClear: clear ? inputProps?.onClear : undefined,
+                    success,
                     ...(restProps.fieldProps as AnyObject),
                 }}
             />

package/src/utils.ts

@@ -15,6 +15,8 @@ export function getInputAutocompleteDesktopTestIds(dataTestId: string) {
         fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),
         fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldErrorIcon: getDataTestId(dataTestId, 'field-form-control-error-icon'),
+        fieldSuccessIcon: getDataTestId(dataTestId, 'field-form-control-success-icon'),
         fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),
     };
 }
@@ -37,6 +39,8 @@ export function getInputAutocompleteMobileTestIds(dataTestId: string) {
         fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),
         fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldErrorIcon: getDataTestId(dataTestId, 'field-error-icon'),
+        fieldSuccessIcon: getDataTestId(dataTestId, 'field-success-icon'),
         fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),
         searchInput: getDataTestId(dataTestId, 'search'),
         searchFormControl: getDataTestId(dataTestId, 'search-form-control'),

package/src/vars.css

@@ -0,0 +1,8 @@
+:root {
+    /* display */
+    --input-error-icon-display: none;
+    --input-success-icon-display: flex;
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+    --input-error-icon-not-alone-display: none;
+}

package/utils.d.ts

@@ -9,6 +9,8 @@ declare function getInputAutocompleteDesktopTestIds(dataTestId: string): {
     fieldLeftAddons: string;
     fieldRightAddons: string;
     fieldError: string;
+    fieldErrorIcon: string;
+    fieldSuccessIcon: string;
     fieldHint: string;
 };
 declare function getInputAutocompleteMobileTestIds(dataTestId: string): {
@@ -28,6 +30,8 @@ declare function getInputAutocompleteMobileTestIds(dataTestId: string): {
     fieldLeftAddons: string;
     fieldRightAddons: string;
     fieldError: string;
+    fieldErrorIcon: string;
+    fieldSuccessIcon: string;
     fieldHint: string;
     searchInput: string;
     searchFormControl: string;

package/utils.js

@@ -18,6 +18,8 @@ function getInputAutocompleteDesktopTestIds(dataTestId) {
         fieldLeftAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-left-addons'),
         fieldRightAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldErrorIcon: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-error-icon'),
+        fieldSuccessIcon: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-success-icon'),
         fieldHint: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-hint'),
     };
 }
@@ -39,6 +41,8 @@ function getInputAutocompleteMobileTestIds(dataTestId) {
         fieldLeftAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-left-addons'),
         fieldRightAddons: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-right-addons'),
         fieldError: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-error-message'),
+        fieldErrorIcon: coreComponentsShared.getDataTestId(dataTestId, 'field-error-icon'),
+        fieldSuccessIcon: coreComponentsShared.getDataTestId(dataTestId, 'field-success-icon'),
         fieldHint: coreComponentsShared.getDataTestId(dataTestId, 'field-form-control-hint'),
         searchInput: coreComponentsShared.getDataTestId(dataTestId, 'search'),
         searchFormControl: coreComponentsShared.getDataTestId(dataTestId, 'search-form-control'),