@alfalab/core-components-input-autocomplete 13.0.1 → 13.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-input-autocomplete",
-    "version": "13.0.1",
+    "version": "13.0.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -11,10 +11,10 @@
     "module": "./esm/index.js",
     "dependencies": {
         "@alfalab/core-components-form-control": "^13.0.1",
-        "@alfalab/core-components-input": "^16.0.1",
+        "@alfalab/core-components-input": "^16.0.2",
         "@alfalab/core-components-mq": "^5.0.1",
         "@alfalab/core-components-popover": "^7.1.0",
-        "@alfalab/core-components-select": "^18.0.1",
+        "@alfalab/core-components-select": "^18.1.0",
         "@alfalab/core-components-shared": "^1.1.0",
         "@alfalab/core-components-status-badge": "^2.0.1",
         "@alfalab/hooks": "^1.13.1",
@@ -32,6 +32,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.2",
     "varsVersion": "10.1.0"
 }

package/src/Component.responsive.tsx

@@ -4,7 +4,7 @@ import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { InputAutocompleteDesktop } from './desktop';
 import { InputAutocompleteMobile } from './mobile';
-import { InputAutocompleteProps } from './types';
+import { type InputAutocompleteProps } from './types';
 
 export const InputAutocomplete = forwardRef<
     HTMLInputElement | HTMLDivElement,

package/src/autocomplete-field/Component.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback, useRef } from 'react';
+import React, { Fragment, useCallback, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { InputProps } from '@alfalab/core-components-input';
+import { type InputProps } from '@alfalab/core-components-input';
 import { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';
-import type { FieldProps } from '@alfalab/core-components-select/shared';
+import { type FieldProps } from '@alfalab/core-components-select/shared';
 
 import { OnInputReason } from '../enums';
-import { InputAutocompleteCommonProps } from '../types';
+import { type InputAutocompleteCommonProps } from '../types';
 
 import styles from './index.module.css';
 
@@ -79,7 +79,14 @@ export const AutocompleteField = ({
             value={value}
             rightAddons={
                 (Arrow || inputProps.rightAddons) && (
-                    <React.Fragment>
+                    /**
+                     * Right addon priority [4] <= [3] <= [2] <= [1]
+                     * [4] - Clear
+                     * [3] - Status (error, success)
+                     * [2] - Common (info, e.g.)
+                     * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
+                     */
+                    <Fragment>
                         {inputProps.rightAddons}
                         {Arrow && (
                             <span
@@ -90,7 +97,7 @@ export const AutocompleteField = ({
                                 {Arrow}
                             </span>
                         )}
-                    </React.Fragment>
+                    </Fragment>
                 )
             }
         />

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

@@ -1,12 +1,12 @@
-import React, { ElementType, Fragment, useRef, useState } from 'react';
+import React, { type ElementType, Fragment, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import {
     FormControlMobile,
-    FormControlMobileProps,
+    type FormControlMobileProps,
 } from '@alfalab/core-components-form-control/mobile';
 import { ClearButton } from '@alfalab/core-components-input/shared';
-import type { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/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';
@@ -63,34 +63,43 @@ export const AutocompleteMobileField = ({
     const filled = Boolean(value);
     const showPlaceholder = placeholder && !filled && labelView === 'outer';
     const clearButtonVisible = clear && filled && !disabled && !readOnly;
+    const shouldShowSuccessIcon = success && !error;
+    const statusBadgeSize = size === 40 ? 16 : 20;
 
     const { tabIndex, ...restInnerProps } = innerProps;
 
     const formRightAddons = (Arrow || rightAddons || clearButtonVisible || error || success) && (
+        /**
+         * Right addon priority [4] <= [3] <= [2] <= [1]
+         * [4] - Clear
+         * [3] - Status (error, success)
+         * [2] - Common (info, e.g.)
+         * [1] - Indicators (eye, calendar, chevron, stepper e.g.)
+         */
         <Fragment>
             {clearButtonVisible && (
                 <ClearButton onClick={onClear} disabled={disabled} colors={colors} />
             )}
-            {rightAddons}
-            {Arrow}
             {error && (
                 <div className={styles.errorIcon} data-addon='error-icon'>
                     <StatusBadge
                         view='negative-alert'
-                        size={size === 40 ? 16 : 20}
+                        size={statusBadgeSize}
                         dataTestId={getDataTestId(dataTestId, 'error-icon')}
                     />
                 </div>
             )}
-            {success && !error && (
+            {shouldShowSuccessIcon && (
                 <div className={styles.successIcon}>
                     <StatusBadge
                         view='positive-checkmark'
-                        size={size === 40 ? 16 : 20}
+                        size={statusBadgeSize}
                         dataTestId={getDataTestId(dataTestId, 'success-icon')}
                     />
                 </div>
             )}
+            {rightAddons}
+            {Arrow}
         </Fragment>
     );
 

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../vars.css';
 
 .component {

package/src/desktop/Component.desktop.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { Popover } from '@alfalab/core-components-popover';
 import {
-    AnyObject,
+    type AnyObject,
     BaseSelect,
     Optgroup as DefaultOptgroup,
     Option as DefaultOption,
@@ -10,7 +10,7 @@ import {
 } from '@alfalab/core-components-select/shared';
 
 import { AutocompleteField } from '../autocomplete-field';
-import { InputAutocompleteCommonProps } from '../types';
+import { type InputAutocompleteCommonProps } from '../types';
 
 export const InputAutocompleteDesktop = forwardRef<HTMLInputElement, InputAutocompleteCommonProps>(
     (

package/src/mobile/Component.mobile.tsx

@@ -1,4 +1,4 @@
-import React, { Ref, useMemo, useRef, useState } from 'react';
+import React, { type Ref, useMemo, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { maskitoTransform } from '@maskito/core';
 import cn from 'classnames';
@@ -6,20 +6,20 @@ import throttle from 'lodash/throttle';
 
 import {
     SelectMobile,
-    SelectMobileProps,
+    type SelectMobileProps,
     SelectModalMobile,
 } from '@alfalab/core-components-select/mobile';
 import {
-    AnyObject,
-    BottomSheetSelectMobileProps,
+    type AnyObject,
+    type BottomSheetSelectMobileProps,
     Footer,
-    ModalSelectMobileProps,
+    type ModalSelectMobileProps,
 } from '@alfalab/core-components-select/shared';
 import { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';
 
 import { AutocompleteMobileField } from '../autocomplete-mobile-field';
 import { OnInputReason } from '../enums';
-import { InputAutocompleteMobileProps } from '../types';
+import { type InputAutocompleteMobileProps } from '../types';
 import { searchFilterStub } from '../utils';
 
 import styles from './mobile.module.css';

package/src/mobile/Component.modal.mobile.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { InputAutocompleteMobileProps } from '../types';
+import { type InputAutocompleteMobileProps } from '../types';
 
 import { InputAutocompleteMobile } from './Component.mobile';
 

package/src/mobile/mobile.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .input {
     width: auto;

package/src/types.ts

@@ -1,9 +1,9 @@
-import type { ComponentType, RefAttributes } from 'react';
+import { type ComponentType, type RefAttributes } from 'react';
 
-import type { InputProps } from '@alfalab/core-components-input';
-import type {
-    BaseSelectProps,
-    BottomSheetSelectMobileProps,
+import { type InputProps } from '@alfalab/core-components-input';
+import {
+    type BaseSelectProps,
+    type BottomSheetSelectMobileProps,
 } from '@alfalab/core-components-select/shared';
 
 type OnInputTypeReason = 'close' | 'change';

package/types.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentType, RefAttributes } from 'react';
-import type { InputProps } from '@alfalab/core-components-input';
-import type { BaseSelectProps, BottomSheetSelectMobileProps } from '@alfalab/core-components-select/shared';
+import { type ComponentType, type RefAttributes } from 'react';
+import { type InputProps } from '@alfalab/core-components-input';
+import { type BaseSelectProps, type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/shared';
 declare type OnInputTypeReason = 'close' | 'change';
 export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'Field' | 'nativeSelect' | 'searchProps' | 'showSearch' | 'Search' | 'valueRenderer'> {
     /**