@ozen-ui/kit 0.69.0 → 0.71.0

package/__inner__/esm/components/AutocompleteBase/AutocompleteBase.js

@@ -4,7 +4,6 @@ import './modules/AutocompleteBaseInput/AutocompleteBaseInput.css';
 import './modules/AutocompleteBaseInputTag/AutocompleteBaseInputTag.css';
 import React, { useRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { renderContent } from '../../utils/renderContent';
 import { AutocompleteBaseContext } from './AutocompleteBaseContext';
 import { AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT, AUTOCOMPLETE_BASE_DEFAULT_DISABLED, AUTOCOMPLETE_BASE_DEFAULT_ERROR, AUTOCOMPLETE_BASE_DEFAULT_LOADING, AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE, AUTOCOMPLETE_BASE_DEFAULT_SIZE, } from './constants';
 import { useAutocompleteBaseDropdown, useAutocompleteBaseSearch, useAutocompleteBaseInput, useAutocompleteBaseInputEvents, useAutocompleteBaseOptions, useAutocompleteBaseValue, } from './hooks';
@@ -14,7 +13,7 @@ export var AutocompleteBase = function (inProps) {
         props: inProps,
         name: 'AutocompleteBase',
     });
-    var renderDropdown = props.renderDropdown, renderInput = props.renderInput, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange;
+    var dropdown = props.dropdown, input = props.input, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange;
     var anchorRef = useRef(null);
     var inputRef = useRef(null);
     var dropdownControl = useAutocompleteBaseDropdown({
@@ -25,6 +24,10 @@ export var AutocompleteBase = function (inProps) {
     });
     var searchControl = useAutocompleteBaseSearch(searchFunctionProp);
     var prepareOption = function (option) { return (__assign(__assign({}, prepareOptionProp(option)), { raw: option })); };
+    var options = optionsProp.map(prepareOption);
+    var filteredOptions = searchControl.isActive
+        ? searchControl.search(options)
+        : options;
     var inputControl = useAutocompleteBaseInput({
         inputValue: inputValueProp,
         onChange: function (event, value) {
@@ -33,6 +36,7 @@ export var AutocompleteBase = function (inProps) {
     });
     var valueControl = useAutocompleteBaseValue({
         value: valueProp,
+        options: options,
         defaultValue: defaultValue,
         onChange: function (event, value, params) {
             onChange === null || onChange === void 0 ? void 0 : onChange(event, value, params);
@@ -47,10 +51,9 @@ export var AutocompleteBase = function (inProps) {
         multiple: multiple,
     });
     var optionsControl = useAutocompleteBaseOptions({
-        options: optionsProp,
-        prepare: prepareOption,
+        options: options,
+        filteredOptions: filteredOptions,
         valueControl: valueControl,
-        searchControl: searchControl,
         multiple: multiple,
     });
     var inputEventsControl = useAutocompleteBaseInputEvents({
@@ -65,7 +68,6 @@ export var AutocompleteBase = function (inProps) {
         valueControl.setValue(event, null, {
             source: 'unknown',
         });
-        inputControl.setValue(null, '');
     };
     var contextValue = {
         anchorRef: anchorRef,
@@ -84,12 +86,6 @@ export var AutocompleteBase = function (inProps) {
         error: error,
     };
     return (React.createElement(AutocompleteBaseContext.Provider, { value: contextValue },
-        renderContent({
-            content: renderInput,
-            props: {},
-        }),
-        renderContent({
-            content: renderDropdown,
-            props: {},
-        })));
+        input,
+        dropdown));
 };

package/__inner__/esm/components/AutocompleteBase/entities/index.d.ts

@@ -3,7 +3,6 @@ export * from './input';
 export * from './open';
 export * from './option';
 export * from './anchorRef';
-export * from './renderDropdown';
 export * from './searchFunction';
 export * from './size';
 export * from './value';

package/__inner__/esm/components/AutocompleteBase/entities/index.js

@@ -3,7 +3,6 @@ export * from './input';
 export * from './open';
 export * from './option';
 export * from './anchorRef';
-export * from './renderDropdown';
 export * from './searchFunction';
 export * from './size';
 export * from './value';

package/__inner__/esm/components/AutocompleteBase/entities/input/index.d.ts

@@ -1,5 +1,4 @@
 export * from './changeEvent';
 export * from './onChange';
 export * from './ref';
-export * from './render';
 export * from './value';

package/__inner__/esm/components/AutocompleteBase/entities/input/index.js

@@ -1,5 +1,4 @@
 export * from './changeEvent';
 export * from './onChange';
 export * from './ref';
-export * from './render';
 export * from './value';

package/__inner__/esm/components/AutocompleteBase/entities/option/option.d.ts

@@ -1,10 +1,12 @@
-export type AutocompleteBaseDefaultOption = {
-    id: string | number;
+export type AutocompleteBaseOptionId = string | number;
+export type AutocompleteBaseDefaultOptionObject = {
+    id: AutocompleteBaseOptionId;
     label: string;
     disabled?: boolean;
-} | string;
+};
+export type AutocompleteBaseDefaultOption = AutocompleteBaseDefaultOptionObject | string;
 export type AutocompleteBaseInternalOption<RawOption> = {
-    id: string | number;
+    id: AutocompleteBaseOptionId;
     label: string;
     disabled: boolean;
     raw: RawOption;

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseInputEvents/useAutocompleteBaseInputEvents.js

@@ -1,4 +1,4 @@
-import { __read, __spreadArray } from "tslib";
+import { __read } from "tslib";
 import { useEffect } from 'react';
 import { useStoredValue } from '../../../../hooks/useStoredValue';
 import { isKeys } from '../../../../utils/isKeys';
@@ -9,18 +9,18 @@ export var useAutocompleteBaseInputEvents = function (_a) {
     var observableValuesAllowCustomValueSync = (function () {
         if (isMultipleInternalValue(valueControl.value, multiple) ||
             !valueControl.value) {
-            return [];
+            return '';
         }
-        var observableValues = [];
+        var withoutRawValue = {};
         Object.entries(valueControl.value).forEach(function (_a) {
             var _b = __read(_a, 2), _key = _b[0], value = _b[1];
             var key = _key;
             if (key === 'raw') {
                 return;
             }
-            observableValues.push(value);
+            withoutRawValue[key] = value;
         });
-        return observableValues;
+        return JSON.stringify(withoutRawValue);
     })();
     useEffect(function () {
         var _a;
@@ -34,7 +34,7 @@ export var useAutocompleteBaseInputEvents = function (_a) {
                 inputControl.setValue(null, lastInputValue.current);
             }
         }
-    }, __spreadArray(__spreadArray([], __read(observableValuesAllowCustomValueSync), false), [allowCustomValue], false));
+    }, [observableValuesAllowCustomValueSync, allowCustomValue]);
     var onChange = function (event) {
         var value = event.target.value;
         // Открываем список при вводе первого символа (при условии, что список еще не открыт)
@@ -69,6 +69,7 @@ export var useAutocompleteBaseInputEvents = function (_a) {
     };
     /** Управление элементом контроля через клавиатуру */
     var onKeyDown = function (event) {
+        var _a;
         if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !dropdownControl.isOpen) {
             event.preventDefault();
             dropdownControl.open();
@@ -78,7 +79,7 @@ export var useAutocompleteBaseInputEvents = function (_a) {
             isKeys(event, ['Backspace']) &&
             !inputControl.value) {
             if (value) {
-                valueControl.setValue(event, value[value.length - 1] || null, {
+                valueControl.setValue(event, ((_a = value[value.length - 1]) === null || _a === void 0 ? void 0 : _a.id) || null, {
                     source: 'input',
                 });
             }

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseOptions/useAutocompleteBaseOptions.d.ts

@@ -1,11 +1,9 @@
-import type { AutocompleteBasePrepareOption } from '../../entities';
-import type { AutocompleteBaseSearchControl } from '../useAutocompleteBaseSearch';
+import type { AutocompleteBaseInternalOption } from '../../entities';
 import type { AutocompleteBaseValueControl } from '../useAutocompleteBaseValue';
 import type { AutocompleteBaseOptionsControl } from './types';
-export declare const useAutocompleteBaseOptions: <Option, Multiple extends boolean>({ options: optionsProp, prepare, searchControl, valueControl, multiple, }: {
-    options: Option[];
-    prepare: AutocompleteBasePrepareOption<Option>;
-    searchControl: AutocompleteBaseSearchControl<Option>;
+export declare const useAutocompleteBaseOptions: <Option, Multiple extends boolean>({ options, filteredOptions, valueControl, multiple, }: {
+    options: AutocompleteBaseInternalOption<Option>[];
+    filteredOptions: AutocompleteBaseInternalOption<Option>[];
     valueControl: AutocompleteBaseValueControl<Option, Multiple>;
     multiple: boolean;
 }) => AutocompleteBaseOptionsControl<Option>;

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseOptions/useAutocompleteBaseOptions.js

@@ -1,10 +1,6 @@
 import { isMultipleInternalValue } from '../../utils';
 export var useAutocompleteBaseOptions = function (_a) {
-    var optionsProp = _a.options, prepare = _a.prepare, searchControl = _a.searchControl, valueControl = _a.valueControl, multiple = _a.multiple;
-    var options = optionsProp.map(prepare);
-    var filteredOptions = searchControl.isActive
-        ? searchControl.search(options)
-        : options;
+    var options = _a.options, filteredOptions = _a.filteredOptions, valueControl = _a.valueControl, multiple = _a.multiple;
     var isSelected = function (option) {
         var _a, _b, _c;
         if (isMultipleInternalValue(valueControl.value, multiple)) {

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/types.d.ts

@@ -1,12 +1,12 @@
 import type { SyntheticEvent } from 'react';
-import type { AutocompleteBaseInternalValue, AutocompleteBaseInternalOption, AutocompleteBaseOnChangeSource } from '../../entities';
+import type { AutocompleteBaseInternalValue, AutocompleteBaseOnChangeSource, AutocompleteBaseOptionId } from '../../entities';
 export type AutocompleteBaseValueControlSetValueParams = {
     source: AutocompleteBaseOnChangeSource;
 };
-export type AutocompleteBaseValueControlSetValue<Option> = (event: SyntheticEvent | KeyboardEvent | null, option: AutocompleteBaseInternalOption<Option> | null, params: AutocompleteBaseValueControlSetValueParams) => void;
+export type AutocompleteBaseValueControlSetValue = (event: SyntheticEvent | KeyboardEvent | null, optionId: AutocompleteBaseOptionId | null, params: AutocompleteBaseValueControlSetValueParams) => void;
 export type AutocompleteBaseValueControl<Option, Multiple extends boolean> = {
     value: AutocompleteBaseInternalValue<Option, Multiple> | undefined;
-    setValue: AutocompleteBaseValueControlSetValue<Option>;
+    setValue: AutocompleteBaseValueControlSetValue;
     hasValue: boolean;
     selectedOptionsLength: number;
 };

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/useAutocompleteBaseValue.d.ts

@@ -1,9 +1,10 @@
-import type { AutocompleteBaseValue, AutocompleteBasePrepareOption, AutocompleteBaseOnChange } from '../../entities';
+import type { AutocompleteBaseValue, AutocompleteBasePrepareOption, AutocompleteBaseOnChange, AutocompleteBaseInternalOption } from '../../entities';
 import type { AutocompleteBaseProps } from '../../types';
 import type { AutocompleteBaseInputControl } from '../useAutocompleteBaseInput';
 import type { AutocompleteBaseSearchControl } from '../useAutocompleteBaseSearch';
 import type { AutocompleteBaseValueControl } from './types';
-export declare const useAutocompleteBaseValue: <Option, Multiple extends boolean>({ value: valueProp, defaultValue, onChange: onChangeProp, inProps, prepareOption, searchControl, multiple, inputControl, }: {
+export declare const useAutocompleteBaseValue: <Option, Multiple extends boolean>({ value: valueProp, options, defaultValue, onChange: onChangeProp, inProps, prepareOption, searchControl, multiple, inputControl, }: {
+    options: AutocompleteBaseInternalOption<Option>[];
     value: AutocompleteBaseValue<Option, Multiple> | undefined;
     defaultValue: AutocompleteBaseValue<Option, Multiple> | undefined;
     onChange: AutocompleteBaseOnChange<Option, Multiple>;

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/useAutocompleteBaseValue.js

@@ -5,7 +5,7 @@ import { isNotNil } from '../../../../utils/isNotNil';
 import { isMultipleInternalValue, isMultipleProps, isSingleProps, } from '../../utils';
 export var useAutocompleteBaseValue = function (_a) {
     var _b;
-    var valueProp = _a.value, defaultValue = _a.defaultValue, onChangeProp = _a.onChange, inProps = _a.inProps, prepareOption = _a.prepareOption, searchControl = _a.searchControl, multiple = _a.multiple, inputControl = _a.inputControl;
+    var valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, onChangeProp = _a.onChange, inProps = _a.inProps, prepareOption = _a.prepareOption, searchControl = _a.searchControl, multiple = _a.multiple, inputControl = _a.inputControl;
     var prepareValue = function (value) {
         if (!value) {
             return null;
@@ -27,9 +27,15 @@ export var useAutocompleteBaseValue = function (_a) {
         setValueState(prepareValue(option));
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event, option, params);
     };
-    var setValue = function (event, option, paramsProp) {
+    var setValue = function (event, optionId, paramsProp) {
         var _a, _b, _c, _d;
         var source = paramsProp.source;
+        var option = optionId === null
+            ? null
+            : options.find(function (option) { return option.id === optionId; });
+        if (option === undefined) {
+            return;
+        }
         var inputValue = '';
         var params = __assign(__assign({}, inProps), { onChange: onChange });
         if (isMultipleProps(params) &&
@@ -39,13 +45,12 @@ export var useAutocompleteBaseValue = function (_a) {
             }
             else {
                 var value_1 = valueState !== null && valueState !== void 0 ? valueState : [];
-                var optionId_1 = option.id;
-                var optionIsSelected_1 = value_1.find(function (item) { return item.id === optionId_1; });
+                var optionIsSelected_1 = value_1.find(function (item) { return item.id === optionId; });
                 var result = (function () {
                     if (optionIsSelected_1) {
                         var options_1 = [];
                         value_1.forEach(function (option) {
-                            if (option.id !== optionId_1) {
+                            if (option.id !== optionId) {
                                 options_1.push(option.raw);
                             }
                         });

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.d.ts

@@ -1,2 +1,2 @@
 import type { AutocompleteBaseDropdownBaseProps } from './types';
-export declare const AutocompleteBaseDropdown: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<AutocompleteBaseDropdownBaseProps, import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div">>;
+export declare const AutocompleteBaseDropdown: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<AutocompleteBaseDropdownBaseProps, import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div", "as">, "as">;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/constants.d.ts

@@ -1 +1 @@
-export declare const AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div">;
+export declare const AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div", "as">;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.d.ts

@@ -1,2 +1,2 @@
-import type { AutocompleteInputComponent } from './types';
-export declare const AutocompleteBaseInput: AutocompleteInputComponent;
+import type { AutocompleteBaseInputComponent } from './types';
+export declare const AutocompleteBaseInput: AutocompleteBaseInputComponent;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.js

@@ -13,7 +13,7 @@ var AutocompleteBaseInputRender = function (inProps, ref) {
         props: inProps,
         name: 'AutocompleteBaseInput',
     });
-    var label = props.label, openText = props.openText, clearText = props.clearText, closeText = props.closeText, className = props.className, bodyProps = props.bodyProps, inputProps = props.inputProps, renderSuffix = props.renderSuffix, _b = props.suffixPosition, suffixPosition = _b === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION : _b, renderBefore = props.renderBefore, placeholder = props.placeholder, limitTags = props.limitTags, _c = props.showClearButton, showClearButton = _c === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON : _c, _d = props.showChevron, showChevron = _d === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON : _d, renderTag = props.renderTag, renderMoreTag = props.renderMoreTag, labelProps = props.labelProps, other = __rest(props, ["label", "openText", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderSuffix", "suffixPosition", "renderBefore", "placeholder", "limitTags", "showClearButton", "showChevron", "renderTag", "renderMoreTag", "labelProps"]);
+    var label = props.label, openText = props.openText, clearText = props.clearText, closeText = props.closeText, className = props.className, bodyProps = props.bodyProps, inputProps = props.inputProps, suffix = props.suffix, _b = props.suffixPosition, suffixPosition = _b === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION : _b, before = props.before, placeholder = props.placeholder, limitTags = props.limitTags, _c = props.showClearButton, showClearButton = _c === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON : _c, _d = props.showChevron, showChevron = _d === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON : _d, renderTag = props.renderTag, renderMoreTag = props.renderMoreTag, labelProps = props.labelProps, other = __rest(props, ["label", "openText", "clearText", "closeText", "className", "bodyProps", "inputProps", "suffix", "suffixPosition", "before", "placeholder", "limitTags", "showClearButton", "showChevron", "renderTag", "renderMoreTag", "labelProps"]);
     var _e = useAutocompleteBaseContext(), valueControl = _e.valueControl, inputControl = _e.inputControl, inputEventsControl = _e.inputEventsControl, inputRef = _e.inputRef, anchorRef = _e.anchorRef, size = _e.size, multiple = _e.multiple, disabled = _e.disabled, dropdownControl = _e.dropdownControl, error = _e.error;
     var open = dropdownControl.isOpen;
     var inputMultiRef = useMultiRef([inputRef, ref]);
@@ -24,7 +24,7 @@ var AutocompleteBaseInputRender = function (inProps, ref) {
         }
         return (React.createElement("input", __assign({}, other, { ref: ref, className: cnAutocompleteBaseInput('Input', [className]) })));
     };
-    return (React.createElement(Input, __assign({}, other, { size: size, disabled: disabled, label: label, value: (_a = inputControl.value) !== null && _a !== void 0 ? _a : '', onChange: inputEventsControl.onChange, placeholder: placeholder, renderLeft: renderBefore, renderRight: React.createElement(AutocompleteBaseRenderRight, { openText: openText, clearText: clearText, closeText: closeText, renderSuffix: renderSuffix, suffixPosition: suffixPosition, showChevron: showChevron, showClearButton: showClearButton }), labelProps: __assign({ shrink: !!valueControl.selectedOptionsLength }, labelProps), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: useMultiRef([
+    return (React.createElement(Input, __assign({}, other, { size: size, disabled: disabled, label: label, value: (_a = inputControl.value) !== null && _a !== void 0 ? _a : '', onChange: inputEventsControl.onChange, placeholder: placeholder, renderLeft: before, renderRight: React.createElement(AutocompleteBaseRenderRight, { openText: openText, clearText: clearText, closeText: closeText, suffix: suffix, suffixPosition: suffixPosition, showChevron: showChevron, showClearButton: showClearButton }), labelProps: __assign({ shrink: !!valueControl.selectedOptionsLength }, labelProps), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: useMultiRef([
                 anchorRef,
                 bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref,
             ]) }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onClick: function (event) {

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/AutocompleteBaseInputMultiple.js

@@ -93,7 +93,7 @@ var AutocompleteInputMultipleRender = function (_a, ref) {
                                     return;
                                 }
                                 event.preventDefault();
-                                valueControl.setValue(event, option, {
+                                valueControl.setValue(event, option.id, {
                                     source: 'input',
                                 });
                             } },

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/AutocompleteBaseRenderRight.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { AutocompleteBaseRenderRightProps } from './types';
-export declare const AutocompleteBaseRenderRight: ({ openText, clearText, closeText, renderSuffix, suffixPosition, showClearButton, showChevron, className, ...other }: AutocompleteBaseRenderRightProps) => React.JSX.Element;
+export declare const AutocompleteBaseRenderRight: ({ openText, clearText, closeText, suffix, suffixPosition, showClearButton, showChevron, className, ...other }: AutocompleteBaseRenderRightProps) => React.JSX.Element;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/AutocompleteBaseRenderRight.js

@@ -1,20 +1,16 @@
 import { __assign, __read, __rest } from "tslib";
 import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@ozen-ui/icons';
-import { renderContent } from '../../../../../../utils/renderContent';
 import { useFieldControl } from '../../../../../FieldControl';
 import { IconButton } from '../../../../../IconButtonNext';
 import { useAutocompleteBaseContext } from '../../../../AutocompleteBaseContext';
 import { cnAutocompleteBaseInput } from '../../classNames';
 export var AutocompleteBaseRenderRight = function (_a) {
-    var openText = _a.openText, clearText = _a.clearText, closeText = _a.closeText, renderSuffix = _a.renderSuffix, suffixPosition = _a.suffixPosition, showClearButton = _a.showClearButton, showChevron = _a.showChevron, className = _a.className, other = __rest(_a, ["openText", "clearText", "closeText", "renderSuffix", "suffixPosition", "showClearButton", "showChevron", "className"]);
+    var openText = _a.openText, clearText = _a.clearText, closeText = _a.closeText, suffix = _a.suffix, suffixPosition = _a.suffixPosition, showClearButton = _a.showClearButton, showChevron = _a.showChevron, className = _a.className, other = __rest(_a, ["openText", "clearText", "closeText", "suffix", "suffixPosition", "showClearButton", "showChevron", "className"]);
     var _b = useAutocompleteBaseContext(), dropdownControl = _b.dropdownControl, valueControl = _b.valueControl, disabled = _b.disabled, size = _b.size, clear = _b.clear;
     var open = dropdownControl.isOpen;
     var _c = __read(useFieldControl(), 1), _d = _c[0], focused = _d.focused, hovered = _d.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && valueControl.hasValue;
-    var renderedSuffix = renderContent({
-        content: renderSuffix,
-    });
     var clearButton = (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, variant: "function", title: clearText, "aria-label": clearText, onClick: function (event) {
             event.preventDefault();
             clear(event);
@@ -23,12 +19,12 @@ export var AutocompleteBaseRenderRight = function (_a) {
         }), compressed: true }));
     return (React.createElement("div", __assign({ className: cnAutocompleteBaseInput('RenderRight', [className]) }, other),
         showClearButton && !isVisibleClearButton && clearButton,
-        suffixPosition === 'before' && renderedSuffix,
+        suffixPosition === 'before' && suffix,
         showClearButton && isVisibleClearButton && clearButton,
-        suffixPosition === 'between' && renderedSuffix,
+        suffixPosition === 'between' && suffix,
         showChevron && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? ChevronUpIcon : ChevronDownIcon, onClick: function (event) {
                 event.preventDefault();
                 dropdownControl.toggle();
             }, compressed: true })),
-        suffixPosition === 'after' && renderedSuffix));
+        suffixPosition === 'after' && suffix));
 };

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/types.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentProps } from 'react';
-import type { AutocompleteBaseRenderSuffix, AutocompleteBaseSuffixPosition } from '../../entities';
+import type { ComponentProps, ReactNode } from 'react';
+import type { AutocompleteBaseSuffixPosition } from '../../entities';
 export type AutocompleteBaseRenderRightProps = {
     suffixPosition: AutocompleteBaseSuffixPosition;
     showClearButton: boolean;
     showChevron: boolean;
-    renderSuffix?: AutocompleteBaseRenderSuffix;
+    suffix?: ReactNode;
     openText?: string;
     clearText?: string;
     closeText?: string;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/index.d.ts

@@ -1,5 +1,3 @@
-export * from './renderBefore';
 export * from './renderMoreTag';
-export * from './renderSuffix';
 export * from './renderTag';
 export * from './suffixPosition';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/index.js

@@ -1,5 +1,3 @@
-export * from './renderBefore';
 export * from './renderMoreTag';
-export * from './renderSuffix';
 export * from './renderTag';
 export * from './suffixPosition';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/index.d.ts

@@ -1,3 +1,4 @@
 export * from './entities';
+export * from './constants';
 export * from './AutocompleteBaseInput';
 export * from './types';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/index.js

@@ -1,3 +1,4 @@
 export * from './entities';
+export * from './constants';
 export * from './AutocompleteBaseInput';
 export * from './types';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/types.d.ts

@@ -1,7 +1,7 @@
-import type { ReactElement, Ref } from 'react';
+import type { ReactElement, ReactNode, Ref } from 'react';
 import type { InputProps, InputRef } from '../../../Input';
 import type { AutocompleteBaseDefaultOption } from '../../entities';
-import type { AutocompleteBaseSuffixPosition, AutocompleteBaseRenderSuffix, AutocompleteBaseRenderBefore, AutocompleteBaseRenderMoreTag, AutocompleteBaseRenderTag } from './entities';
+import type { AutocompleteBaseSuffixPosition, AutocompleteBaseRenderMoreTag, AutocompleteBaseRenderTag } from './entities';
 export type AutocompleteInputRef = InputRef;
 export type AutocompleteBaseInputProps<Option = AutocompleteBaseDefaultOption> = Omit<InputProps, 'value' | 'onChange' | 'size' | 'disabled' | 'renderRight' | 'renderLeft' | 'error'> & {
     /** Текст для кнопки открытия выпадающего списка */
@@ -22,10 +22,10 @@ export type AutocompleteBaseInputProps<Option = AutocompleteBaseDefaultOption> =
     /** Функция для кастомизации тега «more», который отображается в случае скрытия элементов в компоненте с множественным выбором */
     renderMoreTag?: AutocompleteBaseRenderMoreTag<Option>;
     /** Компонент справа */
-    renderSuffix?: AutocompleteBaseRenderSuffix;
+    suffix?: ReactNode;
     /** Компонент слева */
-    renderBefore?: AutocompleteBaseRenderBefore;
+    before?: ReactNode;
     /** Положение компонента справа */
     suffixPosition?: AutocompleteBaseSuffixPosition;
 };
-export type AutocompleteInputComponent = <Option = AutocompleteBaseDefaultOption>(props: AutocompleteBaseInputProps<Option>) => ReactElement | null;
+export type AutocompleteBaseInputComponent = <Option = AutocompleteBaseDefaultOption>(props: AutocompleteBaseInputProps<Option>) => ReactElement | null;

package/__inner__/esm/components/AutocompleteBase/types.d.ts

@@ -1,4 +1,5 @@
-import type { AutocompleteBaseOnInputChange, AutocompleteBaseOnChange, AutocompleteBaseRenderInput, AutocompleteBaseOnClose, AutocompleteBaseOnOpen, AutocompleteBaseDefaultOption, AutocompleteBasePropPrepareOption, AutocompleteBaseSearchFunction, AutocompleteBaseSize, AutocompleteBaseValue, AutocompleteBaseRenderDropdown } from './entities';
+import type { ReactNode } from 'react';
+import type { AutocompleteBaseOnInputChange, AutocompleteBaseOnChange, AutocompleteBaseOnClose, AutocompleteBaseOnOpen, AutocompleteBaseDefaultOption, AutocompleteBasePropPrepareOption, AutocompleteBaseSearchFunction, AutocompleteBaseSize, AutocompleteBaseValue } from './entities';
 export type AutocompleteBaseProps<Option = AutocompleteBaseDefaultOption, Multiple extends boolean = false> = {
     /** Если `true` из списка можно выбрать несколько вариантов */
     multiple?: Multiple;
@@ -30,10 +31,10 @@ export type AutocompleteBaseProps<Option = AutocompleteBaseDefaultOption, Multip
     loading?: boolean;
     /** Функция поиска */
     searchFunction?: AutocompleteBaseSearchFunction<Option>;
-    /** Функция для кастомизации текстового поля */
-    renderInput: AutocompleteBaseRenderInput;
-    /** Функция для кастомизации выпадающего элемента для выбора значения */
-    renderDropdown: AutocompleteBaseRenderDropdown;
+    /** Компонент текстового поля */
+    input: ReactNode;
+    /** Компонент выпадающего элемента для выбора значения */
+    dropdown: ReactNode;
     /** Функция для приведения опцию к внутреннему формату */
     prepareOption?: AutocompleteBasePropPrepareOption<Option>;
     /** Если `true` делает элемент неактивным */

package/__inner__/esm/components/AutocompleteListCard/AutocompleteListCard.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteListCardComponent } from './types';
+export declare const AutocompleteListCard: AutocompleteListCardComponent;

package/__inner__/esm/components/AutocompleteListCard/AutocompleteListCard.js

@@ -0,0 +1,42 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useStoredValue } from '../../hooks/useStoredValue';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { extractElementsFromChildren } from '../../utils/react';
+import { AutocompleteBase } from '../AutocompleteBase';
+import { AUTOCOMPLETE_LIST_CARD_DEFAULT_MULTIPLE } from './constants';
+import { AutocompleteListCardChildrenContext } from './context';
+import { useAutocompleteListCardValue } from './hooks';
+import { AutocompleteListCardDropdown, AutocompleteListCardInput, } from './modules';
+import { isAutocompleteListCardItem, toAutocompleteListCardValue, } from './utils';
+var AutocompleteListCardRender = function (inProps) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'AutocompleteListCard',
+    });
+    var children = props.children, onChange = props.onChange, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_LIST_CARD_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValueProp = props.defaultValue, other = __rest(props, ["children", "onChange", "multiple", "value", "defaultValue"]);
+    var options = useStoredValue([]);
+    var optionById = useStoredValue({});
+    options.current = [];
+    optionById.current = {};
+    extractElementsFromChildren(children, isAutocompleteListCardItem, function (element) {
+        var _a;
+        var props = element.props;
+        var option = {
+            label: props.label,
+            disabled: (_a = props.disabled) !== null && _a !== void 0 ? _a : false,
+            id: props.listId,
+        };
+        options.current.push(option);
+        optionById.current[option.id] = option;
+    });
+    var value = useAutocompleteListCardValue(valueProp, optionById);
+    var defaultValue = useAutocompleteListCardValue(defaultValueProp, optionById);
+    return (React.createElement(AutocompleteListCardChildrenContext.Provider, { value: {
+            children: children,
+        } },
+        React.createElement(AutocompleteBase, __assign({ input: React.createElement(AutocompleteListCardInput, null), dropdown: React.createElement(AutocompleteListCardDropdown, null) }, other, { options: options.current, onChange: function (event, value, params) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(event, toAutocompleteListCardValue(value), params);
+            }, value: value, defaultValue: defaultValue, multiple: multiple }))));
+};
+export var AutocompleteListCard = AutocompleteListCardRender;

package/__inner__/esm/components/AutocompleteListCard/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const AUTOCOMPLETE_LIST_CARD_DEFAULT_DROPDOWN_TAG = "ul";
+export declare const AUTOCOMPLETE_LIST_CARD_DEFAULT_MULTIPLE = false;

package/__inner__/esm/components/AutocompleteListCard/constants.js

@@ -0,0 +1,3 @@
+import { DATA_LIST_CARD_DEFAULT_TAG } from '../DataListCard';
+export var AUTOCOMPLETE_LIST_CARD_DEFAULT_DROPDOWN_TAG = DATA_LIST_CARD_DEFAULT_TAG;
+export var AUTOCOMPLETE_LIST_CARD_DEFAULT_MULTIPLE = false;

package/__inner__/esm/components/AutocompleteListCard/context/base/AutocompleteListCardContext.d.ts

@@ -0,0 +1,6 @@
+import type { AutocompleteBaseContextValue, AutocompleteBaseDefaultOption } from '../../../AutocompleteBase';
+import type { AutocompleteListCardSizeVariant } from '../../entities';
+export type AutocompleteListCardContextValue<Multiple extends boolean = boolean> = Omit<AutocompleteBaseContextValue<AutocompleteBaseDefaultOption, Multiple>, 'size'> & {
+    size: AutocompleteListCardSizeVariant;
+};
+export declare const useAutocompleteListCardContext: <Multiple extends boolean = boolean>() => AutocompleteListCardContextValue<Multiple>;

package/__inner__/esm/components/AutocompleteListCard/context/base/AutocompleteListCardContext.js

@@ -0,0 +1,4 @@
+import { useAutocompleteBaseContext } from '../../../AutocompleteBase';
+export var useAutocompleteListCardContext = function () {
+    return useAutocompleteBaseContext();
+};

package/__inner__/esm/components/AutocompleteListCard/context/base/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteListCardContext';

package/__inner__/esm/components/AutocompleteListCard/context/base/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteListCardContext';

package/__inner__/esm/components/AutocompleteListCard/context/children/AutocompleteListCardChildrenContext.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type AutocompleteListCardChildrenContextValue = {
+    children: ReactNode;
+};
+export declare const AutocompleteListCardChildrenContextDefaultValue: AutocompleteListCardChildrenContextValue;
+export declare const AutocompleteListCardChildrenContext: import("react").Context<AutocompleteListCardChildrenContextValue>;
+export declare const useAutocompleteListCardChildrenContext: () => AutocompleteListCardChildrenContextValue;

package/__inner__/esm/components/AutocompleteListCard/context/children/AutocompleteListCardChildrenContext.js

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../../../constants/environment';
+export var AutocompleteListCardChildrenContextDefaultValue = {
+    children: null,
+};
+export var AutocompleteListCardChildrenContext = createContext(AutocompleteListCardChildrenContextDefaultValue);
+export var useAutocompleteListCardChildrenContext = function () {
+    return useContext(AutocompleteListCardChildrenContext);
+};
+// Именованный провайдер
+if (isDev) {
+    AutocompleteListCardChildrenContext.displayName =
+        'AutocompleteListCardChildrenContext';
+}

package/__inner__/esm/components/AutocompleteListCard/context/children/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteListCardChildrenContext';

package/__inner__/esm/components/AutocompleteListCard/context/children/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteListCardChildrenContext';

package/__inner__/esm/components/AutocompleteListCard/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base';
+export * from './children';

package/__inner__/esm/components/AutocompleteListCard/context/index.js

@@ -0,0 +1,2 @@
+export * from './base';
+export * from './children';

package/__inner__/esm/components/AutocompleteListCard/entities/events/index.d.ts

@@ -0,0 +1 @@
+export * from './onChange';

package/__inner__/esm/components/AutocompleteListCard/entities/events/index.js

@@ -0,0 +1 @@
+export * from './onChange';

package/__inner__/esm/components/AutocompleteListCard/entities/events/onChange.d.ts

@@ -0,0 +1,4 @@
+import type { SyntheticEvent } from 'react';
+import type { AutocompleteBaseOnChangeParams } from '../../../AutocompleteBase';
+import type { AutocompleteListCardValue } from '../../entities';
+export type AutocompleteListCardOnChange<Multiple extends boolean> = (event: SyntheticEvent | KeyboardEvent | null, value: AutocompleteListCardValue<Multiple>, params: AutocompleteBaseOnChangeParams) => void;