@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/ComboBox/__tests__/ComboBox-test.js

@@ -0,0 +1,2375 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/* eslint-disable jsx-a11y/anchor-has-content */
+/* eslint-disable react/no-unstable-nested-components */
+import React, { useState } from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { MobilePopupDataTids } from '../../../internal/MobilePopup/index.js';
+import { LIGHT_THEME } from '../../../lib/theming/themes/LightTheme.js';
+import { Input, InputDataTids } from '../../Input/index.js';
+import { MenuMessageDataTids } from '../../../internal/MenuMessage/index.js';
+import { CustomComboBoxLocaleHelper } from '../../../internal/CustomComboBox/locale/index.js';
+import { LangCodes, LocaleContext } from '../../../lib/locale/index.js';
+import { defaultLangCode } from '../../../lib/locale/constants.js';
+import { ComboBox } from '../ComboBox.js';
+import { InputLikeTextDataTids } from '../../../internal/InputLikeText/index.js';
+import { MenuItem, MenuItemDataTids } from '../../MenuItem/index.js';
+import { MenuDataTids } from '../../../internal/Menu/index.js';
+import { clickOutside, delay } from '../../../lib/utils.js';
+import { ComboBoxMenuDataTids, DELAY_BEFORE_SHOW_LOADER, LOADER_SHOW_TIME, } from '../../../internal/CustomComboBox/index.js';
+import { ComboBoxViewIds } from '../../../internal/CustomComboBox/ComboBoxView.js';
+import { SpinnerDataTids } from '../../Spinner/index.js';
+function searchFactory(promise) {
+    var _this = this;
+    var searchCalled;
+    var searchPromise = new Promise(function (resolve) {
+        return (searchCalled = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, resolve()];
+                }
+            });
+        }); });
+    });
+    var search = vi.fn(function () {
+        searchCalled();
+        return promise;
+    });
+    promise.catch(function (error) {
+        console.error(error);
+    });
+    return [search, searchPromise];
+}
+describe('ComboBox', function () {
+    var comboboxRef = React.createRef();
+    var testValues = [
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+        { value: '4', label: 'Four' },
+    ];
+    it('renders', function () {
+        expect(function () { return render(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); } })); }).not.toThrow();
+    });
+    it('has id attribute', function () {
+        var comboboxId = 'comboboxId';
+        var result = render(React.createElement(ComboBox, { id: comboboxId, getItems: function () { return Promise.resolve([]); } }));
+        expect(result.container.querySelector("#".concat(comboboxId))).not.toBeNull();
+    });
+    it('focuses on click to input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('textbox')).toHaveFocus();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('fetches item when focused', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var search;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    search = vi.fn(function () { return Promise.resolve([]); });
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    expect(search).toHaveBeenCalledWith('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('fetches items on input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var search;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    search = vi.fn(function () { return Promise.resolve([]); });
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'world' } });
+                    expect(search).toHaveBeenCalledTimes(2);
+                    expect(search.mock.calls[1][0]).toBe('world');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('opens menu in dropdown container on search resolve', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = searchFactory(Promise.resolve(testValues)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    expect(screen.queryAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(testValues.length);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('sets items on search resolve', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = ['one', 'two', 'three'];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search, renderItem: function (x) { return x; } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    expect(screen.queryAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(items.length);
+                    screen.getAllByTestId(ComboBoxMenuDataTids.item).forEach(function (item, index) {
+                        expect(item).toHaveTextContent(items[index]);
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls onValueChange if clicked on item', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise, onValueChange, clickedItemIndex;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = ['one', 'two', 'three'];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    onValueChange = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: search, onValueChange: onValueChange, renderItem: function (x) { return x; } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    clickedItemIndex = 0;
+                    screen.getAllByTestId(ComboBoxMenuDataTids.item)[clickedItemIndex].click();
+                    expect(onValueChange).toHaveBeenCalledWith(items[clickedItemIndex]);
+                    expect(onValueChange).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('selects first item on Enter', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise, onValueChange;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = ['one', 'two', 'three'];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    onValueChange = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: search, onValueChange: onValueChange, renderItem: function (x) { return x; }, value: 'one' }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), '{enter}')];
+                case 3:
+                    _b.sent();
+                    expect(onValueChange).toHaveBeenCalledWith('one');
+                    expect(onValueChange).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('not auto selecting an item on entry when the search is empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, onValueChange, root;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    items = ['Item 1', 'Item 2', 'Item 3'];
+                    onValueChange = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: function (q) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            return [2 /*return*/, items.filter(function (x) { return x.toLowerCase().includes(q.toLowerCase()); })];
+                        }); }); }, onValueChange: onValueChange }));
+                    root = screen.getByTestId(InputLikeTextDataTids.root);
+                    return [4 /*yield*/, userEvent.click(root)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.type(root, 'Item ')];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.type(root, 'Item 4')];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.keyboard('{enter}')];
+                case 5:
+                    _a.sent();
+                    expect(onValueChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('selects the first item when search found multiple items', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, onValueChange, root;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    items = ['Item 1', 'Item 2', 'Item 3'];
+                    onValueChange = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: function (q) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            return [2 /*return*/, items.filter(function (x) { return x.toLowerCase().includes(q.toLowerCase()); })];
+                        }); }); }, onValueChange: onValueChange }));
+                    root = screen.getByTestId(InputLikeTextDataTids.root);
+                    return [4 /*yield*/, userEvent.click(root)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.type(root, 'Item ')];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, delay(100)];
+                case 3:
+                    _a.sent(); // wait for load and render search list
+                    return [4 /*yield*/, userEvent.keyboard('{enter}')];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, waitFor(function () { return expect(onValueChange).toHaveBeenCalledWith('Item 1'); })];
+                case 5:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('opens menu on arrow down', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = ['one', 'two', 'three'];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search, renderItem: function (x) { return x; }, value: 'one' }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.keyboard('{enter}')];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.keyboard('{arrowdown}')];
+                case 3:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 4:
+                    _b.sent();
+                    expect(screen.queryAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(items.length);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('retries request on Enter if rejected', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = searchFactory(Promise.reject()), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search, renderItem: function (x) { return x.label; } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, delay(100)];
+                case 3:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), '{enter}')];
+                case 4:
+                    _b.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 5:
+                    _b.sent();
+                    expect(search).toHaveBeenCalledWith('');
+                    expect(search).toHaveBeenCalledTimes(2);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not submit the form on the first Enter key press but submits on the second', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handleSubmit, getItems, input;
+        return __generator(this, function (_a) {
+            handleSubmit = vi.fn();
+            getItems = function () {
+                return Promise.resolve(['one', 'two', 'three']);
+            };
+            render(React.createElement("form", { onSubmit: handleSubmit },
+                React.createElement(ComboBox, { getItems: getItems, value: 'one' })));
+            input = screen.getByTestId(InputLikeTextDataTids.root);
+            fireEvent.click(input);
+            fireEvent.keyPress(input, { key: 'Enter', code: 'Enter' });
+            expect(handleSubmit).not.toHaveBeenCalled();
+            fireEvent.submit(input);
+            expect(handleSubmit).toHaveBeenCalledTimes(1);
+            return [2 /*return*/];
+        });
+    }); });
+    it('keeps focus after a click on the refresh button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = searchFactory(Promise.reject()), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search, renderItem: function (x) { return x.label; } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    expect(screen.getByTestId(MenuMessageDataTids.root)).toBeInTheDocument();
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(MenuItemDataTids.root))];
+                case 3:
+                    _b.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 4:
+                    _b.sent();
+                    expect(search).toHaveBeenCalledTimes(2);
+                    expect(screen.getByRole('textbox')).toHaveFocus();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls onUnexpectedInput on click outside', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, search, promise, onUnexpectedInput;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = searchFactory(Promise.reject()), search = _a[0], promise = _a[1];
+                    onUnexpectedInput = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: search, onUnexpectedInput: onUnexpectedInput }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), 'one')];
+                case 3:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 4:
+                    _b.sent();
+                    clickOutside();
+                    return [4 /*yield*/, delay(0)];
+                case 5:
+                    _b.sent();
+                    expect(onUnexpectedInput).toHaveBeenCalledWith('one');
+                    expect(onUnexpectedInput).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls onValueChange if onUnexpectedInput return defined value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onValueChange, mockFn;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onValueChange = vi.fn();
+                    mockFn = vi
+                        .fn(function () { return 'default'; })
+                        .mockImplementationOnce(function () { return null; })
+                        .mockImplementationOnce(function () { return 'one'; })
+                        .mockImplementationOnce(function () { return undefined; });
+                    render(React.createElement(ComboBox, { onValueChange: onValueChange, onUnexpectedInput: mockFn, getItems: function () { return Promise.resolve([]); } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), 'one')];
+                case 3:
+                    _a.sent();
+                    clickOutside();
+                    return [4 /*yield*/, delay(0)];
+                case 4:
+                    _a.sent();
+                    expect(mockFn).toHaveBeenCalledWith('one');
+                    expect(mockFn).toHaveReturnedWith(null);
+                    expect(onValueChange).toHaveBeenCalledWith(null);
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), 'one')];
+                case 6:
+                    _a.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 7:
+                    _a.sent();
+                    clickOutside();
+                    return [4 /*yield*/, delay(0)];
+                case 8:
+                    _a.sent();
+                    expect(mockFn).toHaveReturnedWith('one');
+                    expect(onValueChange).toHaveBeenCalledWith('one');
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 9:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), 'one')];
+                case 10:
+                    _a.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 11:
+                    _a.sent();
+                    clickOutside();
+                    return [4 /*yield*/, delay(0)];
+                case 12:
+                    _a.sent();
+                    expect(mockFn).toHaveBeenCalledWith('one');
+                    expect(mockFn).toHaveReturnedWith(undefined);
+                    expect(onValueChange).not.toHaveBeenCalledWith(undefined);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls onFocus on focus', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onFocus;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onFocus = vi.fn();
+                    render(React.createElement(ComboBox, { onFocus: onFocus, getItems: function () { return Promise.resolve([]); } }));
+                    return [4 /*yield*/, userEvent.tab()];
+                case 1:
+                    _a.sent();
+                    expect(onFocus).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('navigation from Tab open dropdown', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(React.createElement(React.Fragment, null,
+                        React.createElement(Input, { "data-tid": "test-input" }),
+                        React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); } })));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId('test-input'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, userEvent.keyboard('{tab}')];
+                case 2:
+                    _a.sent();
+                    expect(screen.queryByTestId(MenuDataTids.root)).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('with mask', function () {
+        it('correct input value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var testValues, getItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        testValues = [
+                            { value: '79120439827', label: '+7 912 043-98-27' },
+                            { value: '79120432228', label: '+7 912 043-22-28' },
+                            { value: '79120432229', label: '+7 912 043-22-29' },
+                        ];
+                        getItems = function (query) { return Promise.resolve(testValues.filter(function (item) { return item.label.includes(query); })); };
+                        render(React.createElement(ComboBox, { mask: "+7 999 999-99-99", getItems: getItems }));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), '9120439827')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByRole('textbox')).toHaveValue('+7 912 043-98-27');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('correct value on paste with mask', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var testValues, getItems, changeHandler, unexpectedInputHandler, maskOnBeforePasteHandler;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        testValues = [
+                            { value: '79120439827', label: '+7 912 043-98-27' },
+                            { value: '79120432228', label: '+7 912 043-22-28' },
+                            { value: '79120432229', label: '+7 912 043-22-29' },
+                        ];
+                        getItems = function (query) {
+                            return Promise.resolve(testValues.filter(function (item) { return query && item.label.includes(query); }));
+                        };
+                        changeHandler = vi.fn();
+                        unexpectedInputHandler = vi.fn(function (value) { return testValues.find(function (item) { return item.label.includes(value); }); });
+                        maskOnBeforePasteHandler = vi.fn(function (value) { return value.slice(3); });
+                        render(React.createElement(ComboBox, { onValueChange: changeHandler, getItems: getItems, mask: "+7 999 999-99-99", onBeforePasteInMask: maskOnBeforePasteHandler, onUnexpectedInput: unexpectedInputHandler }));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.paste(testValues[1].label)];
+                    case 2:
+                        _a.sent();
+                        expect(maskOnBeforePasteHandler).toHaveBeenCalledTimes(1);
+                        expect(screen.getByRole('textbox')).toHaveValue('+7 912 043-22-28');
+                        return [4 /*yield*/, delay(300)];
+                    case 3:
+                        _a.sent();
+                        clickOutside();
+                        return [4 /*yield*/, delay(0)];
+                    case 4:
+                        _a.sent();
+                        expect(unexpectedInputHandler).toHaveBeenCalledWith('912 043-22-28');
+                        expect(changeHandler).toHaveBeenCalledWith(testValues[1]);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('call focus with param withoutOpenDropdown=true', function () {
+        beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                render(React.createElement(ComboBox, { ref: comboboxRef, getItems: function () { return Promise.resolve([{ value: 'one', label: 'one' }]); }, key: "ComboBox" }));
+                (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.focus({ withoutOpenDropdown: true });
+                return [2 /*return*/];
+            });
+        }); });
+        it('do not open dropdown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                expect(screen.queryByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).not.toBeInTheDocument();
+                expect(screen.getByRole('textbox')).toHaveFocus();
+                return [2 /*return*/];
+            });
+        }); });
+        it('click on input should open dropdown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('arrow down should open dropdown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.keyboard('{arrowdown}')];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('arrow up should open dropdown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.keyboard('{arrowup}')];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('edit value should open dropdown', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.keyboard('1')];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('onBlur callback', function () {
+        var onBlur = vi.fn();
+        var _a = searchFactory(Promise.resolve(['item'])), search = _a[0], promise = _a[1];
+        var TestCombobox = function () { return React.createElement(ComboBox, { getItems: search, onBlur: onBlur }); };
+        beforeEach(function () {
+            render(React.createElement(TestCombobox, null));
+            onBlur.mockClear();
+        });
+        it('calls onBlur on click outside when menu is open', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, promise];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toBeInTheDocument();
+                        clickOutside();
+                        return [4 /*yield*/, delay(0)];
+                    case 3:
+                        _a.sent();
+                        expect(screen.queryByTestId(InputDataTids.root)).not.toBeInTheDocument();
+                        expect(onBlur).toHaveBeenCalledTimes(1);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('calls onBlur on input blur when menu is closed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        act(function () {
+                            fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Escape', code: 'Escape' });
+                        });
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                        fireEvent.blur(screen.getByRole('textbox'));
+                        return [4 /*yield*/, delay(0)];
+                    case 2:
+                        _a.sent();
+                        expect(onBlur).toHaveBeenCalledTimes(1);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    it('renders custom elements in menu', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var content, items, _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    content = 'Hello, world';
+                    items = [React.createElement("div", { key: "0" }, content)];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                    expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toHaveTextContent(content);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls default onClick on custom element select', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise, onValueChange;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = [
+                        React.createElement("div", { key: "0", id: "hello", "data-name": "world" }, "Hello, world"),
+                    ];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    onValueChange = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: search, onValueChange: onValueChange }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.click(screen.getByText('Hello, world'))];
+                case 3:
+                    _b.sent();
+                    expect(onValueChange).toHaveBeenCalledTimes(1);
+                    expect(onValueChange).toHaveBeenCalledWith({
+                        id: 'hello',
+                        'data-name': 'world',
+                        children: 'Hello, world',
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls element onClick on custom element select', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onClick, items, _a, search, promise;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onClick = vi.fn();
+                    items = [
+                        React.createElement("div", { key: "0", onClick: onClick }, "Hello, world"),
+                    ];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    return [4 /*yield*/, userEvent.click(screen.getByText('Hello, world'))];
+                case 3:
+                    _b.sent();
+                    expect(onClick).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('handles maxLength', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, search, promise, input;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = searchFactory(Promise.resolve([])), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search, maxLength: 2 }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    input = screen.getByRole('textbox');
+                    expect(input).toHaveProperty('maxLength', 2);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("don't focus on error and value change", function () {
+        var rerender = render(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); } })).rerender;
+        rerender(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); }, value: "1", error: true }));
+        expect(screen.getByTestId(InputLikeTextDataTids.root)).not.toHaveFocus();
+    });
+    it('clear input value if onUnexpectedInput return null', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(React.createElement(ComboBox, { onUnexpectedInput: function () { return null; }, getItems: function () { return Promise.resolve([]); } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'foo' } });
+                    act(function () {
+                        clickOutside();
+                    });
+                    expect(screen.getByRole('textbox')).toHaveTextContent('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("shouldn't open on receive items if not focused", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var search;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    search = searchFactory(delay(500).then(function () { return []; }))[0];
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delay(300)];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                    expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                    clickOutside();
+                    return [4 /*yield*/, delay(0)];
+                case 3:
+                    _a.sent();
+                    expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                    expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                    return [4 /*yield*/, delay(1000)];
+                case 4:
+                    _a.sent();
+                    expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                    expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not highlight menu item on focus with empty input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise, menuItems;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = ['one', 'two', 'three'];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    menuItems = screen.getAllByTestId(ComboBoxMenuDataTids.item);
+                    expect(menuItems.find(function (element) { return element.getAttribute('data-visual-state-hover') === ''; })).toBeFalsy();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('highlights menu item on focus with non-empty input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var items, _a, search, promise, menuItems;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    items = ['one', 'two', 'three'];
+                    _a = searchFactory(Promise.resolve(items)), search = _a[0], promise = _a[1];
+                    render(React.createElement(ComboBox, { getItems: search, renderItem: function (x) { return x; }, value: 'one' }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, promise];
+                case 2:
+                    _b.sent();
+                    menuItems = screen.getAllByTestId(ComboBoxMenuDataTids.item);
+                    expect(menuItems.find(function (element) { return element.hasAttribute('data-visual-state-hover'); })).toHaveAttribute('data-visual-state-hover');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('update input text when value changes if there was no editing', function () {
+        var getItems = vi.fn(function (searchQuery) {
+            return Promise.resolve(testValues.filter(function (x) { return x.label.includes(searchQuery); }));
+        });
+        it('in default mode', function () {
+            var rerender = render(React.createElement(ComboBox, { value: testValues[0], getItems: getItems })).rerender;
+            expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveTextContent(testValues[0].label);
+            rerender(React.createElement(ComboBox, { value: testValues[1], getItems: getItems }));
+            expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveTextContent(testValues[1].label);
+            rerender(React.createElement(ComboBox, { value: null, getItems: getItems }));
+            expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveTextContent('');
+        });
+        it('in autocomplete mode', function () {
+            var rerender = render(React.createElement(ComboBox, { value: testValues[0], drawArrow: false, searchOnFocus: false, getItems: getItems })).rerender;
+            expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveTextContent(testValues[0].label);
+            rerender(React.createElement(ComboBox, { value: testValues[1], drawArrow: false, searchOnFocus: false, getItems: getItems }));
+            expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveTextContent(testValues[1].label);
+            rerender(React.createElement(ComboBox, { value: null, drawArrow: false, searchOnFocus: false, getItems: getItems }));
+            expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveTextContent('');
+        });
+    });
+    it('does not do search on focus in autocomplete mode', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var value, getItems;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    value = { value: 1, label: 'one' };
+                    getItems = vi.fn();
+                    render(React.createElement(ComboBox, { getItems: getItems, value: value, drawArrow: false, searchOnFocus: false }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 2:
+                    _a.sent();
+                    expect(getItems).toHaveBeenCalledTimes(0);
+                    expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('reset', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    render(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); }, ref: comboboxRef }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'foo' } });
+                    expect(screen.getByRole('textbox')).toHaveValue('foo');
+                    clickOutside();
+                    (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+                    expect(screen.getByTestId(InputLikeTextDataTids.input)).toHaveTextContent('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('onValueChange if single item', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getItems, changeHandler;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    getItems = function (query) {
+                        return Promise.resolve(testValues.filter(function (item) {
+                            return item.label.includes(query);
+                        }));
+                    };
+                    changeHandler = vi.fn();
+                    render(React.createElement(ComboBox, { onValueChange: changeHandler, getItems: getItems }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    fireEvent.change(screen.getByRole('textbox'), { target: { value: testValues[1].label } });
+                    return [4 /*yield*/, delay(300)];
+                case 2:
+                    _a.sent();
+                    clickOutside();
+                    return [4 /*yield*/, delay(0)];
+                case 3:
+                    _a.sent();
+                    expect(changeHandler).toHaveBeenCalledWith(testValues[1]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('open/close methods', function () {
+        beforeEach(function () {
+            render(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); }, ref: comboboxRef }));
+        });
+        it('opens', function () {
+            var _a;
+            (_a = comboboxRef === null || comboboxRef === void 0 ? void 0 : comboboxRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            expect(screen.getByTestId(ComboBoxMenuDataTids.notFound)).toBeInTheDocument();
+        });
+        it('closes', function () {
+            var _a, _b;
+            (_a = comboboxRef === null || comboboxRef === void 0 ? void 0 : comboboxRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            (_b = comboboxRef === null || comboboxRef === void 0 ? void 0 : comboboxRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+        });
+        it('closes on clickOutside', function () {
+            var _a;
+            (_a = comboboxRef === null || comboboxRef === void 0 ? void 0 : comboboxRef.current) === null || _a === void 0 ? void 0 : _a.open();
+            clickOutside();
+            expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+        });
+    });
+    describe('search by method', function () {
+        var query = 'One';
+        var getItems = vi.fn(function (query) { return Promise.resolve(testValues.filter(function (x) { return x.label.includes(query); })); });
+        beforeEach(function () {
+            getItems.mockClear();
+        });
+        it('opens menu', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search();
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(screen.getAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(testValues.length);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('searches current value by default', function () {
+            var _a;
+            var value = testValues[1];
+            render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef, value: value }));
+            (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search();
+            delay(0);
+            expect(getItems).toHaveBeenCalledTimes(1);
+            expect(getItems).toHaveBeenCalledWith(value.label);
+        });
+        it('searches given query', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledTimes(1);
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('keeps focus in input after', function () {
+        var getItems = vi.fn(function (query) { return Promise.resolve(testValues.filter(function (x) { return x.label.includes(query); })); });
+        var onFocus = vi.fn();
+        var onBlur = vi.fn();
+        beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { getItems: getItems, onFocus: onFocus, onBlur: onBlur }));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        delay(0);
+                        onFocus.mockClear();
+                        onBlur.mockClear();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('click on item', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.click(screen.getAllByTestId(ComboBoxMenuDataTids.item)[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, delay(0)];
+                    case 2:
+                        _a.sent(); // await for restore focus
+                        expect(screen.getByRole('textbox')).toHaveFocus();
+                        // input text is not selected
+                        expect(document.activeElement.selectionStart).toBe(document.activeElement.selectionEnd);
+                        expect(onFocus).toHaveBeenCalledTimes(0);
+                        expect(onBlur).toHaveBeenCalledTimes(0);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('Enter on item', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.keyboard('{arrowdown}')];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.keyboard('{enter}')];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, delay(0)];
+                    case 3:
+                        _a.sent();
+                        expect(screen.getByRole('textbox')).toHaveFocus();
+                        // input text is not selected
+                        expect(document.activeElement.selectionStart).toBe(document.activeElement.selectionEnd);
+                        expect(onFocus).toHaveBeenCalledTimes(0);
+                        expect(onBlur).toHaveBeenCalledTimes(0);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('click on input', function () {
+        var getItems = vi.fn(function (query) { return Promise.resolve(testValues.filter(function (x) { return x.label.includes(query); })); });
+        describe('in default mode', function () {
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                            return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                        case 1:
+                            _a.sent();
+                            getItems.mockClear();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('opens menu if it is closed', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                            expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                            return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                        case 1:
+                            _b.sent();
+                            return [4 /*yield*/, delay(0)];
+                        case 2:
+                            _b.sent();
+                            expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                            expect(screen.getAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(testValues.length);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('runs empty search if menu is closed', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                            delay(0);
+                            expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                            return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                        case 1:
+                            _b.sent();
+                            expect(getItems).toHaveBeenCalledWith('');
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it("doesn't run search if menu is open", function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                        case 1:
+                            _a.sent();
+                            expect(getItems).toHaveBeenCalledTimes(0);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('in autocomplete mode', function () {
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            render(React.createElement(ComboBox, { drawArrow: false, searchOnFocus: false, getItems: getItems, ref: comboboxRef }));
+                            return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                        case 1:
+                            _a.sent();
+                            getItems.mockClear();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it("doesn't open menu if it is closed", function () { return __awaiter(void 0, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                            return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                        case 1:
+                            _b.sent();
+                            expect(screen.queryByTestId(ComboBoxMenuDataTids.items)).not.toBeInTheDocument();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it("doesn't run search if menu is closed", function () { return __awaiter(void 0, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                            return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                        case 1:
+                            _b.sent();
+                            expect(getItems).toHaveBeenCalledTimes(0);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it("doesn't run search if menu is open", function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                        case 1:
+                            _a.sent();
+                            expect(getItems).toHaveBeenCalledTimes(0);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+    describe('Search', function () {
+        var query = 'One';
+        it('without delay', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        getItems = vi.fn(function (query) { return Promise.resolve(testValues.filter(function (x) { return x.label.includes(query); })); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(query);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("with delay < ".concat(DELAY_BEFORE_SHOW_LOADER), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 200)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues.filter(function (x) { return x.label.includes(query); }))];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER)];
+                    case 2:
+                        _b.sent();
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(query);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("with delay > ".concat(DELAY_BEFORE_SHOW_LOADER), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER + 200)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues.filter(function (x) { return x.label.includes(query); }))];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER)];
+                    case 2:
+                        _b.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, delay(LOADER_SHOW_TIME)];
+                    case 3:
+                        _b.sent();
+                        return [4 /*yield*/, delay(0)];
+                    case 4:
+                        _b.sent();
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(query);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('rejected without delay', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return Promise.reject(); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId(MenuMessageDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.failed, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("rejected with delay < ".concat(DELAY_BEFORE_SHOW_LOADER), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 200)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.reject()];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER)];
+                    case 2:
+                        _b.sent();
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId(MenuMessageDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.failed, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("rejected with delay > ".concat(DELAY_BEFORE_SHOW_LOADER), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER + 200)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.reject()];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _b.sent();
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER)];
+                    case 2:
+                        _b.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId(MenuMessageDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, delay(LOADER_SHOW_TIME)];
+                    case 3:
+                        _b.sent();
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId(MenuMessageDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.failed, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('twice without delay', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var secondQuery, getItems;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        secondQuery = 'Two';
+                        getItems = vi.fn(function (searchQuery) { return Promise.resolve(testValues.filter(function (x) { return x.label.includes(searchQuery); })); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.search(secondQuery);
+                        return [4 /*yield*/, delay(0)];
+                    case 1:
+                        _c.sent();
+                        expect(getItems).toHaveBeenCalledTimes(2);
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(secondQuery);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("twice with delay < ".concat(DELAY_BEFORE_SHOW_LOADER), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var secondQuery, getItems;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        secondQuery = 'Two';
+                        getItems = vi.fn(function (searchQuery) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 250)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues.filter(function (i) { return i.label.includes(searchQuery); }))];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 300)];
+                    case 1:
+                        _c.sent();
+                        (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.search(secondQuery);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER)];
+                    case 2:
+                        _c.sent();
+                        expect(getItems).toHaveBeenCalledTimes(2);
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(secondQuery);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("twice with delay < ".concat(DELAY_BEFORE_SHOW_LOADER, " loader"), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var secondQuery, getItems;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        secondQuery = 'Two';
+                        getItems = vi.fn(function (searchQuery) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 100)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues.filter(function (i) { return i.label.includes(searchQuery); }))];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 200)];
+                    case 1:
+                        _c.sent();
+                        (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.search(secondQuery);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 100)];
+                    case 2:
+                        _c.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, delay(LOADER_SHOW_TIME + 100)];
+                    case 3:
+                        _c.sent();
+                        expect(getItems).toHaveBeenCalledTimes(2);
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(secondQuery);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("twice with delay > ".concat(DELAY_BEFORE_SHOW_LOADER), function () { return __awaiter(void 0, void 0, void 0, function () {
+            var secondQuery, getItems;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        secondQuery = 'Two';
+                        getItems = vi.fn(function (searchQuery) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER + 200)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues.filter(function (i) { return i.label.includes(searchQuery); }))];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 300)];
+                    case 1:
+                        _c.sent();
+                        (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.search(secondQuery);
+                        return [4 /*yield*/, delay(300)];
+                    case 2:
+                        _c.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, delay(LOADER_SHOW_TIME + 100)];
+                    case 3:
+                        _c.sent();
+                        expect(getItems).toHaveBeenCalledTimes(2);
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(secondQuery);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('twice with slow then fast requests', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var delays, secondQuery, getItems;
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        delays = [DELAY_BEFORE_SHOW_LOADER + 200, DELAY_BEFORE_SHOW_LOADER - 200];
+                        secondQuery = 'Two';
+                        getItems = vi.fn(function (searchQuery) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(delays.shift() || 0)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues.filter(function (i) { return i.label.includes(searchQuery); }))];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.search(query);
+                        return [4 /*yield*/, delay(300)];
+                    case 1:
+                        _c.sent();
+                        (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.search(secondQuery);
+                        return [4 /*yield*/, delay(DELAY_BEFORE_SHOW_LOADER - 300)];
+                    case 2:
+                        _c.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, delay(200)];
+                    case 3:
+                        _c.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.loading, " ").concat(MenuDataTids.root)));
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, delay(LOADER_SHOW_TIME - 200)];
+                    case 4:
+                        _c.sent();
+                        expect(getItems).toHaveBeenCalledTimes(2);
+                        expect(getItems).toHaveBeenCalledWith(query);
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        expect(screen.getByTestId("".concat(ComboBoxMenuDataTids.items, " ").concat(MenuDataTids.root))).toBeInTheDocument();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.item)).toHaveTextContent(secondQuery);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('long request and blur before it resolves', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(500)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues)];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems }));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, delay(300)];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        clickOutside();
+                        return [4 /*yield*/, delay(0)];
+                    case 3:
+                        _a.sent();
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, delay(300)];
+                    case 5:
+                        _a.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('long request and blur after it resolves', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var getItems;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        getItems = vi.fn(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, delay(500)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/, Promise.resolve(testValues)];
+                                }
+                            });
+                        }); });
+                        render(React.createElement(ComboBox, { getItems: getItems }));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, delay(600)];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        clickOutside();
+                        return [4 /*yield*/, delay(0)];
+                    case 3:
+                        _a.sent();
+                        expect(screen.queryByTestId(SpinnerDataTids.root)).not.toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, delay(300)];
+                    case 5:
+                        _a.sent();
+                        expect(screen.getByTestId(SpinnerDataTids.root)).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Locale', function () {
+        var search;
+        var promise;
+        beforeEach(function () {
+            var _a;
+            _a = searchFactory(Promise.resolve(null)), search = _a[0], promise = _a[1];
+        });
+        var focus = function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, promise];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        var TestCombobox = function () { return React.createElement(ComboBox, { getItems: search }); };
+        var ComboboxWithLocaleProvider = function (_a) {
+            var _b = _a.langCode, langCode = _b === void 0 ? defaultLangCode : _b, locale = _a.locale;
+            return (React.createElement(LocaleContext.Provider, { value: {
+                    langCode: langCode,
+                    locale: locale,
+                } },
+                React.createElement(TestCombobox, null)));
+        };
+        it('render without LocaleProvider', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, expectedText;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {};
+                        render(React.createElement(TestCombobox, __assign({}, props)));
+                        expectedText = CustomComboBoxLocaleHelper.get(defaultLangCode).notFound;
+                        return [4 /*yield*/, focus()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.notFound)).toHaveTextContent(expectedText);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('render default locale', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, expectedText;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {};
+                        render(React.createElement(ComboboxWithLocaleProvider, __assign({}, props)));
+                        expectedText = CustomComboBoxLocaleHelper.get(defaultLangCode).notFound;
+                        return [4 /*yield*/, focus()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.notFound)).toHaveTextContent(expectedText);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('render correct locale when set langCode', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, expectedText;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = { langCode: LangCodes.en_GB };
+                        render(React.createElement(ComboboxWithLocaleProvider, __assign({}, props)));
+                        expectedText = CustomComboBoxLocaleHelper.get(LangCodes.en_GB).notFound;
+                        return [4 /*yield*/, focus()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.notFound)).toHaveTextContent(expectedText);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('render custom locale', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var customText, props;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        customText = 'custom notFound';
+                        props = { locale: { ComboBox: { notFound: customText } } };
+                        render(React.createElement(ComboboxWithLocaleProvider, __assign({}, props)));
+                        return [4 /*yield*/, focus()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.notFound)).toHaveTextContent(customText);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('updates when langCode changes', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var rerender, expected;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        rerender = render(React.createElement(ComboboxWithLocaleProvider, { langCode: LangCodes.en_GB })).rerender;
+                        expected = CustomComboBoxLocaleHelper.get(LangCodes.ru_RU).notFound;
+                        rerender(React.createElement(ComboboxWithLocaleProvider, { langCode: LangCodes.ru_RU }));
+                        return [4 /*yield*/, focus()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByTestId(ComboBoxMenuDataTids.notFound)).toHaveTextContent(expected);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    it.each(['', null, undefined])('should clear the value when %s passed', function (testValue) { return __awaiter(void 0, void 0, void 0, function () {
+        var Comp, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    Comp = function () {
+                        var _a = useState({ value: 1, label: 'First' }), value = _a[0], setValue = _a[1];
+                        var getItems = function () {
+                            return Promise.resolve([{ value: 1, label: 'First' }]);
+                        };
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(ComboBox, { getItems: getItems, onValueChange: setValue, value: value }),
+                            React.createElement("button", { onClick: function () { return setValue(testValue); } }, "Clear")));
+                    };
+                    render(React.createElement(Comp, null));
+                    input = screen.getByTestId('InputLikeText__input');
+                    expect(input).toHaveTextContent(/^First$/);
+                    return [4 /*yield*/, userEvent.click(screen.getByRole('button', { name: 'Clear' }))];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveTextContent('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('with add button', function () {
+        var Comp = function () {
+            var _a = useState({ value: 3, label: 'Third' }), selected = _a[0], setSelected = _a[1];
+            var _b = useState(false), shouldRenderAddButton = _b[0], setShouldRenderAddButton = _b[1];
+            var _c = useState(''), query = _c[0], setQuery = _c[1];
+            var _d = useState([
+                { value: 1, label: 'First' },
+                { value: 2, label: 'Second' },
+                { value: 3, label: 'Third' },
+            ]), items = _d[0], setItems = _d[1];
+            var getItems = function () {
+                return Promise.resolve(items);
+            };
+            var handleValueChange = function (value) {
+                setSelected(value);
+                setShouldRenderAddButton(false);
+            };
+            var handleInputValueChange = function (query) {
+                var isItemExists = items.find(function (x) { return x.label.toLowerCase() === query.toLowerCase(); });
+                setQuery(query);
+                setShouldRenderAddButton(!isItemExists);
+            };
+            var addItem = function () {
+                var newItem = {
+                    value: Math.max.apply(Math, items.map(function (_a) {
+                        var value = _a.value;
+                        return value;
+                    })) + 1,
+                    label: query,
+                };
+                setItems(__spreadArray(__spreadArray([], items, true), [newItem], false));
+                setSelected(newItem);
+                setShouldRenderAddButton(false);
+            };
+            var renderAddButton = function () {
+                if (!shouldRenderAddButton) {
+                    return null;
+                }
+                return (React.createElement(MenuItem, { link: true, onClick: addItem, "data-tid": 'addButton' },
+                    "+ \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C ",
+                    query));
+            };
+            return (React.createElement(ComboBox, { getItems: getItems, onValueChange: handleValueChange, value: selected, onInputValueChange: handleInputValueChange, renderAddButton: renderAddButton }));
+        };
+        var addNewElement = function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(Comp, null));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.clear(screen.getByRole('textbox'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.type(screen.getByRole('textbox'), 'newItem')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, delay(0)];
+                    case 4:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId('addButton'))];
+                    case 5:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        it('add new element', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, addNewElement()];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('textbox')).toHaveValue('newItem');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('show added item after blur', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, addNewElement()];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, delay(0)];
+                    case 3:
+                        _a.sent();
+                        expect(screen.getAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(4);
+                        clickOutside();
+                        return [4 /*yield*/, delay(0)];
+                    case 4:
+                        _a.sent();
+                        expect(screen.queryByTestId(ComboBoxMenuDataTids.item)).not.toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(screen.getByRole('textbox'))];
+                    case 5:
+                        _a.sent();
+                        return [4 /*yield*/, delay(0)];
+                    case 6:
+                        _a.sent();
+                        expect(screen.getAllByTestId(ComboBoxMenuDataTids.item)).toHaveLength(4);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    it("should change item's wrapper if itemWrapper prop defined", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var Comp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    Comp = function () {
+                        var items = [
+                            { value: 1, label: 'First' },
+                            { value: 2, label: 'Second' },
+                        ];
+                        var itemWrapper = function (item) {
+                            if ((item === null || item === void 0 ? void 0 : item.value) === 2) {
+                                return function (props) { return React.createElement("a", __assign({}, props, { href: "#" })); };
+                            }
+                            return function (props) { return React.createElement("button", __assign({}, props)); };
+                        };
+                        var getItems = function () { return Promise.resolve(items); };
+                        return React.createElement(ComboBox, { itemWrapper: itemWrapper, getItems: getItems });
+                    };
+                    render(React.createElement(Comp, null));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delay(0)];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByRole('button', { name: 'First' })).toBeInTheDocument();
+                    expect(screen.getByRole('link', { name: 'Second' })).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should have disabled input', function () {
+        render(React.createElement(ComboBox, { getItems: vi.fn(), disabled: true }));
+        expect(screen.getByTestId(InputLikeTextDataTids.nativeInput)).toBeDisabled();
+    });
+    it('should disable default browser autofill', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(React.createElement(ComboBox, { getItems: function () { return Promise.resolve([]); } }));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('textbox')).toHaveAttribute('autocomplete', 'off');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('a11y', function () {
+        it('props aria-describedby applied correctly on Input', function () {
+            var getItems = function () {
+                return Promise.resolve([{ value: 1, label: 'First' }]);
+            };
+            render(React.createElement("div", null,
+                React.createElement(ComboBox, { "aria-describedby": "elementId", getItems: getItems, autoFocus: true }),
+                React.createElement("p", { id: "elementId" }, "Description")));
+            var comboBox = screen.getByRole('textbox');
+            expect(comboBox).toHaveAttribute('aria-describedby', 'elementId');
+            expect(comboBox).toHaveAccessibleDescription('Description');
+        });
+        it('props aria-describedby applied correctly on InputLikeText', function () {
+            render(React.createElement("div", null,
+                React.createElement(ComboBox, { getItems: vi.fn(), disabled: true, "aria-describedby": "elementId" }),
+                React.createElement("p", { id: "elementId" }, "Description")));
+            var comboBox = screen.getByRole('textbox');
+            expect(comboBox).toHaveAttribute('aria-describedby', 'elementId');
+            expect(comboBox).toHaveAccessibleDescription('Description');
+        });
+        it('should connect input and dropdown through aria-controls', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { getItems: vi.fn() }));
+                        expect(screen.getByTestId(InputLikeTextDataTids.root)).toHaveAttribute('aria-controls', expect.stringContaining(ComboBoxViewIds.menu));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByTestId(InputDataTids.root)).toHaveAttribute('aria-controls', expect.stringContaining(ComboBoxViewIds.menu));
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(screen.getByTestId(MenuDataTids.root)).toHaveAttribute('id', expect.stringContaining(ComboBoxViewIds.menu));
+                            })];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('sets value for aria-label attribute', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var ariaLabel;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        ariaLabel = 'aria-label';
+                        render(React.createElement(ComboBox, { getItems: vi.fn(), "aria-label": ariaLabel }));
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        expect(screen.getByRole('textbox')).toHaveAttribute('aria-label', ariaLabel);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    it('should focus by method', function () {
+        var _a;
+        var getItems = vi.fn(function (searchQuery) {
+            return Promise.resolve(testValues.filter(function (x) { return x.label.includes(searchQuery); }));
+        });
+        render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        expect(screen.getByRole('textbox')).toHaveFocus();
+    });
+    it('should blur by method', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var getItems;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    getItems = vi.fn(function (searchQuery) {
+                        return Promise.resolve(testValues.filter(function (x) { return x.label.includes(searchQuery); }));
+                    });
+                    render(React.createElement(ComboBox, { getItems: getItems, ref: comboboxRef }));
+                    (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    expect(screen.getByRole('textbox')).toHaveFocus();
+                    (_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+                    return [4 /*yield*/, delay(0)];
+                case 1:
+                    _c.sent();
+                    expect(screen.queryByTestId(InputDataTids.root)).not.toBeInTheDocument();
+                    expect(screen.getByTestId(InputLikeTextDataTids.root)).not.toHaveFocus();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('allows value change in editing state', function () {
+        var initialValue = testValues[0];
+        var expectedValue = testValues[1];
+        var getItems = vi.fn(function (searchQuery) {
+            return Promise.resolve(testValues.filter(function (value) { return value.label.includes(searchQuery); }));
+        });
+        var TestComponent = function (_a) {
+            var initValue = _a.initValue, testValue = _a.testValue;
+            var _b = React.useState(initValue), selected = _b[0], setSelected = _b[1];
+            var handleValueChange = function () {
+                setSelected(expectedValue);
+            };
+            return (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: handleValueChange }, "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C"),
+                React.createElement(ComboBox, { ref: comboboxRef, value: testValue !== null && testValue !== void 0 ? testValue : selected, getItems: getItems, onValueChange: function (value) { return setSelected(value); } })));
+        };
+        it('should correctly render new value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, _b;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        render(React.createElement(TestComponent, { initValue: initialValue }));
+                        (_c = comboboxRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                        expect(screen.getByRole('textbox')).toHaveValue(initialValue.label);
+                        return [4 /*yield*/, userEvent.clear(screen.getByRole('textbox'))];
+                    case 1:
+                        _d.sent();
+                        _a = expect;
+                        return [4 /*yield*/, screen.findByRole('textbox')];
+                    case 2:
+                        _a.apply(void 0, [_d.sent()]).toHaveValue('');
+                        return [4 /*yield*/, userEvent.click(screen.getByRole('button', { name: 'Обновить' }))];
+                    case 3:
+                        _d.sent();
+                        _b = expect;
+                        return [4 /*yield*/, screen.findByRole('textbox')];
+                    case 4:
+                        _b.apply(void 0, [_d.sent()]).toHaveValue(expectedValue.label);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should correctly render new value in menu without closing', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var rerender, _a, _b, _c;
+            var _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        rerender = render(React.createElement(TestComponent, { testValue: initialValue })).rerender;
+                        (_d = comboboxRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                        _a = expect;
+                        return [4 /*yield*/, screen.findAllByTestId(ComboBoxMenuDataTids.item)];
+                    case 1:
+                        _a.apply(void 0, [_e.sent()]).toHaveLength(testValues.length);
+                        rerender(React.createElement(TestComponent, { testValue: expectedValue }));
+                        _b = expect;
+                        return [4 /*yield*/, screen.findByRole('textbox')];
+                    case 2:
+                        _b.apply(void 0, [_e.sent()]).toHaveValue(expectedValue.label);
+                        _c = expect;
+                        return [4 /*yield*/, screen.findByTestId(ComboBoxMenuDataTids.item)];
+                    case 3:
+                        _c.apply(void 0, [_e.sent()]).toHaveTextContent(expectedValue.label);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('with clear cross', function () {
+        var testValues = [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+            { value: '4', label: 'Four' },
+        ];
+        var getItems = vi.fn(function (searchQuery) {
+            return Promise.resolve(testValues.filter(function (x) { return x.label.includes(searchQuery); }));
+        });
+        var getTextbox = function () { return screen.getByRole('textbox'); };
+        var getClearCross = function () { return screen.getByTestId(InputDataTids.clearCross); };
+        var queryClearCross = function () { return screen.queryByTestId(InputDataTids.clearCross); };
+        it('clears controlled combobox', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var ControlledCombobox;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        ControlledCombobox = function () {
+                            var _a = React.useState({ value: '2', label: 'Two' }), value = _a[0], setValue = _a[1];
+                            return React.createElement(ComboBox, { getItems: getItems, showClearIcon: "always", value: value, onValueChange: setValue });
+                        };
+                        render(React.createElement(ControlledCombobox, null));
+                        expect(screen.getByText('Two')).toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(getClearCross())];
+                    case 1:
+                        _a.sent();
+                        expect(screen.queryByText('Two')).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('clears uncontrolled combobox', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var cross;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { showClearIcon: "always", getItems: getItems, ref: comboboxRef }));
+                        (_a = comboboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        return [4 /*yield*/, userEvent.type(getTextbox(), 'z')];
+                    case 1:
+                        _b.sent();
+                        expect(getTextbox()).toHaveValue('z');
+                        cross = getClearCross();
+                        expect(cross).toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(cross)];
+                    case 2:
+                        _b.sent();
+                        expect(cross).not.toBeInTheDocument();
+                        expect(getTextbox()).toHaveValue('');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('tests showClearIcon=always clear cross', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var texbox;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { showClearIcon: "always", getItems: getItems, ref: comboboxRef }));
+                        expect(queryClearCross()).toBeNull();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        expect(queryClearCross()).toBeNull();
+                        texbox = getTextbox();
+                        return [4 /*yield*/, userEvent.type(texbox, 'z')];
+                    case 2:
+                        _a.sent();
+                        expect(getClearCross()).toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(document.body)];
+                    case 3:
+                        _a.sent();
+                        // necessary because userEvent.click(document.body) doesn't unhover previous hovered element
+                        return [4 /*yield*/, userEvent.unhover(texbox)];
+                    case 4:
+                        // necessary because userEvent.click(document.body) doesn't unhover previous hovered element
+                        _a.sent();
+                        expect(getClearCross()).toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.clear(texbox)];
+                    case 5:
+                        _a.sent();
+                        expect(queryClearCross()).toBeNull();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('tests showClearIcon=auto clear cross', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var texbox;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { showClearIcon: "auto", getItems: getItems, ref: comboboxRef }));
+                        expect(queryClearCross()).toBeNull();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        texbox = getTextbox();
+                        return [4 /*yield*/, userEvent.type(texbox, 'z')];
+                    case 2:
+                        _a.sent();
+                        expect(texbox).toHaveValue('z');
+                        expect(getClearCross()).toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(document.body)];
+                    case 3:
+                        _a.sent();
+                        // necessary because userEvent.click(document.body) doesn't unhover previous hovered element
+                        return [4 /*yield*/, userEvent.unhover(texbox)];
+                    case 4:
+                        // necessary because userEvent.click(document.body) doesn't unhover previous hovered element
+                        _a.sent();
+                        expect(screen.queryByRole('textbox')).not.toHaveFocus();
+                        expect(queryClearCross()).toBeNull();
+                        return [4 /*yield*/, userEvent.hover(texbox)];
+                    case 5:
+                        _a.sent();
+                        expect(queryClearCross()).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('tests showClearIcon=never clear cross', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { showClearIcon: "never", value: testValues[0], getItems: getItems, ref: comboboxRef }));
+                        expect(queryClearCross()).not.toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        expect(queryClearCross()).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('tests showClearIcon when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        render(React.createElement(ComboBox, { disabled: true, showClearIcon: "always", value: testValues[0], getItems: getItems, ref: comboboxRef }));
+                        expect(queryClearCross()).not.toBeInTheDocument();
+                        return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                    case 1:
+                        _a.sent();
+                        expect(queryClearCross()).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});
+describe('mobile comboBox', function () {
+    var calcMatches = function (query) { return query === LIGHT_THEME.mobileMediaQuery; };
+    var oldMatchMedia = window.matchMedia;
+    var matchMediaMock = vi.fn().mockImplementation(function (query) {
+        return {
+            matches: calcMatches(query),
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        };
+    });
+    var comboBoxRef = React.createRef();
+    var state = { value: 1, label: 'First' };
+    var items = [
+        { value: 1, label: 'First' },
+        { value: 2, label: 'Second' },
+        { value: 3, label: 'Third' },
+    ];
+    var getItems = function (query) {
+        return Promise.resolve(items.filter(function (x) { return x.label.toLowerCase().includes(query.toLowerCase()) || x.value.toString(10) === query; }));
+    };
+    var close = function () { var _a; return (_a = comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.close(); };
+    var menuItemsCount = items.length;
+    beforeEach(function () {
+        window.matchMedia = matchMediaMock;
+    });
+    afterEach(function () {
+        window.matchMedia = oldMatchMedia;
+    });
+    var TestComponent = function () { return React.createElement(ComboBox, { ref: comboBoxRef, getItems: getItems, value: state }); };
+    it('should fully close by method', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(React.createElement(TestComponent, null));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, delay(500)];
+                case 2:
+                    _a.sent();
+                    close();
+                    expect(screen.queryByTestId(MobilePopupDataTids.root)).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should close and open again after being closed by public method', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    render(React.createElement(TestComponent, null));
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputLikeTextDataTids.root))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, delay(500)];
+                case 2:
+                    _b.sent();
+                    close();
+                    return [4 /*yield*/, userEvent.click(screen.getByTestId(InputDataTids.root))];
+                case 3:
+                    _b.sent();
+                    return [4 /*yield*/, delay(500)];
+                case 4:
+                    _b.sent();
+                    expect(screen.getByTestId(MobilePopupDataTids.root)).toBeInTheDocument();
+                    _a = expect;
+                    return [4 /*yield*/, screen.findAllByRole('button')];
+                case 5:
+                    _a.apply(void 0, [_b.sent()]).toHaveLength(menuItemsCount);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should fire onKeyDown on input value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onInputKeyDown;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onInputKeyDown = vi.fn();
+                    render(React.createElement(ComboBox, { ref: comboBoxRef, getItems: getItems, onInputKeyDown: onInputKeyDown }));
+                    return [4 /*yield*/, userEvent.type(screen.getByTestId(InputLikeTextDataTids.root), 'ab')];
+                case 1:
+                    _a.sent();
+                    expect(onInputKeyDown).toHaveBeenCalledTimes(2);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=ComboBox-test.js.map