@alfalab/core-components-input-autocomplete 11.0.3 → 11.1.0

package/Component.responsive.js

@@ -18,6 +18,7 @@ require('lodash.throttle');
 require('@alfalab/core-components-select/mobile');
 require('./autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-input/shared');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 require('./utils.js');

package/autocomplete-field/Component.js

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"arrow":"input-autocomplete__arrow_z2bi9","error":"input-autocomplete__error_z2bi9"};
+var styles = {"arrow":"input-autocomplete__arrow_wt0tr","error":"input-autocomplete__error_wt0tr"};
 require('./index.css')
 
 var AutocompleteField = function (_a) {

package/autocomplete-field/index.css

@@ -1,4 +1,4 @@
-/* hash: xfkzu */
-.input-autocomplete__arrow_z2bi9.input-autocomplete__error_z2bi9 ~ * {
+/* hash: wsrha */
+.input-autocomplete__arrow_wt0tr.input-autocomplete__error_wt0tr ~ * {
     display: none;
 }

package/autocomplete-mobile-field/Component.d.ts

@@ -15,5 +15,5 @@ type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps
      */
     value?: string;
 };
-declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
+declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
 export { AutocompleteMobileFieldProps, AutocompleteMobileField };

package/autocomplete-mobile-field/Component.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var mobile = require('@alfalab/core-components-form-control/mobile');
+var shared = require('@alfalab/core-components-input/shared');
 var coreComponentsShared = require('@alfalab/core-components-shared');
 var hooks = require('@alfalab/hooks');
 
@@ -14,25 +15,29 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"input-autocomplete__component_gg3o5","field":"input-autocomplete__field_gg3o5","disabled":"input-autocomplete__disabled_gg3o5","placeholder":"input-autocomplete__placeholder_gg3o5","contentWrapper":"input-autocomplete__contentWrapper_gg3o5","value":"input-autocomplete__value_gg3o5","focusVisible":"input-autocomplete__focusVisible_gg3o5"};
+var styles = {"component":"input-autocomplete__component_ymkry","field":"input-autocomplete__field_ymkry","disabled":"input-autocomplete__disabled_ymkry","placeholder":"input-autocomplete__placeholder_ymkry","contentWrapper":"input-autocomplete__contentWrapper_ymkry","value":"input-autocomplete__value_ymkry","focusVisible":"input-autocomplete__focusVisible_ymkry"};
 require('./index.css')
 
 var AutocompleteMobileField = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var restProps = tslib.__rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent"]);
-    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var rightAddons = _a.rightAddons, error = _a.error, readOnly = _a.readOnly, clear = _a.clear, onClear = _a.onClear; _a.onInput; var _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent", "rightAddons", "error", "readOnly", "clear", "onClear", "onInput", "colors"]);
+    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
     var wrapperRef = React.useRef(null);
     var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
     var filled = Boolean(value);
     var showPlaceholder = placeholder && !filled && labelView === 'outer';
+    var clearButtonVisible = clear && filled && !disabled && !readOnly;
     var tabIndex = innerProps.tabIndex, restInnerProps = tslib.__rest(innerProps, ["tabIndex"]);
     return (React__default.default.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
         React__default.default.createElement(mobile.FormControlMobile, tslib.__assign({ fieldClassName: cn__default.default(styles.field, fieldClassName, (_b = {},
                 _b[styles.disabled] = disabled,
                 _b[styles.focusVisible] = focusVisible,
-                _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, rightAddons: Arrow, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), 
+                _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), 
             // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
-            tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps),
+            tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps, { readOnly: readOnly, colors: colors, error: error, rightAddons: (Arrow || rightAddons || clearButtonVisible) && (React__default.default.createElement(React__default.default.Fragment, null,
+                clearButtonVisible && (React__default.default.createElement(shared.ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
+                rightAddons,
+                Arrow)) }),
             React__default.default.createElement("div", { className: styles.contentWrapper },
                 showPlaceholder && React__default.default.createElement("span", { className: styles.placeholder }, placeholder),
                 filled && React__default.default.createElement("div", { className: styles.value }, value)))));

package/autocomplete-mobile-field/index.css

@@ -1,4 +1,4 @@
-/* hash: r7aus */
+/* hash: ru4db */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -18,16 +18,16 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_gg3o5 {
+} .input-autocomplete__component_ymkry {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_gg3o5:not(.input-autocomplete__disabled_gg3o5) {
+} .input-autocomplete__field_ymkry:not(.input-autocomplete__disabled_ymkry) {
     cursor: pointer;
-} .input-autocomplete__disabled_gg3o5 {
+} .input-autocomplete__disabled_ymkry {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_gg3o5 {
+} .input-autocomplete__placeholder_ymkry {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_gg3o5 {
+} .input-autocomplete__contentWrapper_ymkry {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -36,11 +36,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_gg3o5 {
+} .input-autocomplete__value_ymkry {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_gg3o5 {
+} .input-autocomplete__focusVisible_ymkry {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/autocomplete-mobile-field/index.js

@@ -7,6 +7,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-input/shared');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 

package/cssm/Component.responsive.js

@@ -19,6 +19,7 @@ require('lodash.throttle');
 require('@alfalab/core-components-select/cssm/mobile');
 require('./autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/cssm/mobile');
+require('@alfalab/core-components-input/cssm/shared');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
 require('./autocomplete-mobile-field/index.module.css');

package/cssm/autocomplete-mobile-field/Component.d.ts

@@ -15,5 +15,5 @@ type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps
      */
     value?: string;
 };
-declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
+declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
 export { AutocompleteMobileFieldProps, AutocompleteMobileField };

package/cssm/autocomplete-mobile-field/Component.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var mobile = require('@alfalab/core-components-form-control/cssm/mobile');
+var shared = require('@alfalab/core-components-input/cssm/shared');
 var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var hooks = require('@alfalab/hooks');
 var styles = require('./index.module.css');
@@ -18,20 +19,24 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var AutocompleteMobileField = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var restProps = tslib.__rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent"]);
-    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var rightAddons = _a.rightAddons, error = _a.error, readOnly = _a.readOnly, clear = _a.clear, onClear = _a.onClear; _a.onInput; var _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent", "rightAddons", "error", "readOnly", "clear", "onClear", "onInput", "colors"]);
+    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
     var wrapperRef = React.useRef(null);
     var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
     var filled = Boolean(value);
     var showPlaceholder = placeholder && !filled && labelView === 'outer';
+    var clearButtonVisible = clear && filled && !disabled && !readOnly;
     var tabIndex = innerProps.tabIndex, restInnerProps = tslib.__rest(innerProps, ["tabIndex"]);
     return (React__default.default.createElement("div", { className: styles__default.default.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
         React__default.default.createElement(mobile.FormControlMobile, tslib.__assign({ fieldClassName: cn__default.default(styles__default.default.field, fieldClassName, (_b = {},
                 _b[styles__default.default.disabled] = disabled,
                 _b[styles__default.default.focusVisible] = focusVisible,
-                _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, rightAddons: Arrow, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), 
+                _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'form-control'), 
             // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
-            tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps),
+            tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps, { readOnly: readOnly, colors: colors, error: error, rightAddons: (Arrow || rightAddons || clearButtonVisible) && (React__default.default.createElement(React__default.default.Fragment, null,
+                clearButtonVisible && (React__default.default.createElement(shared.ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
+                rightAddons,
+                Arrow)) }),
             React__default.default.createElement("div", { className: styles__default.default.contentWrapper },
                 showPlaceholder && React__default.default.createElement("span", { className: styles__default.default.placeholder }, placeholder),
                 filled && React__default.default.createElement("div", { className: styles__default.default.value }, value)))));

package/cssm/autocomplete-mobile-field/index.js

@@ -7,6 +7,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-form-control/cssm/mobile');
+require('@alfalab/core-components-input/cssm/shared');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
 require('./index.module.css');

package/cssm/index.js

@@ -19,6 +19,7 @@ require('lodash.throttle');
 require('@alfalab/core-components-select/cssm/mobile');
 require('./autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/cssm/mobile');
+require('@alfalab/core-components-input/cssm/shared');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
 require('./autocomplete-mobile-field/index.module.css');

package/cssm/mobile/Component.mobile.js

@@ -13,6 +13,7 @@ var autocompleteMobileField_Component = require('../autocomplete-mobile-field/Co
 var utils = require('../utils.js');
 var styles = require('./mobile.module.css');
 require('@alfalab/core-components-form-control/cssm/mobile');
+require('@alfalab/core-components-input/cssm/shared');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
 require('../autocomplete-mobile-field/index.module.css');
@@ -59,6 +60,7 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
         setModalVisibility(false);
         restorePrevValue();
     };
+    var handleClear = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(null, { value: '' }); };
     var handleExiting = function (node) {
         var _a, _b;
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -75,13 +77,14 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
             onTouchMove: handleOptionsListTouchMove,
         },
         _b);
+    var clear = (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false;
     return (React__default.default.createElement(Component, tslib.__assign({ Field: autocompleteMobileField_Component.AutocompleteMobileField }, restProps, (isBottomSheet
         ? { bottomSheetProps: componentProps }
         : { modalProps: componentProps }), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
             value: value,
             filterFn: utils.searchFilterStub,
-            componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles__default.default.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
-        }, Search: Input, ref: mergeRefs__default.default([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: tslib.__assign({ value: isOpen ? frozenValue.current : value }, restProps.fieldProps) })));
+            componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles__default.default.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
+        }, Search: Input, ref: mergeRefs__default.default([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: tslib.__assign({ value: isOpen ? frozenValue.current : value, clear: clear, onClear: clear ? handleClear : undefined }, restProps.fieldProps) })));
 });
 
 exports.InputAutocompleteMobile = InputAutocompleteMobile;

package/cssm/mobile/Component.modal.mobile.js

@@ -12,6 +12,7 @@ require('@alfalab/core-components-select/cssm/mobile');
 require('@alfalab/core-components-select/cssm/shared');
 require('../autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/cssm/mobile');
+require('@alfalab/core-components-input/cssm/shared');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
 require('../autocomplete-mobile-field/index.module.css');

package/cssm/mobile/index.js

@@ -13,6 +13,7 @@ require('@alfalab/core-components-select/cssm/mobile');
 require('@alfalab/core-components-select/cssm/shared');
 require('../autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/cssm/mobile');
+require('@alfalab/core-components-input/cssm/shared');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/hooks');
 require('../autocomplete-mobile-field/index.module.css');

package/esm/Component.responsive.js

@@ -14,6 +14,7 @@ import 'lodash.throttle';
 import '@alfalab/core-components-select/esm/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-input/esm/shared';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 import './utils.js';

package/esm/autocomplete-field/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { InputDesktop } from '@alfalab/core-components-input/esm/desktop';
 
-var styles = {"arrow":"input-autocomplete__arrow_z2bi9","error":"input-autocomplete__error_z2bi9"};
+var styles = {"arrow":"input-autocomplete__arrow_wt0tr","error":"input-autocomplete__error_wt0tr"};
 require('./index.css')
 
 var AutocompleteField = function (_a) {

package/esm/autocomplete-field/index.css

@@ -1,4 +1,4 @@
-/* hash: xfkzu */
-.input-autocomplete__arrow_z2bi9.input-autocomplete__error_z2bi9 ~ * {
+/* hash: wsrha */
+.input-autocomplete__arrow_wt0tr.input-autocomplete__error_wt0tr ~ * {
     display: none;
 }

package/esm/autocomplete-mobile-field/Component.d.ts

@@ -15,5 +15,5 @@ type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps
      */
     value?: string;
 };
-declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
+declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
 export { AutocompleteMobileFieldProps, AutocompleteMobileField };

package/esm/autocomplete-mobile-field/Component.js

@@ -2,28 +2,33 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useRef } from 'react';
 import cn from 'classnames';
 import { FormControlMobile } from '@alfalab/core-components-form-control/esm/mobile';
+import { ClearButton } from '@alfalab/core-components-input/esm/shared';
 import { getDataTestId } from '@alfalab/core-components-shared/esm';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"input-autocomplete__component_gg3o5","field":"input-autocomplete__field_gg3o5","disabled":"input-autocomplete__disabled_gg3o5","placeholder":"input-autocomplete__placeholder_gg3o5","contentWrapper":"input-autocomplete__contentWrapper_gg3o5","value":"input-autocomplete__value_gg3o5","focusVisible":"input-autocomplete__focusVisible_gg3o5"};
+var styles = {"component":"input-autocomplete__component_ymkry","field":"input-autocomplete__field_ymkry","disabled":"input-autocomplete__disabled_ymkry","placeholder":"input-autocomplete__placeholder_ymkry","contentWrapper":"input-autocomplete__contentWrapper_ymkry","value":"input-autocomplete__value_ymkry","focusVisible":"input-autocomplete__focusVisible_ymkry"};
 require('./index.css')
 
 var AutocompleteMobileField = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var restProps = __rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent"]);
-    var _e = useState(false), focused = _e[0], setFocused = _e[1];
+    var _c = _a.size, size = _c === void 0 ? 'm' : _c, open = _a.open, disabled = _a.disabled, value = _a.value, innerProps = _a.innerProps, dataTestId = _a.dataTestId, fieldClassName = _a.fieldClassName, _d = _a.labelView, labelView = _d === void 0 ? 'inner' : _d, placeholder = _a.placeholder, Arrow = _a.Arrow; _a.valueRenderer; _a.toggleMenu; _a.setSelectedItems; _a.selectedMultiple; _a.FormControlComponent; var rightAddons = _a.rightAddons, error = _a.error, readOnly = _a.readOnly, clear = _a.clear, onClear = _a.onClear; _a.onInput; var _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = __rest(_a, ["size", "open", "disabled", "value", "innerProps", "dataTestId", "fieldClassName", "labelView", "placeholder", "Arrow", "valueRenderer", "toggleMenu", "setSelectedItems", "selectedMultiple", "FormControlComponent", "rightAddons", "error", "readOnly", "clear", "onClear", "onInput", "colors"]);
+    var _f = useState(false), focused = _f[0], setFocused = _f[1];
     var wrapperRef = useRef(null);
     var focusVisible = useFocus(wrapperRef, 'keyboard')[0];
     var filled = Boolean(value);
     var showPlaceholder = placeholder && !filled && labelView === 'outer';
+    var clearButtonVisible = clear && filled && !disabled && !readOnly;
     var tabIndex = innerProps.tabIndex, restInnerProps = __rest(innerProps, ["tabIndex"]);
     return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); } },
         React.createElement(FormControlMobile, __assign({ fieldClassName: cn(styles.field, fieldClassName, (_b = {},
                 _b[styles.disabled] = disabled,
                 _b[styles.focusVisible] = focusVisible,
-                _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, rightAddons: Arrow, dataTestId: getDataTestId(dataTestId, 'form-control'), 
+                _b)), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: getDataTestId(dataTestId, 'form-control'), 
             // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
-            tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps),
+            tabIndex: open ? undefined : tabIndex }, restProps, restInnerProps, { readOnly: readOnly, colors: colors, error: error, rightAddons: (Arrow || rightAddons || clearButtonVisible) && (React.createElement(React.Fragment, null,
+                clearButtonVisible && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
+                rightAddons,
+                Arrow)) }),
             React.createElement("div", { className: styles.contentWrapper },
                 showPlaceholder && React.createElement("span", { className: styles.placeholder }, placeholder),
                 filled && React.createElement("div", { className: styles.value }, value)))));

package/esm/autocomplete-mobile-field/index.css

@@ -1,4 +1,4 @@
-/* hash: r7aus */
+/* hash: ru4db */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -18,16 +18,16 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_gg3o5 {
+} .input-autocomplete__component_ymkry {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_gg3o5:not(.input-autocomplete__disabled_gg3o5) {
+} .input-autocomplete__field_ymkry:not(.input-autocomplete__disabled_ymkry) {
     cursor: pointer;
-} .input-autocomplete__disabled_gg3o5 {
+} .input-autocomplete__disabled_ymkry {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_gg3o5 {
+} .input-autocomplete__placeholder_ymkry {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_gg3o5 {
+} .input-autocomplete__contentWrapper_ymkry {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -36,11 +36,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_gg3o5 {
+} .input-autocomplete__value_ymkry {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_gg3o5 {
+} .input-autocomplete__focusVisible_ymkry {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/esm/autocomplete-mobile-field/index.js

@@ -3,5 +3,6 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-input/esm/shared';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';

package/esm/index.js

@@ -14,6 +14,7 @@ import 'lodash.throttle';
 import '@alfalab/core-components-select/esm/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-input/esm/shared';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 import './utils.js';

package/esm/mobile/Component.mobile.js

@@ -8,10 +8,11 @@ import { Footer } from '@alfalab/core-components-select/esm/shared';
 import { AutocompleteMobileField } from '../autocomplete-mobile-field/Component.js';
 import { searchFilterStub } from '../utils.js';
 import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-input/esm/shared';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 
-var styles = {"input":"input-autocomplete__input_dae0s"};
+var styles = {"input":"input-autocomplete__input_fjopa"};
 require('./mobile.css')
 
 var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
@@ -48,6 +49,7 @@ var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
         setModalVisibility(false);
         restorePrevValue();
     };
+    var handleClear = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(null, { value: '' }); };
     var handleExiting = function (node) {
         var _a, _b;
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -64,13 +66,14 @@ var InputAutocompleteMobile = React.forwardRef(function (_a, ref) {
             onTouchMove: handleOptionsListTouchMove,
         },
         _b);
+    var clear = (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false;
     return (React.createElement(Component, __assign({ Field: AutocompleteMobileField }, restProps, (isBottomSheet
         ? { bottomSheetProps: componentProps }
         : { modalProps: componentProps }), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
             value: value,
             filterFn: searchFilterStub,
-            componentProps: __assign(__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false, ref: mergeRefs([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
-        }, Search: Input, ref: mergeRefs([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: __assign({ footer: (React.createElement(Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: __assign({ value: isOpen ? frozenValue.current : value }, restProps.fieldProps) })));
+            componentProps: __assign(__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
+        }, Search: Input, ref: mergeRefs([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: __assign({ footer: (React.createElement(Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: __assign({ value: isOpen ? frozenValue.current : value, clear: clear, onClear: clear ? handleClear : undefined }, restProps.fieldProps) })));
 });
 
 export { InputAutocompleteMobile };

package/esm/mobile/Component.modal.mobile.js

@@ -8,6 +8,7 @@ import '@alfalab/core-components-select/esm/mobile';
 import '@alfalab/core-components-select/esm/shared';
 import '../autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-input/esm/shared';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 import '../utils.js';

package/esm/mobile/index.js

@@ -9,6 +9,7 @@ import '@alfalab/core-components-select/esm/mobile';
 import '@alfalab/core-components-select/esm/shared';
 import '../autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/esm/mobile';
+import '@alfalab/core-components-input/esm/shared';
 import '@alfalab/core-components-shared/esm';
 import '@alfalab/hooks';
 import '../utils.js';

package/esm/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 5n9cn */
+/* hash: 1otm4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,6 +14,6 @@
 } :root {
 } :root {
 } :root {
-} .input-autocomplete__input_dae0s {
+} .input-autocomplete__input_fjopa {
     width: auto;
 }

package/index.js

@@ -18,6 +18,7 @@ require('lodash.throttle');
 require('@alfalab/core-components-select/mobile');
 require('./autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-input/shared');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 require('./utils.js');

package/mobile/Component.mobile.js

@@ -12,6 +12,7 @@ var shared = require('@alfalab/core-components-select/shared');
 var autocompleteMobileField_Component = require('../autocomplete-mobile-field/Component.js');
 var utils = require('../utils.js');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-input/shared');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 
@@ -22,7 +23,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
 
-var styles = {"input":"input-autocomplete__input_dae0s"};
+var styles = {"input":"input-autocomplete__input_fjopa"};
 require('./mobile.css')
 
 var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, ref) {
@@ -59,6 +60,7 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
         setModalVisibility(false);
         restorePrevValue();
     };
+    var handleClear = function () { return onInput === null || onInput === void 0 ? void 0 : onInput(null, { value: '' }); };
     var handleExiting = function (node) {
         var _a, _b;
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -75,13 +77,14 @@ var InputAutocompleteMobile = React__default.default.forwardRef(function (_a, re
             onTouchMove: handleOptionsListTouchMove,
         },
         _b);
+    var clear = (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false;
     return (React__default.default.createElement(Component, tslib.__assign({ Field: autocompleteMobileField_Component.AutocompleteMobileField }, restProps, (isBottomSheet
         ? { bottomSheetProps: componentProps }
         : { modalProps: componentProps }), { dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
             value: value,
             filterFn: utils.searchFilterStub,
-            componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.clear) !== null && _c !== void 0 ? _c : false, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
-        }, Search: Input, ref: mergeRefs__default.default([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: tslib.__assign({ value: isOpen ? frozenValue.current : value }, restProps.fieldProps) })));
+            componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, placeholder: placeholder }, inputProps), { className: cn__default.default(styles.input, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), clear: clear, ref: mergeRefs__default.default([searchInputRef, inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref]), onChange: onInput }),
+        }, Search: Input, ref: mergeRefs__default.default([targetRef, ref]), open: isOpen, onOpen: handleOpen, Arrow: Arrow, placeholder: placeholder, label: label, size: size, name: name, multiple: multiple, optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleCancel, handleApply: handleApply, clearText: '\u041E\u0442\u043C\u0435\u043D\u0430', applyText: '\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C', dataTestId: dataTestId })) }, restProps.optionsListProps), fieldProps: tslib.__assign({ value: isOpen ? frozenValue.current : value, clear: clear, onClear: clear ? handleClear : undefined }, restProps.fieldProps) })));
 });
 
 exports.InputAutocompleteMobile = InputAutocompleteMobile;

package/mobile/Component.modal.mobile.js

@@ -12,6 +12,7 @@ require('@alfalab/core-components-select/mobile');
 require('@alfalab/core-components-select/shared');
 require('../autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-input/shared');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 require('../utils.js');

package/mobile/index.js

@@ -13,6 +13,7 @@ require('@alfalab/core-components-select/mobile');
 require('@alfalab/core-components-select/shared');
 require('../autocomplete-mobile-field/Component.js');
 require('@alfalab/core-components-form-control/mobile');
+require('@alfalab/core-components-input/shared');
 require('@alfalab/core-components-shared');
 require('@alfalab/hooks');
 require('../utils.js');

package/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 5n9cn */
+/* hash: 1otm4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,6 +14,6 @@
 } :root {
 } :root {
 } :root {
-} .input-autocomplete__input_dae0s {
+} .input-autocomplete__input_fjopa {
     width: auto;
 }

package/modern/Component.responsive.js

@@ -13,6 +13,7 @@ import 'lodash.throttle';
 import '@alfalab/core-components-select/modern/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/modern/mobile';
+import '@alfalab/core-components-input/modern/shared';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
 import './utils.js';

package/modern/autocomplete-field/Component.js

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { InputDesktop } from '@alfalab/core-components-input/modern/desktop';
 
-const styles = {"arrow":"input-autocomplete__arrow_z2bi9","error":"input-autocomplete__error_z2bi9"};
+const styles = {"arrow":"input-autocomplete__arrow_wt0tr","error":"input-autocomplete__error_wt0tr"};
 require('./index.css')
 
 const AutocompleteField = ({ label, labelView = 'inner', placeholder, size, Arrow, Input = InputDesktop, value, error, success, hint, disabled, readOnly, onInput, inputProps = {}, innerProps, }) => {

package/modern/autocomplete-field/index.css

@@ -1,4 +1,4 @@
-/* hash: xfkzu */
-.input-autocomplete__arrow_z2bi9.input-autocomplete__error_z2bi9 ~ * {
+/* hash: wsrha */
+.input-autocomplete__arrow_wt0tr.input-autocomplete__error_wt0tr ~ * {
     display: none;
 }

package/modern/autocomplete-mobile-field/Component.d.ts

@@ -15,5 +15,5 @@ type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps
      */
     value?: string;
 };
-declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
+declare const AutocompleteMobileField: ({ size, open, disabled, value, innerProps, dataTestId, fieldClassName, labelView, placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors, ...restProps }: AutocompleteMobileFieldProps & FieldProps) => React.JSX.Element;
 export { AutocompleteMobileFieldProps, AutocompleteMobileField };

package/modern/autocomplete-mobile-field/Component.js

@@ -1,26 +1,31 @@
 import React, { useState, useRef } from 'react';
 import cn from 'classnames';
 import { FormControlMobile } from '@alfalab/core-components-form-control/modern/mobile';
+import { ClearButton } from '@alfalab/core-components-input/modern/shared';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"input-autocomplete__component_gg3o5","field":"input-autocomplete__field_gg3o5","disabled":"input-autocomplete__disabled_gg3o5","placeholder":"input-autocomplete__placeholder_gg3o5","contentWrapper":"input-autocomplete__contentWrapper_gg3o5","value":"input-autocomplete__value_gg3o5","focusVisible":"input-autocomplete__focusVisible_gg3o5"};
+const styles = {"component":"input-autocomplete__component_ymkry","field":"input-autocomplete__field_ymkry","disabled":"input-autocomplete__disabled_ymkry","placeholder":"input-autocomplete__placeholder_ymkry","contentWrapper":"input-autocomplete__contentWrapper_ymkry","value":"input-autocomplete__value_ymkry","focusVisible":"input-autocomplete__focusVisible_ymkry"};
 require('./index.css')
 
-const AutocompleteMobileField = ({ size = 'm', open, disabled, value, innerProps, dataTestId, fieldClassName, labelView = 'inner', placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, ...restProps }) => {
+const AutocompleteMobileField = ({ size = 'm', open, disabled, value, innerProps, dataTestId, fieldClassName, labelView = 'inner', placeholder, Arrow, valueRenderer, toggleMenu, setSelectedItems, selectedMultiple, FormControlComponent, rightAddons, error, readOnly, clear, onClear, onInput, colors = 'default', ...restProps }) => {
     const [focused, setFocused] = useState(false);
     const wrapperRef = useRef(null);
     const [focusVisible] = useFocus(wrapperRef, 'keyboard');
     const filled = Boolean(value);
     const showPlaceholder = placeholder && !filled && labelView === 'outer';
+    const clearButtonVisible = clear && filled && !disabled && !readOnly;
     const { tabIndex, ...restInnerProps } = innerProps;
     return (React.createElement("div", { className: styles.component, ref: wrapperRef, onFocus: () => setFocused(true), onBlur: () => setFocused(false) },
         React.createElement(FormControlMobile, { fieldClassName: cn(styles.field, fieldClassName, {
                 [styles.disabled]: disabled,
                 [styles.focusVisible]: focusVisible,
-            }), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, rightAddons: Arrow, dataTestId: getDataTestId(dataTestId, 'form-control'), 
+            }), block: true, size: size, focused: focused, disabled: disabled, filled: filled, labelView: labelView, dataTestId: getDataTestId(dataTestId, 'form-control'), 
             // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
-            tabIndex: open ? undefined : tabIndex, ...restProps, ...restInnerProps },
+            tabIndex: open ? undefined : tabIndex, ...restProps, ...restInnerProps, readOnly: readOnly, colors: colors, error: error, rightAddons: (Arrow || rightAddons || clearButtonVisible) && (React.createElement(React.Fragment, null,
+                clearButtonVisible && (React.createElement(ClearButton, { onClick: onClear, disabled: disabled, colors: colors })),
+                rightAddons,
+                Arrow)) },
             React.createElement("div", { className: styles.contentWrapper },
                 showPlaceholder && React.createElement("span", { className: styles.placeholder }, placeholder),
                 filled && React.createElement("div", { className: styles.value }, value)))));

package/modern/autocomplete-mobile-field/index.css

@@ -1,4 +1,4 @@
-/* hash: r7aus */
+/* hash: ru4db */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -18,16 +18,16 @@
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-} .input-autocomplete__component_gg3o5 {
+} .input-autocomplete__component_ymkry {
     width: 100%;
     outline: none;
-} .input-autocomplete__field_gg3o5:not(.input-autocomplete__disabled_gg3o5) {
+} .input-autocomplete__field_ymkry:not(.input-autocomplete__disabled_ymkry) {
     cursor: pointer;
-} .input-autocomplete__disabled_gg3o5 {
+} .input-autocomplete__disabled_ymkry {
     cursor: var(--disabled-cursor);
-} .input-autocomplete__placeholder_gg3o5 {
+} .input-autocomplete__placeholder_ymkry {
     color: var(--color-light-text-secondary);
-} .input-autocomplete__contentWrapper_gg3o5 {
+} .input-autocomplete__contentWrapper_ymkry {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -36,11 +36,11 @@
     text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
-} .input-autocomplete__value_gg3o5 {
+} .input-autocomplete__value_ymkry {
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-} .input-autocomplete__focusVisible_gg3o5 {
+} .input-autocomplete__focusVisible_ymkry {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/autocomplete-mobile-field/index.js

@@ -2,5 +2,6 @@ export { AutocompleteMobileField } from './Component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-form-control/modern/mobile';
+import '@alfalab/core-components-input/modern/shared';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';

package/modern/index.js

@@ -13,6 +13,7 @@ import 'lodash.throttle';
 import '@alfalab/core-components-select/modern/mobile';
 import './autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/modern/mobile';
+import '@alfalab/core-components-input/modern/shared';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
 import './utils.js';

package/modern/mobile/Component.mobile.js

@@ -7,10 +7,11 @@ import { Footer } from '@alfalab/core-components-select/modern/shared';
 import { AutocompleteMobileField } from '../autocomplete-mobile-field/Component.js';
 import { searchFilterStub } from '../utils.js';
 import '@alfalab/core-components-form-control/modern/mobile';
+import '@alfalab/core-components-input/modern/shared';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
 
-const styles = {"input":"input-autocomplete__input_dae0s"};
+const styles = {"input":"input-autocomplete__input_fjopa"};
 require('./mobile.css')
 
 const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow = null, label, placeholder = '', size = 's', open: openProp, onInput, onOpen, multiple, inputProps, isBottomSheet = true, dataTestId, transitionProps, ...restProps }, ref) => {
@@ -42,6 +43,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow =
         setModalVisibility(false);
         restorePrevValue();
     };
+    const handleClear = () => onInput?.(null, { value: '' });
     const handleExiting = (node) => {
         targetRef.current?.focus();
         transitionProps?.onExiting?.(node);
@@ -59,6 +61,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow =
             onTouchMove: handleOptionsListTouchMove,
         },
     };
+    const clear = inputProps?.clear ?? false;
     return (React.createElement(Component, { Field: AutocompleteMobileField, ...restProps, ...(isBottomSheet
             ? { bottomSheetProps: componentProps }
             : { modalProps: componentProps }), dataTestId: dataTestId, useWithApplyHook: false, showSearch: true, searchProps: {
@@ -69,7 +72,7 @@ const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow =
                 placeholder,
                 ...inputProps,
                 className: cn(styles.input, inputProps?.className),
-                clear: inputProps?.clear ?? false,
+                clear,
                 ref: mergeRefs([searchInputRef, inputProps?.ref]),
                 onChange: onInput,
             },
@@ -78,6 +81,8 @@ const InputAutocompleteMobile = React.forwardRef(({ Input, value, name, Arrow =
             ...restProps.optionsListProps,
         }, fieldProps: {
             value: isOpen ? frozenValue.current : value,
+            clear,
+            onClear: clear ? handleClear : undefined,
             ...restProps.fieldProps,
         } }));
 });

package/modern/mobile/Component.modal.mobile.js

@@ -7,6 +7,7 @@ import '@alfalab/core-components-select/modern/mobile';
 import '@alfalab/core-components-select/modern/shared';
 import '../autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/modern/mobile';
+import '@alfalab/core-components-input/modern/shared';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
 import '../utils.js';

package/modern/mobile/index.js

@@ -8,6 +8,7 @@ import '@alfalab/core-components-select/modern/mobile';
 import '@alfalab/core-components-select/modern/shared';
 import '../autocomplete-mobile-field/Component.js';
 import '@alfalab/core-components-form-control/modern/mobile';
+import '@alfalab/core-components-input/modern/shared';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/hooks';
 import '../utils.js';

package/modern/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 5n9cn */
+/* hash: 1otm4 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,6 +14,6 @@
 } :root {
 } :root {
 } :root {
-} .input-autocomplete__input_dae0s {
+} .input-autocomplete__input_fjopa {
     width: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-input-autocomplete",
-    "version": "11.0.3",
+    "version": "11.1.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,10 +14,10 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-form-control": "^11.1.0",
-        "@alfalab/core-components-input": "^13.0.2",
-        "@alfalab/core-components-popover": "^6.1.0",
-        "@alfalab/core-components-select": "^16.0.3",
+        "@alfalab/core-components-form-control": "^12.0.0",
+        "@alfalab/core-components-input": "^14.0.0",
+        "@alfalab/core-components-popover": "^6.2.0",
+        "@alfalab/core-components-select": "^17.0.0",
         "@alfalab/core-components-shared": "^0.8.0",
         "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",

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

@@ -5,6 +5,7 @@ import {
     FormControlMobile,
     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 { getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
@@ -42,6 +43,13 @@ export const AutocompleteMobileField = ({
     setSelectedItems,
     selectedMultiple,
     FormControlComponent,
+    rightAddons,
+    error,
+    readOnly,
+    clear,
+    onClear,
+    onInput,
+    colors = 'default',
     ...restProps
 }: AutocompleteMobileFieldProps & FieldProps) => {
     const [focused, setFocused] = useState(false);
@@ -52,6 +60,7 @@ export const AutocompleteMobileField = ({
 
     const filled = Boolean(value);
     const showPlaceholder = placeholder && !filled && labelView === 'outer';
+    const clearButtonVisible = clear && filled && !disabled && !readOnly;
 
     const { tabIndex, ...restInnerProps } = innerProps;
 
@@ -73,12 +82,29 @@ export const AutocompleteMobileField = ({
                 disabled={disabled}
                 filled={filled}
                 labelView={labelView}
-                rightAddons={Arrow}
                 dataTestId={getDataTestId(dataTestId, 'form-control')}
                 // downshift устанавливает фокус на таргет поле после выбора опции, не даем ему это сделать пока открыт список, иначе поле поиска будет терять фокус
                 tabIndex={open ? undefined : tabIndex}
                 {...restProps}
                 {...restInnerProps}
+                readOnly={readOnly}
+                colors={colors}
+                error={error}
+                rightAddons={
+                    (Arrow || rightAddons || clearButtonVisible) && (
+                        <React.Fragment>
+                            {clearButtonVisible && (
+                                <ClearButton
+                                    onClick={onClear}
+                                    disabled={disabled}
+                                    colors={colors}
+                                />
+                            )}
+                            {rightAddons}
+                            {Arrow}
+                        </React.Fragment>
+                    )
+                }
             >
                 <div className={styles.contentWrapper}>
                     {showPlaceholder && <span className={styles.placeholder}>{placeholder}</span>}

package/src/mobile/Component.mobile.tsx

@@ -85,6 +85,8 @@ export const InputAutocompleteMobile = React.forwardRef(
             restorePrevValue();
         };
 
+        const handleClear = () => onInput?.(null, { value: '' });
+
         const handleExiting = (node: HTMLElement) => {
             targetRef.current?.focus();
             transitionProps?.onExiting?.(node);
@@ -108,6 +110,8 @@ export const InputAutocompleteMobile = React.forwardRef(
             },
         };
 
+        const clear = inputProps?.clear ?? false;
+
         return (
             <Component
                 Field={AutocompleteMobileField}
@@ -126,7 +130,7 @@ export const InputAutocompleteMobile = React.forwardRef(
                         placeholder,
                         ...inputProps,
                         className: cn(styles.input, inputProps?.className),
-                        clear: inputProps?.clear ?? false,
+                        clear,
                         ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),
                         onChange: onInput,
                     },
@@ -156,6 +160,8 @@ export const InputAutocompleteMobile = React.forwardRef(
                 }}
                 fieldProps={{
                     value: isOpen ? frozenValue.current : value,
+                    clear,
+                    onClear: clear ? handleClear : undefined,
                     ...(restProps.fieldProps as AnyObject),
                 }}
             />