@ozen-ui/kit 0.70.0 → 0.71.1

package/__inner__/cjs/utils/polymorphicComponentWithRef.d.ts

@@ -1,16 +1,17 @@
 import type { ComponentPropsWithRef, ElementType, ComponentPropsWithoutRef, ReactElement } from 'react';
 declare const defaultElement = "div";
-export type PolymorphicComponentPropsWithRef<Props, As extends ElementType> = Props & {
-    as?: As;
+declare const defaultName = "as";
+export type PolymorphicComponentPropsWithRef<Props, As extends ElementType, Name extends string = typeof defaultName> = Props & {
+    [key in Name]?: As;
 } & Omit<ComponentPropsWithRef<As>, keyof Props>;
-export type PolymorphicComponentPropsWithoutRef<Props, As extends ElementType> = Props & {
-    as?: As;
+export type PolymorphicComponentPropsWithoutRef<Props, As extends ElementType, Name extends string = typeof defaultName> = Props & {
+    [key in Name]?: As;
 } & Omit<ComponentPropsWithoutRef<As>, keyof Props>;
 export type PolymorphicComponentRef<As extends ElementType> = ComponentPropsWithRef<As>['ref'];
-type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As>) => ReactElement | null;
-export type PolymorphicComponentWithRef<Props, As extends ElementType> = ComponentWithAs<Props, As> & {
+type ComponentWithAs<Props, DefaultTag extends ElementType = typeof defaultElement, Name extends string = typeof defaultName> = <As extends ElementType = DefaultTag>(props: PolymorphicComponentPropsWithRef<Props, As, Name>) => ReactElement | null;
+export type PolymorphicComponentWithRef<Props, As extends ElementType, Name extends string = typeof defaultName> = ComponentWithAs<Props, As, Name> & {
     displayName?: string | undefined;
 };
-type ForwardRefWithAs<Props> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As>, ref: PolymorphicComponentRef<As>) => ReactElement | null;
-export declare function polymorphicComponentWithRef<Props, As extends ElementType = typeof defaultElement>(baseComponent: ForwardRefWithAs<Props>): PolymorphicComponentWithRef<Props, As>;
+type ForwardRefWithAs<Props, Name extends string = typeof defaultName> = <As extends ElementType>(props: PolymorphicComponentPropsWithRef<Props, As, Name>, ref: PolymorphicComponentRef<As>) => ReactElement | null;
+export declare function polymorphicComponentWithRef<Props, As extends ElementType = typeof defaultElement, Name extends string = typeof defaultName>(baseComponent: ForwardRefWithAs<Props, Name>): PolymorphicComponentWithRef<Props, As, Name>;
 export {};

package/__inner__/cjs/utils/polymorphicComponentWithRef.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.polymorphicComponentWithRef = polymorphicComponentWithRef;
 var react_1 = require("react");
 var defaultElement = 'div';
+var defaultName = 'as';
 function polymorphicComponentWithRef(baseComponent) {
     return (0, react_1.forwardRef)(baseComponent);
 }

package/__inner__/cjs/utils/react/extractElementsFromChildren.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement, ReactNode } from 'react';
+export declare const extractElementsFromChildren: <Props>(children: ReactNode, checkIsItem: (child: ReactElement) => child is ReactElement<Props>, onMatch: (element: ReactElement<Props>) => void) => void;

package/__inner__/cjs/utils/react/extractElementsFromChildren.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractElementsFromChildren = void 0;
+var react_1 = require("react");
+var resolveChildren_1 = require("./resolveChildren");
+var extractElementsFromChildren = function (children, checkIsItem, onMatch) {
+    react_1.Children.forEach((0, resolveChildren_1.resolveChildren)(children), function (child) {
+        if (!checkIsItem(child)) {
+            return;
+        }
+        onMatch(child);
+    });
+};
+exports.extractElementsFromChildren = extractElementsFromChildren;

package/__inner__/cjs/utils/react/index.d.ts

@@ -1 +1,4 @@
+export * from './extractElementsFromChildren';
+export * from './isNodeWithDisplayName';
 export * from './isRef';
+export * from './resolveChildren';

package/__inner__/cjs/utils/react/index.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./extractElementsFromChildren"), exports);
+tslib_1.__exportStar(require("./isNodeWithDisplayName"), exports);
 tslib_1.__exportStar(require("./isRef"), exports);
+tslib_1.__exportStar(require("./resolveChildren"), exports);

package/__inner__/cjs/utils/react/isNodeWithDisplayName.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const isNodeWithDisplayName: (node: ReactNode, displayName: string) => boolean;

package/__inner__/cjs/utils/react/isNodeWithDisplayName.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isNodeWithDisplayName = void 0;
+var react_1 = require("react");
+var isFunction_1 = require("../isFunction");
+var object_1 = require("../object");
+var isNodeWithDisplayName = function (node, displayName) {
+    var isValid = (0, react_1.isValidElement)(node);
+    if (!isValid) {
+        return false;
+    }
+    if (!(0, object_1.isPlainObject)(node.type) && !(0, isFunction_1.isFunction)(node.type)) {
+        return false;
+    }
+    var isEqualByTypeDisplayName = 'displayName' in node.type && node.type.displayName === displayName;
+    var isEqualByRenderDisplayName = 'render' in node.type &&
+        node.type.render &&
+        (0, isFunction_1.isFunction)(node.type.render) &&
+        'displayName' in node.type.render &&
+        node.type.render.displayName === displayName;
+    return isEqualByTypeDisplayName || !!isEqualByRenderDisplayName;
+};
+exports.isNodeWithDisplayName = isNodeWithDisplayName;

package/__inner__/cjs/utils/react/resolveChildren.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const resolveChildren: (children: ReactNode) => any;

package/__inner__/cjs/utils/react/resolveChildren.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveChildren = void 0;
+var react_is_1 = require("react-is");
+var resolveChildren = function (children) {
+    return (0, react_is_1.isFragment)(children) ? children.props.children : children;
+};
+exports.resolveChildren = resolveChildren;

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

@@ -1,6 +1,5 @@
 import './Autocomplete.css';
 import type { AutocompleteComponent } from './types';
-export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;
 /**
  * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
  */

package/__inner__/esm/components/Autocomplete/Autocomplete.js

@@ -6,14 +6,13 @@ import { useDeprecatedComponent } from '../../hooks/useDeprecated';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useMutableRef } from '../../hooks/useMutableRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn } from '../../utils/classname';
 import { isKeys } from '../../utils/isKeys';
 import { DataList, DataListOption } from '../DataList';
 import { Input } from '../Input';
+import { cnAutocomplete } from './classNames';
 import { AutocompleteLoading, AutocompleteNoOptions, AutocompleteRenderRight, } from './components';
 import { AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_SIZE, } from './constants';
 import { withDefaultGetters } from './helper';
-export var cnAutocomplete = cn('Autocomplete');
 function AutocompleteRender(inProps, ref) {
     var props = useThemeProps({
         props: inProps,

package/__inner__/esm/components/Autocomplete/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/Autocomplete/classNames.js

@@ -0,0 +1,2 @@
+import { cn } from '../../utils/classname';
+export var cnAutocomplete = cn('Autocomplete');

package/__inner__/esm/components/Autocomplete/components/AutocompleteRenderRight/AutocompleteRenderRight.d.ts

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import type { AutocompleteProps } from '../../index';
+import type { AutocompleteProps } from '../../types';
 type AutocompleteRenderRightProps = {
     onOpen: () => void;
     onClear: (e: React.MouseEvent<HTMLElement>) => void;

package/__inner__/esm/components/Autocomplete/components/AutocompleteRenderRight/AutocompleteRenderRight.js

@@ -4,7 +4,7 @@ import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@ozen-ui/icons';
 import { useFieldControl } from '../../../FieldControl';
 import { FieldIcon } from '../../../FieldIcon';
 import { IconButton } from '../../../IconButtonNext';
-import { cnAutocomplete } from '../../index';
+import { cnAutocomplete } from '../../classNames';
 export var AutocompleteRenderRight = function (_a) {
     var disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron, renderRight = _a.renderRight, clearText = _a.clearText, closeText = _a.closeText, openText = _a.openText, disabled = _a.disabled, hasValue = _a.hasValue, onClear = _a.onClear, onOpen = _a.onOpen, open = _a.open, size = _a.size;
     var _b = __read(useFieldControl(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;

package/__inner__/esm/components/Autocomplete/index.d.ts

@@ -1,2 +1,3 @@
+export * from './classNames';
 export * from './Autocomplete';
 export * from './types';

package/__inner__/esm/components/Autocomplete/index.js

@@ -1,2 +1,3 @@
+export * from './classNames';
 export * from './Autocomplete';
 export * from './types';

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';