@ozen-ui/kit 0.34.1 → 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

@@ -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;
 }) & {
@@ -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

@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
+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> = {
     /** Список вариантов выбора (опции) */
@@ -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

@@ -8,6 +8,7 @@ var react_is_1 = require("react-is");
 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");
@@ -79,23 +80,31 @@ var DataListRender = function (inProps, ref) {
         items: items,
         selected: (0, helpers_1.lastSelectedValue)(selectedState),
         onSelect: function (event, item) {
-            handleSelect(event, item || '');
+            handleSelect(event, item !== null && item !== void 0 ? item : '');
         },
     }), 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) {
             // Прокрутка списка
             (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 ? 'smooth' : 'instant',
+                behavior: focused !== undefined && focused !== null ? 'smooth' : 'instant',
             });
         }
-    }, [focused, current]);
+    }, [focused, current, previousCurrent]);
     // Назначает элементу контроля событие управления списком с клавиатуры
     (0, useEventListener_1.useEventListener)({
         eventName: 'keydown',

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

@@ -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;
 }) & {
@@ -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

@@ -31,7 +31,7 @@ type AutocompleteOpenUncontrolledProps = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
 };
-type AutocompleteInputProps = Pick<InputProps, 'placeholder' | 'autoFocus' | 'fullWidth' | 'disabled' | 'label' | 'required' | 'style' | 'error' | 'hint' | 'renderLeft' | 'className' | 'inputProps' | 'onKeyDown'>;
+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> = {
     /** Список вариантов выбора (опции) */
@@ -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

@@ -5,6 +5,7 @@ import { isFragment } from 'react-is';
 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';
@@ -76,23 +77,31 @@ var DataListRender = function (inProps, ref) {
         items: items,
         selected: lastSelectedValue(selectedState),
         onSelect: function (event, item) {
-            handleSelect(event, item || '');
+            handleSelect(event, item !== null && item !== void 0 ? item : '');
         },
     }), 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) {
             // Прокрутка списка
             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 ? 'smooth' : 'instant',
+                behavior: focused !== undefined && focused !== null ? 'smooth' : 'instant',
             });
         }
-    }, [focused, current]);
+    }, [focused, current, previousCurrent]);
     // Назначает элементу контроля событие управления списком с клавиатуры
     useEventListener({
         eventName: 'keydown',

package/package.json

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