@ozen-ui/kit 0.57.0 → 0.58.0

package/AutocompleteNext/package.json

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

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

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

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

@@ -4,6 +4,7 @@ exports.Autocomplete = exports.cnAutocomplete = void 0;
 var tslib_1 = require("tslib");
 require("./Autocomplete.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useControlled_1 = require("../../hooks/useControlled");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useMutableRef_1 = require("../../hooks/useMutableRef");
@@ -22,6 +23,9 @@ function AutocompleteRender(inProps, ref) {
         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, 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, bodyProps = _a.bodyProps, 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", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "loadingText", "closeText"]);
+    if (process.env.NODE_ENV !== 'production') {
+        (0, logger_1.deprecate)('Компонент «Autocomplete» устарел. Для замены используйте компонент «AutocompleteNext».');
+    }
     var anchorRef = (0, react_1.useRef)(null);
     var lastInputValue = (0, react_1.useRef)('');
     var inputBodyRef = (0, useMultiRef_1.useMultiRef)([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
@@ -193,4 +197,7 @@ function AutocompleteRender(inProps, ref) {
             !disableShowEmptyOptionsList && (react_1.default.createElement(components_1.AutocompleteNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText })),
             react_1.default.createElement(components_1.AutocompleteLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
 }
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент AutocompleteNext
+ */
 exports.Autocomplete = (0, react_1.forwardRef)(AutocompleteRender);

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

@@ -46,11 +46,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, 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;
-    } & {
-        'data-testid'?: string | undefined;
-    }) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
     }) | undefined;
@@ -117,11 +113,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     hint?: string | null | undefined;
     renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
     renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, 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;
-    } & {
-        'data-testid'?: string | undefined;
-    }) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
     bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
     }) | undefined;

package/__inner__/cjs/components/AutocompleteNext/Autocomplete.css

@@ -0,0 +1,226 @@
+.AutocompleteNext {
+  --autocomplete-gutter-x: 0 var(--textfield-gutter-x);
+}
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_2xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_xs {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-xs);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_s {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-s);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_m {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-m);
+    }
+
+  .AutocompleteNext_hasChevron.AutocompleteNext_size_l {
+      --autocomplete-gutter-x: 0 var(--control-padding-2xs) 0
+        var(--control-padding-l);
+    }
+
+  .AutocompleteNext-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+  }
+
+  .AutocompleteNext-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .AutocompleteNext-ClearButton_visibility {
+      visibility: visible;
+    }
+
+  .AutocompleteNext .Input-Body {
+    padding: var(--autocomplete-gutter-x);
+    align-items: flex-start;
+  }
+
+  .AutocompleteNext .FieldIcon {
+    block-size: var(--textfield-input-height);
+  }
+
+  .AutocompleteNext-Option {
+    cursor: pointer;
+    transition: background-color var(--transition-default);
+  }
+
+  .AutocompleteNext-Option:hover {
+      background-color: var(--color-background-main-hover);
+    }
+
+  .AutocompleteNext-Option:active {
+      background-color: var(--color-background-main-pressed);
+    }
+
+  .AutocompleteNext-Option_focused {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+
+  .AutocompleteNext-Option_disabled,
+    .AutocompleteNext-Option_disabled:hover,
+    .AutocompleteNext-Option_disabled:active {
+      cursor: not-allowed;
+      background-color: unset;
+    }
+
+  .AutocompleteNext-Option_disabled .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled .ListItemText-TextSecondary,
+      .AutocompleteNext-Option_disabled:hover .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled:hover .ListItemText-TextSecondary,
+      .AutocompleteNext-Option_disabled:active .ListItemText-TextPrimary,
+      .AutocompleteNext-Option_disabled:active .ListItemText-TextSecondary {
+        color: var(--color-content-tertiary);
+      }
+
+  .AutocompleteNext-Input_multiple {
+      display: flex;
+      flex-wrap: wrap;
+      overflow: hidden;
+      inline-size: 100%;
+      align-items: center;
+      box-sizing: border-box;
+      padding: var(--textfield-input-padding);
+      min-block-size: var(--textfield-input-height);
+      gap: var(--spacing-3xs);
+    }
+
+  .AutocompleteNext-Input_multiple input {
+        padding: 0;
+        border: none;
+        outline: none;
+        font: inherit;
+        background: none;
+        box-sizing: border-box;
+        color: var(--textfield-color);
+      }
+
+  .AutocompleteNext-Input_multiple input::placeholder {
+          opacity: 0;
+        }
+
+  .AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
+          opacity: 1;
+        }
+
+  .AutocompleteNext-Input_responsive {
+      flex-wrap: nowrap;
+      gap: unset;
+    }
+
+  .AutocompleteNext-Input_responsive .AutocompleteNext-Tag {
+        margin-inline-end: var(--spacing-3xs);
+      }
+
+  .AutocompleteNext-HelperInput {
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    position: absolute;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .AutocompleteNext-Tag_hidden {
+      inset-block-start: 0;
+      block-size: 0;
+      visibility: hidden;
+      position: absolute;
+    }
+
+  .AutocompleteNext-Tag_disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+  .AutocompleteNext-ClearTag {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    block-size: inherit;
+  }
+
+  .AutocompleteNext-Dropdown {
+    --scroll-bar-size: 12px;
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover,
+    .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+
+  .AutocompleteNext-Dropdown::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .AutocompleteNext-Dropdown {
+    overflow: hidden auto;
+    max-block-size: 40vb;
+}
+.AutocompleteNext-Dropdown-animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.AutocompleteNext-Dropdown-animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteNext-Dropdown-animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }

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

@@ -0,0 +1,4 @@
+import './Autocomplete.css';
+import type { AutocompleteComponent } from './types';
+export declare const cnAutocomplete: import("@bem-react/classname").ClassNameFormatter;
+export declare const Autocomplete: AutocompleteComponent;

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

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = exports.cnAutocomplete = void 0;
+var tslib_1 = require("tslib");
+require("./Autocomplete.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useElementSize_1 = require("../../hooks/useElementSize");
+var useMultiRef_1 = require("../../hooks/useMultiRef");
+var useMutableRef_1 = require("../../hooks/useMutableRef");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var isKeys_1 = require("../../utils/isKeys");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var helpers_1 = require("./helpers");
+exports.cnAutocomplete = (0, classname_1.cn)('AutocompleteNext');
+function AutocompleteRender(inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'AutocompleteNext',
+    });
+    var _a = (0, helpers_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.disableCloseOnSelect, disableCloseOnSelect = _k === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _k, _l = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _l === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _l, limitTags = _a.limitTags, renderInput = _a.renderInput, multiple = _a.multiple, searchFunctionProp = _a.searchFunction, inputValueProp = _a.inputValue, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, onInputChange = _a.onInputChange, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, renderOption = _a.renderOption, loadingText = _a.loadingText, closeText = _a.closeText, listProps = _a.listProps, popoverProps = _a.popoverProps, onChangeProp = _a.onChange, other = tslib_1.__rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableCloseOnSelect", "disableShowEmptyOptionsList", "limitTags", "renderInput", "multiple", "searchFunction", "inputValue", "value", "options", "defaultValue", "onInputChange", "getOptionKey", "getOptionLabel", "getOptionDisabled", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "renderOption", "loadingText", "closeText", "listProps", "popoverProps", "onChange"]);
+    var _m = (0, useElementSize_1.useElementSize)(), inputRef = _m.ref, height = _m.height;
+    var lastInputValue = (0, react_1.useRef)('');
+    var anchorRef = (0, react_1.useRef)(null);
+    var inputBodyRef = (0, useMultiRef_1.useMultiRef)([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
+    var rootRef = (0, useMultiRef_1.useMultiRef)([ref, inputRef]);
+    var _o = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: inputValueProp,
+        defaultValue: '',
+        name: 'AutocompleteNext',
+        state: 'inputValue',
+    }), 2), inputValue = _o[0], setInputValue = _o[1];
+    var _p = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'AutocompleteNext',
+        state: 'value',
+    }), 2), valueState = _p[0], setValueState = _p[1];
+    var _q = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'AutocompleteNext',
+        state: 'open',
+    }), 2), open = _q[0], setOpen = _q[1];
+    var searchFunctionDefault = function (options, searchValue) {
+        return options === null || options === void 0 ? void 0 : options.filter(function (option) {
+            return getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase());
+        });
+    };
+    var savedOnInputChange = (0, useMutableRef_1.useMutableRef)(onInputChange);
+    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 hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
+    var _s = tslib_1.__read((0, react_1.useState)(undefined), 2), search = _s[0], setSearch = _s[1];
+    var changeInputValue = function (e, value) {
+        var _a;
+        setInputValue(value);
+        (_a = savedOnInputChange.current) === null || _a === void 0 ? void 0 : _a.call(savedOnInputChange, e, value);
+    };
+    var callOnChange = function (e, option) {
+        var _a, _b, _c;
+        var inputValue = '';
+        var onChange = function (e, option) {
+            setValueState(option);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e, option);
+        };
+        var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { onChange: onChange, value: valueState });
+        if ((0, helpers_1.isNotMultipleParams)(params)) {
+            inputValue = option ? getOptionLabel(option) : '';
+            (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, e, option);
+        }
+        if ((0, helpers_1.isMultipleParams)(params)) {
+            if (option === null) {
+                (_b = params.onChange) === null || _b === void 0 ? void 0 : _b.call(params, e, null);
+            }
+            else {
+                var value = params.value || [];
+                var optionKey_1 = option && getOptionKey(option);
+                var optionIsSelected = value.find(function (item) { return getOptionKey(item) === optionKey_1; });
+                // eslint-disable-next-line no-nested-ternary
+                var res = optionIsSelected
+                    ? value.filter(function (option) { return getOptionKey(option) !== optionKey_1; })
+                    : option
+                        ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(value), false), [option], false) : value;
+                (_c = params.onChange) === null || _c === void 0 ? void 0 : _c.call(params, e, res);
+            }
+            setSearch(undefined);
+        }
+        changeInputValue(null, inputValue);
+    };
+    /** Эффект — фильтрация списка при изменении опций */
+    (0, react_1.useEffect)(function () {
+        if (!open)
+            return;
+        setFilteredOptions(search ? search(options) : tslib_1.__spreadArray([], tslib_1.__read(options), false));
+    }, [search, options, open, searchFunctionProp]);
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (allowCustomValue || multiple)
+            return;
+        var value = valueState || '';
+        var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { value: value });
+        if ((0, helpers_1.isNotMultipleParams)(params)) {
+            lastInputValue.current = (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, params.value);
+            if (lastInputValue.current !== inputValue)
+                changeInputValue(null, lastInputValue.current);
+        }
+    }, [valueState, allowCustomValue]);
+    /** Эффект — автофокусировка в текстовом поле */
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (autoFocus)
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [autoFocus]);
+    /** Ждём выполнения анимации на закрытие и делаем сброс функции фильтрации */
+    var handleExited = function () {
+        var _a;
+        setSearch(undefined);
+        (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
+    };
+    /** Закрытие */
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    /** Открытие */
+    var handleOpen = function () {
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    /** Переключатель открытия и закрытия */
+    var handleToggle = function () {
+        if (disabled)
+            return;
+        if (open)
+            handleClose();
+        else
+            handleOpen();
+    };
+    /** Очистка поля */
+    var handleClear = function (e) {
+        callOnChange(e, null);
+        setSearch(undefined);
+    };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (allowCustomValue)
+            return;
+        if (inputValue !== lastInputValue.current) {
+            changeInputValue(null, lastInputValue.current);
+        }
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInput = function (e) {
+        var _a;
+        handleToggle();
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (e) {
+        if ((0, isKeys_1.isKeys)(e, ['ArrowDown', 'ArrowUp']) && !open) {
+            e.preventDefault();
+            handleToggle();
+        }
+        var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { value: valueState });
+        if ((0, helpers_1.isMultipleParams)(params) && (0, isKeys_1.isKeys)(e, ['Backspace']) && !inputValue) {
+            var value = params.value;
+            if (value)
+                callOnChange(e, value[value.length - 1] || null);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        var value = e.target.value;
+        // Открываем список при вводе первого символа (при условии, что список еще не открыт)
+        if (value.length && !open)
+            handleOpen();
+        if (multiple)
+            changeInputValue(e, value);
+        if (value && !multiple)
+            changeInputValue(e, value);
+        if (!value && !multiple)
+            callOnChange(e, null);
+        // Задаем функцию фильтрации
+        setSearch(function () { return function (options) { return searchFunction(tslib_1.__spreadArray([], tslib_1.__read(options), false), value); }; });
+    };
+    /** Событие выбора значения из раскрывающегося списка */
+    var handleChangeDropdown = function (e, option) {
+        callOnChange(e, option);
+        // Закрываем список после выбора
+        if (!disableCloseOnSelect)
+            handleClose();
+    };
+    var autocompleteInputProps = tslib_1.__assign({ open: open, size: size, limitTags: limitTags, disabled: disabled, multiple: multiple, required: required, fullWidth: fullWidth, clearText: clearText, closeText: closeText, openText: openText, inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: inputBodyRef }), renderInput: renderInput, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, value: inputValue, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton, onClear: handleClear, onOpen: handleToggle, onRemoveTag: callOnChange, onKeyDown: handleKeyDown, onChange: handleChangeInput, selectedOptions: valueState }, other);
+    var update = (0, react_1.useRef)();
+    var setUpdate = function (func) {
+        if (func) {
+            update.current = func;
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var _a;
+        (_a = update.current) === null || _a === void 0 ? void 0 : _a.call(update);
+    }, [height]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(components_1.AutocompleteInput, tslib_1.__assign({}, autocompleteInputProps, { ref: rootRef })),
+        react_1.default.createElement(components_1.AutocompleteDropdown, { open: open, size: size, loading: loading, setUpdate: setUpdate, value: valueState, multiple: multiple, onClose: handleClose, listProps: listProps, anchorRef: anchorRef, hasOptions: hasOptions, options: filteredOptions, loadingText: loadingText, renderOption: renderOption, getOptionKey: getOptionKey, noOptionsText: noOptionsText, onChange: handleChangeDropdown, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, disableShowEmptyOptionsList: disableShowEmptyOptionsList, popoverProps: tslib_1.__assign(tslib_1.__assign({}, popoverProps), { onExited: handleExited }) })));
+}
+exports.Autocomplete = (0, react_1.forwardRef)(AutocompleteRender);

package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteDropdown/AutocompleteDropdown.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteDropdownComponent } from './index';
+export declare const AutocompleteDropdown: AutocompleteDropdownComponent;