@ozen-ui/kit 0.34.0 → 0.34.2

package/Calendar/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/Calendar/index.js",
+	"module": "../__inner__/esm/components/Calendar/index.js",
+	"types": "../__inner__/esm/components/Calendar/index.d.ts"
+}

package/DatePicker/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/DatePicker/index.js",
+	"module": "../__inner__/esm/components/DatePicker/index.js",
+	"types": "../__inner__/esm/components/DatePicker/index.d.ts"
+}

package/__inner__/cjs/components/Autocomplete/Autocomplete.js

@@ -20,7 +20,7 @@ function AutocompleteRender(inProps, ref) {
         props: inProps,
         name: 'Autocomplete',
     });
-    var _a = (0, helper_1.withDefaultGetters)(props), _b = _a.disabled, disabled = _b === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return react_1.default.createElement(Input_1.Input, tslib_1.__assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = tslib_1.__rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    var _a = (0, helper_1.withDefaultGetters)(props), _b = _a.disabled, disabled = _b === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return react_1.default.createElement(Input_1.Input, tslib_1.__assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = tslib_1.__rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
     var anchorRef = (0, react_1.useRef)(null);
     var _o = tslib_1.__read((0, useControlled_1.useControlled)({
         value: inputValueProp,
@@ -49,7 +49,7 @@ function AutocompleteRender(inProps, ref) {
     var savedGetOptionLabel = (0, useMutableRef_1.useMutableRef)(getOptionLabel);
     var _r = tslib_1.__read((0, react_1.useState)(tslib_1.__spreadArray([], tslib_1.__read(options), false)), 2), filteredOptions = _r[0], setFilteredOptions = _r[1];
     var searchFunction = searchFunctionProp || searchFunctionDefault;
-    var dataListValue = valueState ? getOptionLabel(valueState) : '';
+    var dataListValue = valueState ? getOptionKey(valueState) : '';
     var hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
     var showNoOptions = !hasOptions && !loading;
     var showLoading = !hasOptions && !!loading;
@@ -163,7 +163,7 @@ function AutocompleteRender(inProps, ref) {
     /** Событие выбора значения из раскрывающегося списка */
     var handleChangeDataList = function (event, _a) {
         var value = _a.value;
-        var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) === value; });
+        var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option)) === value; });
         if (selectedOption) {
             var newInputValue = getOptionLabel(selectedOption);
             setValueState(selectedOption);
@@ -177,17 +177,17 @@ function AutocompleteRender(inProps, ref) {
         }
     };
     /** Отображение текстового поля */
-    var input = renderInput(tslib_1.__assign(tslib_1.__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (react_1.default.createElement(components_1.AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnAutocomplete)({ size: size, hasChevron: !disableShowChevron }, [
+    var input = renderInput(tslib_1.__assign(tslib_1.__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (react_1.default.createElement(components_1.AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnAutocomplete)({ size: size, hasChevron: !disableShowChevron }, [
             className,
         ]), ref: ref }));
     /** Отображение опций */
     var renderOptions = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
         var selected = valueState
-            ? getOptionLabel(valueState) === getOptionLabel(option)
+            ? getOptionKey(valueState) === getOptionKey(option)
             : false;
         var renderOptionDefault = function (_a) {
-            var option = _a.option, selected = _a.selected;
-            return (react_1.default.createElement(DataList_1.DataListOption, { key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), label: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), value: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), disabled: getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option), selected: selected }));
+            var option = _a.option;
+            return (react_1.default.createElement(DataList_1.DataListOption, { key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), label: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), value: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), disabled: getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option) }));
         };
         var renderOption = renderOptionProp || renderOptionDefault;
         return renderOption({ option: option, selected: selected });

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

@@ -5,6 +5,6 @@ type AutocompleteRenderRightProps = {
     onOpen: () => void;
     onClear: (e: React.MouseEvent<HTMLElement>) => void;
     hasValue: boolean;
-} & Pick<AutocompleteProps, 'clearText' | 'closeText' | 'openText' | 'size' | 'disabled' | 'open' | 'disableClearButton' | 'disableShowChevron'>;
+} & Pick<AutocompleteProps, 'clearText' | 'closeText' | 'openText' | 'size' | 'disabled' | 'open' | 'disableClearButton' | 'disableShowChevron' | 'renderRight'>;
 export declare const AutocompleteRenderRight: FC<AutocompleteRenderRightProps>;
 export {};

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

@@ -5,10 +5,11 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 var FieldControl_1 = require("../../../FieldControl");
+var FieldIcon_1 = require("../../../FieldIcon");
 var IconButton_1 = require("../../../IconButton");
 var index_1 = require("../../index");
 var AutocompleteRenderRight = function (_a) {
-    var disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron, 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 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 = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
     return (react_1.default.createElement("div", { className: (0, index_1.cnAutocomplete)('RenderRight') },
@@ -18,6 +19,7 @@ var AutocompleteRenderRight = function (_a) {
             }, className: (0, index_1.cnAutocomplete)('ClearButton', {
                 visibility: isVisibleClearButton,
             }), title: clearText, "aria-label": clearText, size: size, icon: icons_1.CloseIcon, compressed: true })),
+        react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
         !disableShowChevron && (react_1.default.createElement(IconButton_1.IconButton, { type: "button", variant: "ghost", tabIndex: -1, onClick: function (e) {
                 e.preventDefault();
                 onOpen();

package/__inner__/cjs/components/Autocomplete/helper.d.ts

@@ -30,7 +30,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
     disableShowEmptyOptionsList?: boolean | undefined;
     disableShowChevron?: boolean | undefined;
-    dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
+    dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -59,6 +59,22 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         size?: import("@ozen-ui/icons").IconSize | undefined;
     }, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     } & {
@@ -76,7 +92,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
 } ? Record<string, unknown> : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & (OPTION extends {
-    id: boolean | undefined;
+    disabled: boolean | undefined;
 } ? Record<string, unknown> : {
     getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & {
@@ -110,7 +126,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
     disableShowEmptyOptionsList?: boolean | undefined;
     disableShowChevron?: boolean | undefined;
-    dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
+    dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -139,6 +155,22 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         size?: import("@ozen-ui/icons").IconSize | undefined;
     }, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     } & {
@@ -156,7 +188,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
 } ? Record<string, unknown> : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & (OPTION extends {
-    id: boolean | undefined;
+    disabled: boolean | undefined;
 } ? Record<string, unknown> : {
     getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & {

package/__inner__/cjs/components/Autocomplete/types.d.ts

@@ -1,6 +1,6 @@
 import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { DataListBaseProps } from '../DataList';
+import type { DataListProps } from '../DataList';
 import type { InputProps } from '../Input';
 export type AutocompleteRenderOptionProps<OPTION> = {
     option: OPTION;
@@ -31,8 +31,8 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
-type AutocompleteDataListProps = Partial<Omit<DataListBaseProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'onKeyDown'>;
+type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */
     options: OPTION[];
@@ -97,7 +97,7 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
 } ? Record<string, unknown> : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
 }) & (OPTION extends {
-    id: AutocompleteDefaultOption['disabled'];
+    disabled: AutocompleteDefaultOption['disabled'];
 } ? Record<string, unknown> : {
     getOptionDisabled?: AutocompletePropGetOptionKey<OPTION>;
 });

package/__inner__/cjs/components/DataList/DataList.js

@@ -5,14 +5,15 @@ var tslib_1 = require("tslib");
 require("./DataList.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_is_1 = require("react-is");
-var useBoolean_1 = require("../../hooks/useBoolean");
 var useControlled_1 = require("../../hooks/useControlled");
 var useEventListener_1 = require("../../hooks/useEventListener");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
+var usePrevious_1 = require("../../hooks/usePrevious");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var isKey_1 = require("../../utils/isKey");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var scrollContainerToElement_1 = require("../../utils/scrollContainerToElement");
 var List_1 = require("../List");
 var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
@@ -20,17 +21,15 @@ var helpers_1 = require("./helpers");
 var index_1 = require("./index");
 exports.cnDataList = (0, classname_1.cn)('DataList');
 var DataListRender = function (inProps, ref) {
-    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = (0, react_1.useRef)(null);
     var listRef = (0, react_1.useRef)(null);
-    // Состояние представленного компонента с завершенной анимацией
-    var _e = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
-    var _g = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
         state: 'selected',
-    }), 2), selectedState = _g[0], setSelected = _g[1];
+    }), 2), selectedState = _e[0], setSelected = _e[1];
     var nodes = (0, react_1.useMemo)(function () { return new Map(); }, [children]);
     var items = (0, react_1.useMemo)(function () { return new Array(); }, [children]);
     var resolvedChildren = (0, react_is_1.isFragment)(children)
@@ -70,29 +69,42 @@ var DataListRender = function (inProps, ref) {
             setSelected_2(value);
         }
     };
+    var handleOnMouseDownList = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+    };
     // Навигация по списку
-    var _h = (0, helpers_1.useDataListNavigation)({
-        active: opened,
+    var _f = (0, helpers_1.useDataListNavigation)({
+        active: open,
         items: items,
         selected: (0, helpers_1.lastSelectedValue)(selectedState),
         onSelect: function (event, item) {
-            handleSelect(event, item || '');
+            handleSelect(event, item !== null && item !== void 0 ? item : '');
         },
-    }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
-    var _j = tslib_1.__read((0, react_1.useState)({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
+    }), current = _f.current, focused = _f.focused, onKeyDown = _f.onKeyDown, onClick = _f.onClick;
+    var previousCurrent = (0, usePrevious_1.usePrevious)(current);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        var selected = focused || current || '';
+        var firstCurrent = (previousCurrent === null || previousCurrent === undefined) &&
+            current !== null &&
+            current !== undefined
+            ? current
+            : undefined;
+        var selected = focused !== null && focused !== void 0 ? focused : firstCurrent;
         // Находит элемент по ключу
-        var idx = nodes.get(selected);
+        var idx = selected !== undefined && selected !== null
+            ? nodes.get(selected)
+            : undefined;
         if (idx !== undefined) {
-            setSelectedElRef({
-                current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+            // Прокрутка списка
+            (0, scrollContainerToElement_1.scrollContainerToElement)({
+                container: dataListRef.current,
+                element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+                behavior: focused !== undefined && focused !== null ? 'smooth' : 'instant',
             });
         }
-    }, [focused, current]);
-    // Прокрутка списка
-    (0, helpers_1.useScrollContainerToElement)(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
+    }, [focused, current, previousCurrent]);
     // Назначает элементу контроля событие управления списком с клавиатуры
     (0, useEventListener_1.useEventListener)({
         eventName: 'keydown',
@@ -136,17 +148,7 @@ var DataListRender = function (inProps, ref) {
     }, [resolvedChildren, selectedState, focused, onClick]);
     return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: (0, exports.cnDataList)('', [className]), transitionProps: {
             classNames: 'DataList-animation',
-        } }, other, { onEntered: function () {
-            onEntered();
-            onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
-        }, onExited: function () {
-            onExited();
-            onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
-        }, ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
-        react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
-                var _a;
-                e.preventDefault();
-                (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
-            }, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
+        } }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, dataListRef]) }),
+        react_1.default.createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
 };
 exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListRender);

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

@@ -17,7 +17,7 @@ function AutocompleteRender(inProps, ref) {
         props: inProps,
         name: 'Autocomplete',
     });
-    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _k, _l = _a.disableCloseOnSelect, disableCloseOnSelect = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _l, _m = _a.renderInput, renderInput = _m === void 0 ? function (props) { return React.createElement(Input, __assign({}, props, { ref: ref })); } : _m, searchFunctionProp = _a.searchFunction, renderOptionProp = _a.renderOption, inputValueProp = _a.inputValue, className = _a.className, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, error = _a.error, onChange = _a.onChange, onInputChange = _a.onInputChange, label = _a.label, placeholder = _a.placeholder, renderLeft = _a.renderLeft, renderRight = _a.renderRight, hint = _a.hint, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, dataListProps = _a.dataListProps, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, loadingText = _a.loadingText, closeText = _a.closeText, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableShowEmptyOptionsList", "disableCloseOnSelect", "renderInput", "searchFunction", "renderOption", "inputValue", "className", "value", "options", "defaultValue", "error", "onChange", "onInputChange", "label", "placeholder", "renderLeft", "renderRight", "hint", "getOptionKey", "getOptionLabel", "getOptionDisabled", "dataListProps", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
     var anchorRef = useRef(null);
     var _o = __read(useControlled({
         value: inputValueProp,
@@ -46,7 +46,7 @@ function AutocompleteRender(inProps, ref) {
     var savedGetOptionLabel = useMutableRef(getOptionLabel);
     var _r = __read(useState(__spreadArray([], __read(options), false)), 2), filteredOptions = _r[0], setFilteredOptions = _r[1];
     var searchFunction = searchFunctionProp || searchFunctionDefault;
-    var dataListValue = valueState ? getOptionLabel(valueState) : '';
+    var dataListValue = valueState ? getOptionKey(valueState) : '';
     var hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
     var showNoOptions = !hasOptions && !loading;
     var showLoading = !hasOptions && !!loading;
@@ -160,7 +160,7 @@ function AutocompleteRender(inProps, ref) {
     /** Событие выбора значения из раскрывающегося списка */
     var handleChangeDataList = function (event, _a) {
         var value = _a.value;
-        var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) === value; });
+        var selectedOption = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.find(function (option) { return (getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option)) === value; });
         if (selectedOption) {
             var newInputValue = getOptionLabel(selectedOption);
             setValueState(selectedOption);
@@ -174,17 +174,17 @@ function AutocompleteRender(inProps, ref) {
         }
     };
     /** Отображение текстового поля */
-    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
+    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: onClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: onBlur, onClick: handleClickOnInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
             className,
         ]), ref: ref }));
     /** Отображение опций */
     var renderOptions = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
         var selected = valueState
-            ? getOptionLabel(valueState) === getOptionLabel(option)
+            ? getOptionKey(valueState) === getOptionKey(option)
             : false;
         var renderOptionDefault = function (_a) {
-            var option = _a.option, selected = _a.selected;
-            return (React.createElement(DataListOption, { key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), label: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), value: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), disabled: getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option), selected: selected }));
+            var option = _a.option;
+            return (React.createElement(DataListOption, { key: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), label: getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option), value: getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option), disabled: getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option) }));
         };
         var renderOption = renderOptionProp || renderOptionDefault;
         return renderOption({ option: option, selected: selected });

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

@@ -5,6 +5,6 @@ type AutocompleteRenderRightProps = {
     onOpen: () => void;
     onClear: (e: React.MouseEvent<HTMLElement>) => void;
     hasValue: boolean;
-} & Pick<AutocompleteProps, 'clearText' | 'closeText' | 'openText' | 'size' | 'disabled' | 'open' | 'disableClearButton' | 'disableShowChevron'>;
+} & Pick<AutocompleteProps, 'clearText' | 'closeText' | 'openText' | 'size' | 'disabled' | 'open' | 'disableClearButton' | 'disableShowChevron' | 'renderRight'>;
 export declare const AutocompleteRenderRight: FC<AutocompleteRenderRightProps>;
 export {};

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

@@ -2,10 +2,11 @@ import { __read } from "tslib";
 import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@ozen-ui/icons';
 import { useFieldControl } from '../../../FieldControl';
+import { FieldIcon } from '../../../FieldIcon';
 import { IconButton } from '../../../IconButton';
 import { cnAutocomplete } from '../../index';
 export var AutocompleteRenderRight = function (_a) {
-    var disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron, 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 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;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
     return (React.createElement("div", { className: cnAutocomplete('RenderRight') },
@@ -15,6 +16,7 @@ export var AutocompleteRenderRight = function (_a) {
             }, className: cnAutocomplete('ClearButton', {
                 visibility: isVisibleClearButton,
             }), title: clearText, "aria-label": clearText, size: size, icon: CloseIcon, compressed: true })),
+        React.createElement(FieldIcon, { icon: renderRight }),
         !disableShowChevron && (React.createElement(IconButton, { type: "button", variant: "ghost", tabIndex: -1, onClick: function (e) {
                 e.preventDefault();
                 onOpen();

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

@@ -30,7 +30,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
     disableShowEmptyOptionsList?: boolean | undefined;
     disableShowChevron?: boolean | undefined;
-    dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
+    dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -59,6 +59,22 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         size?: import("@ozen-ui/icons").IconSize | undefined;
     }, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     } & {
@@ -76,7 +92,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
 } ? Record<string, unknown> : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & (OPTION extends {
-    id: boolean | undefined;
+    disabled: boolean | undefined;
 } ? Record<string, unknown> : {
     getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & {
@@ -110,7 +126,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     searchFunction?: import("./types").AutocompleteSearchFunction<OPTION> | undefined;
     disableShowEmptyOptionsList?: boolean | undefined;
     disableShowChevron?: boolean | undefined;
-    dataListProps?: Partial<Omit<import("../DataList").DataListBaseProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
+    dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
 } & {
     label?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -139,6 +155,22 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     } & {
         size?: import("@ozen-ui/icons").IconSize | undefined;
     }, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }> | import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("react").SVGProps<SVGSVGElement> & {
+        color?: string | undefined;
+        ref?: import("react").Ref<SVGSVGElement> | undefined;
+    } & {
+        size?: import("@ozen-ui/icons").IconSize | undefined;
+    }, string | import("react").JSXElementConstructor<any>>) | undefined;
     inputProps?: (Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
     } & {
@@ -156,7 +188,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
 } ? Record<string, unknown> : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & (OPTION extends {
-    id: boolean | undefined;
+    disabled: boolean | undefined;
 } ? Record<string, unknown> : {
     getOptionDisabled?: AutocompletePropGetOptionKey<OPTION> | undefined;
 }) & {

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

@@ -1,6 +1,6 @@
 import type { SyntheticEvent, ChangeEvent, ReactElement, ReactNode } from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-import type { DataListBaseProps } from '../DataList';
+import type { DataListProps } from '../DataList';
 import type { InputProps } from '../Input';
 export type AutocompleteRenderOptionProps<OPTION> = {
     option: OPTION;
@@ -31,8 +31,8 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
-type AutocompleteDataListProps = Partial<Omit<DataListBaseProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
+type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'renderRight' | 'className' | 'inputProps' | 'onKeyDown'>;
+type AutocompleteDataListProps = Partial<Omit<DataListProps, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
 export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Список вариантов выбора (опции) */
     options: OPTION[];
@@ -97,7 +97,7 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
 } ? Record<string, unknown> : {
     getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
 }) & (OPTION extends {
-    id: AutocompleteDefaultOption['disabled'];
+    disabled: AutocompleteDefaultOption['disabled'];
 } ? Record<string, unknown> : {
     getOptionDisabled?: AutocompletePropGetOptionKey<OPTION>;
 });

package/__inner__/esm/components/DataList/DataList.js

@@ -1,33 +1,32 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './DataList.css';
-import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, useState, } from 'react';
+import React, { useMemo, Children, isValidElement, cloneElement, useRef, useEffect, } from 'react';
 import { isFragment } from 'react-is';
-import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
+import { usePrevious } from '../../hooks/usePrevious';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
 import { List } from '../List';
 import { Popover } from '../Popover';
 import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
-import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, useScrollContainerToElement, } from './helpers';
+import { lastSelectedValue, isMultipleParams, isNotMultipleParams, useDataListNavigation, } from './helpers';
 import { DataListOption } from './index';
 export var cnDataList = cn('DataList');
 var DataListRender = function (inProps, ref) {
-    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps", "className"]);
+    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, listProps = _a.listProps, className = _a.className, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "listProps", "className"]);
     var dataListRef = useRef(null);
     var listRef = useRef(null);
-    // Состояние представленного компонента с завершенной анимацией
-    var _e = __read(useBoolean(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
-    var _g = __read(useControlled({
+    var _e = __read(useControlled({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
         state: 'selected',
-    }), 2), selectedState = _g[0], setSelected = _g[1];
+    }), 2), selectedState = _e[0], setSelected = _e[1];
     var nodes = useMemo(function () { return new Map(); }, [children]);
     var items = useMemo(function () { return new Array(); }, [children]);
     var resolvedChildren = isFragment(children)
@@ -67,29 +66,42 @@ var DataListRender = function (inProps, ref) {
             setSelected_2(value);
         }
     };
+    var handleOnMouseDownList = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+    };
     // Навигация по списку
-    var _h = useDataListNavigation({
-        active: opened,
+    var _f = useDataListNavigation({
+        active: open,
         items: items,
         selected: lastSelectedValue(selectedState),
         onSelect: function (event, item) {
-            handleSelect(event, item || '');
+            handleSelect(event, item !== null && item !== void 0 ? item : '');
         },
-    }), current = _h.current, focused = _h.focused, onKeyDown = _h.onKeyDown, onClick = _h.onClick;
-    var _j = __read(useState({ current: null }), 2), selectedElRef = _j[0], setSelectedElRef = _j[1];
+    }), current = _f.current, focused = _f.focused, onKeyDown = _f.onKeyDown, onClick = _f.onClick;
+    var previousCurrent = usePrevious(current);
     useEffect(function () {
         var _a, _b;
-        var selected = focused || current || '';
+        var firstCurrent = (previousCurrent === null || previousCurrent === undefined) &&
+            current !== null &&
+            current !== undefined
+            ? current
+            : undefined;
+        var selected = focused !== null && focused !== void 0 ? focused : firstCurrent;
         // Находит элемент по ключу
-        var idx = nodes.get(selected);
+        var idx = selected !== undefined && selected !== null
+            ? nodes.get(selected)
+            : undefined;
         if (idx !== undefined) {
-            setSelectedElRef({
-                current: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+            // Прокрутка списка
+            scrollContainerToElement({
+                container: dataListRef.current,
+                element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[idx],
+                behavior: focused !== undefined && focused !== null ? 'smooth' : 'instant',
             });
         }
-    }, [focused, current]);
-    // Прокрутка списка
-    useScrollContainerToElement(dataListRef, selectedElRef, focused ? 'smooth' : 'instant');
+    }, [focused, current, previousCurrent]);
     // Назначает элементу контроля событие управления списком с клавиатуры
     useEventListener({
         eventName: 'keydown',
@@ -133,17 +145,7 @@ var DataListRender = function (inProps, ref) {
     }, [resolvedChildren, selectedState, focused, onClick]);
     return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", strategy: "absolute", disableReturnFocus: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, className: cnDataList('', [className]), transitionProps: {
             classNames: 'DataList-animation',
-        } }, other, { onEntered: function () {
-            onEntered();
-            onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
-        }, onExited: function () {
-            onExited();
-            onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
-        }, ref: useMultiRef([ref, dataListRef]) }),
-        React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
-                var _a;
-                e.preventDefault();
-                (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
-            }, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
+        } }, other, { ref: useMultiRef([ref, dataListRef]) }),
+        React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }), renderChildren)));
 };
 export var DataList = polymorphicComponentWithRef(DataListRender);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "description": "React component library",
   "files": [
     "*"