@skbkontur/playwright-react-ui-components 1.13.2 → 1.14.0-beta.2

package/build/src/components/DatePicker.js

@@ -61,6 +61,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 var test_1 = require("@playwright/test");
@@ -69,11 +70,15 @@ var BaseComponent_1 = require("./BaseComponent");
 var utils_1 = require("../utils");
 var assertions_1 = require("../assertions");
 var dataTidSelector_1 = require("../utils/dataTidSelector");
+var LocatorSymbols_1 = require("../matchers/component/LocatorSymbols");
 var DatePicker = /** @class */ (function (_super) {
     __extends(DatePicker, _super);
     function DatePicker(rootLocator) {
         var _this = _super.call(this, rootLocator) || this;
         _this.rootLocator = rootLocator;
+        _this[_a] = function () { return _this.nativeInputLocator; };
+        _this[_b] = function () { return _this.nativeInputLocator; };
+        _this[_c] = function () { return _this.datePickerInputLocator; };
         _this.nativeInputLocator = rootLocator.locator('input');
         _this.datePickerInputLocator = rootLocator
             .locator((0, dataTidSelector_1.getDataTidSelector)(react_ui_1.DatePickerDataTids.input))
@@ -83,37 +88,37 @@ var DatePicker = /** @class */ (function (_super) {
     }
     DatePicker.prototype.isDisabled = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: return [4 /*yield*/, this.nativeInputLocator.isDisabled(options)];
-                    case 1: return [2 /*return*/, _a.sent()];
+                    case 1: return [2 /*return*/, _d.sent()];
                 }
             });
         });
     };
     DatePicker.prototype.getValue = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: return [4 /*yield*/, this.nativeInputLocator.inputValue(options)];
-                    case 1: return [2 /*return*/, _a.sent()];
+                    case 1: return [2 /*return*/, _d.sent()];
                 }
             });
         });
     };
     DatePicker.prototype.fill = function (value, options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: return [4 /*yield*/, this.clear()];
                     case 1:
-                        _a.sent();
+                        _d.sent();
                         return [4 /*yield*/, this.nativeInputLocator.pressSequentially(value, options)];
                     case 2:
-                        _a.sent();
+                        _d.sent();
                         return [4 /*yield*/, this.blur()];
                     case 3:
-                        _a.sent();
+                        _d.sent();
                         return [2 /*return*/];
                 }
             });
@@ -121,20 +126,20 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.clear = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: return [4 /*yield*/, this.focus()];
                     case 1:
-                        _a.sent();
+                        _d.sent();
                         return [4 /*yield*/, this.nativeInputLocator.press('Control+A', options)];
                     case 2:
-                        _a.sent();
+                        _d.sent();
                         return [4 /*yield*/, this.nativeInputLocator.press('Meta+A', options)];
                     case 3:
-                        _a.sent();
+                        _d.sent();
                         return [4 /*yield*/, this.nativeInputLocator.press('Backspace', options)];
                     case 4:
-                        _a.sent();
+                        _d.sent();
                         return [2 /*return*/];
                 }
             });
@@ -142,14 +147,14 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.focus = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: return [4 /*yield*/, (0, test_1.expect)(this.nativeInputLocator).toBeEnabled()];
                     case 1:
-                        _a.sent();
+                        _d.sent();
                         return [4 /*yield*/, this.datePickerInputLocator.focus(options)];
                     case 2:
-                        _a.sent();
+                        _d.sent();
                         return [2 /*return*/];
                 }
             });
@@ -157,11 +162,11 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.blur = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: return [4 /*yield*/, this.datePickerInputLocator.blur(options)];
                     case 1:
-                        _a.sent();
+                        _d.sent();
                         return [2 /*return*/];
                 }
             });
@@ -169,14 +174,14 @@ var DatePicker = /** @class */ (function (_super) {
     };
     DatePicker.prototype.click = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0: 
                     // NOTE: rootLocator всегда в состоянии enabled, даже если DatePicker disabled
                     return [4 /*yield*/, (0, test_1.expect)(this.nativeInputLocator).toBeEnabled()];
                     case 1:
                         // NOTE: rootLocator всегда в состоянии enabled, даже если DatePicker disabled
-                        _a.sent();
+                        _d.sent();
                         // NOTE: обычный клик по rootLocator может кликать в середину DatePicker, в результате курсор оказывается во второй ячейке
                         return [4 /*yield*/, this.rootLocator
                                 .locator('span[data-fragment]')
@@ -184,18 +189,14 @@ var DatePicker = /** @class */ (function (_super) {
                                 .click(__assign(__assign({}, options), { force: true }))];
                     case 2:
                         // NOTE: обычный клик по rootLocator может кликать в середину DatePicker, в результате курсор оказывается во второй ячейке
-                        _a.sent();
+                        _d.sent();
                         return [2 /*return*/];
                 }
             });
         });
     };
     DatePicker.prototype.getTooltip = function (type) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, (0, utils_1.getTooltip)(type, this)];
-            });
-        });
+        return (0, utils_1.getTooltip)(type, this);
     };
     DatePicker.prototype.expect = function () {
         return new assertions_1.DatePickerAssertions(this);
@@ -203,3 +204,4 @@ var DatePicker = /** @class */ (function (_super) {
     return DatePicker;
 }(BaseComponent_1.BaseComponent));
 exports.DatePicker = DatePicker;
+_a = LocatorSymbols_1.toControlElementLocator, _b = LocatorSymbols_1.toValueElementLocator, _c = LocatorSymbols_1.toFocusableElementLocator;

package/build/src/components/DateRangePicker.d.ts

@@ -3,10 +3,12 @@ import { BaseComponent } from './BaseComponent';
 import { DatePicker } from './DatePicker';
 import { DateRangePickerAssertions } from '../assertions';
 import type { ClearOptions } from '../options';
+import { toValueElementLocator } from '../matchers/component/LocatorSymbols';
 export declare class DateRangePicker extends BaseComponent {
     readonly rootLocator: Locator;
     readonly datePickerStart: DatePicker;
     readonly datePickerEnd: DatePicker;
+    readonly [toValueElementLocator]: () => Locator;
     constructor(rootLocator: Locator);
     fill(values: {
         start: string;

package/build/src/components/DateRangePicker.js

@@ -50,17 +50,20 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = void 0;
 var BaseComponent_1 = require("./BaseComponent");
 var DatePicker_1 = require("./DatePicker");
 var assertions_1 = require("../assertions");
 var dataTidSelector_1 = require("../utils/dataTidSelector");
+var LocatorSymbols_1 = require("../matchers/component/LocatorSymbols");
 var DateRangePicker = /** @class */ (function (_super) {
     __extends(DateRangePicker, _super);
     function DateRangePicker(rootLocator) {
         var _this = _super.call(this, rootLocator) || this;
         _this.rootLocator = rootLocator;
+        _this[_a] = function () { return _this.rootLocator; };
         _this.datePickerStart = new DatePicker_1.DatePicker(rootLocator.locator((0, dataTidSelector_1.getDataTidSelector)('DateRangePicker__start')));
         _this.datePickerEnd = new DatePicker_1.DatePicker(rootLocator.locator((0, dataTidSelector_1.getDataTidSelector)('DateRangePicker__end')));
         return _this;
@@ -68,21 +71,21 @@ var DateRangePicker = /** @class */ (function (_super) {
     DateRangePicker.prototype.fill = function (values) {
         return __awaiter(this, void 0, void 0, function () {
             var start, end;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         start = values.start, end = values.end;
                         if (!start) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.datePickerStart.fill(start)];
                     case 1:
-                        _a.sent();
-                        _a.label = 2;
+                        _b.sent();
+                        _b.label = 2;
                     case 2:
                         if (!end) return [3 /*break*/, 4];
                         return [4 /*yield*/, this.datePickerEnd.fill(end)];
                     case 3:
-                        _a.sent();
-                        _a.label = 4;
+                        _b.sent();
+                        _b.label = 4;
                     case 4: return [2 /*return*/];
                 }
             });
@@ -90,14 +93,14 @@ var DateRangePicker = /** @class */ (function (_super) {
     };
     DateRangePicker.prototype.clear = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0: return [4 /*yield*/, this.datePickerStart.clear(options)];
                     case 1:
-                        _a.sent();
+                        _b.sent();
                         return [4 /*yield*/, this.datePickerEnd.clear(options)];
                     case 2:
-                        _a.sent();
+                        _b.sent();
                         return [2 /*return*/];
                 }
             });
@@ -109,3 +112,4 @@ var DateRangePicker = /** @class */ (function (_super) {
     return DateRangePicker;
 }(BaseComponent_1.BaseComponent));
 exports.DateRangePicker = DateRangePicker;
+_a = LocatorSymbols_1.toValueElementLocator;

package/build/src/components/Dropdown.d.ts

@@ -1,14 +1,19 @@
 import { type Locator } from '@playwright/test';
-import { BaseComponent } from './BaseComponent';
 import { type TooltipType } from '../utils';
 import { DropdownAssertions } from '../assertions';
 import { ComponentList } from './ComponentList';
 import { MenuItem } from './MenuItem';
 import type { BlurOptions, ClickOptions, FocusOptions, InnerTextOptions, IsDisabledOptions } from '../options';
-export declare class Dropdown extends BaseComponent {
+import { MenuComponent } from './MenuComponent';
+import { toControlElementLocator, toFocusableElementLocator, toItemsElementLocator, toTextElementLocator } from '../matchers/component/LocatorSymbols';
+export declare class Dropdown extends MenuComponent {
     readonly rootLocator: Locator;
     readonly buttonLocator: Locator;
     private readonly portal;
+    readonly [toControlElementLocator]: () => Locator;
+    readonly [toTextElementLocator]: () => Locator;
+    readonly [toItemsElementLocator]: () => Promise<Locator>;
+    readonly [toFocusableElementLocator]: () => Locator;
     constructor(rootLocator: Locator);
     isDisabled(options?: IsDisabledOptions): Promise<boolean>;
     isMenuOpened(): Promise<boolean>;

package/build/src/components/Dropdown.js

@@ -50,56 +50,62 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 var test_1 = require("@playwright/test");
 var react_ui_1 = require("@skbkontur/react-ui");
 var MenuFooter_1 = require("@skbkontur/react-ui/components/MenuFooter");
-var BaseComponent_1 = require("./BaseComponent");
 var Portal_1 = require("./Portal");
 var utils_1 = require("../utils");
 var assertions_1 = require("../assertions");
 var ComponentList_1 = require("./ComponentList");
 var MenuItem_1 = require("./MenuItem");
 var dataTidSelector_1 = require("../utils/dataTidSelector");
+var MenuComponent_1 = require("./MenuComponent");
+var LocatorSymbols_1 = require("../matchers/component/LocatorSymbols");
 var Dropdown = /** @class */ (function (_super) {
     __extends(Dropdown, _super);
     function Dropdown(rootLocator) {
         var _this = _super.call(this, rootLocator) || this;
         _this.rootLocator = rootLocator;
+        _this[_a] = function () { return _this.buttonLocator; };
+        _this[_b] = function () { return _this.buttonLocator; };
+        _this[_c] = function () { return _this.getItemsLocator(); };
+        _this[_d] = function () { return _this.buttonLocator; };
         _this.buttonLocator = rootLocator.locator('button');
         _this.portal = new Portal_1.Portal(rootLocator.locator('noscript'));
         return _this;
     }
     Dropdown.prototype.isDisabled = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.buttonLocator.isDisabled(options)];
-                    case 1: return [2 /*return*/, _a.sent()];
+                    case 1: return [2 /*return*/, _e.sent()];
                 }
             });
         });
     };
     Dropdown.prototype.isMenuOpened = function () {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.waitFor()];
                     case 1:
-                        _a.sent();
+                        _e.sent();
                         return [4 /*yield*/, this.portal.isVisible()];
-                    case 2: return [2 /*return*/, _a.sent()];
+                    case 2: return [2 /*return*/, _e.sent()];
                 }
             });
         });
     };
     Dropdown.prototype.getText = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.buttonLocator.innerText(options)];
-                    case 1: return [2 /*return*/, _a.sent()];
+                    case 1: return [2 /*return*/, _e.sent()];
                 }
             });
         });
@@ -107,19 +113,19 @@ var Dropdown = /** @class */ (function (_super) {
     Dropdown.prototype.selectFirstByText = function (text, options) {
         return __awaiter(this, void 0, void 0, function () {
             var items;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getMenuItemsLocator(text)];
                     case 1:
-                        items = _a.sent();
+                        items = _e.sent();
                         return [4 /*yield*/, items.first().click(options)];
                     case 2:
-                        _a.sent();
+                        _e.sent();
                         // note: ожидание закрытия меню, чтобы не было гонок
                         return [4 /*yield*/, this.portal.expect().toBeHidden()];
                     case 3:
                         // note: ожидание закрытия меню, чтобы не было гонок
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/];
                 }
             });
@@ -128,19 +134,19 @@ var Dropdown = /** @class */ (function (_super) {
     Dropdown.prototype.selectByIndex = function (index, options) {
         return __awaiter(this, void 0, void 0, function () {
             var items;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getMenuItemsLocator()];
                     case 1:
-                        items = _a.sent();
+                        items = _e.sent();
                         return [4 /*yield*/, items.nth(index).click(options)];
                     case 2:
-                        _a.sent();
+                        _e.sent();
                         // note: ожидание закрытия меню, чтобы не было гонок
                         return [4 /*yield*/, this.portal.expect().toBeHidden()];
                     case 3:
                         // note: ожидание закрытия меню, чтобы не было гонок
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/];
                 }
             });
@@ -149,25 +155,25 @@ var Dropdown = /** @class */ (function (_super) {
     Dropdown.prototype.selectByDataTid = function (dataTid, options) {
         return __awaiter(this, void 0, void 0, function () {
             var container, item;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getPortalContainer()];
                     case 1:
-                        container = _a.sent();
+                        container = _e.sent();
                         item = container.locator((0, dataTidSelector_1.getDataTidSelector)(dataTid));
                         return [4 /*yield*/, item.count()];
                     case 2:
-                        if ((_a.sent()) > 1) {
+                        if ((_e.sent()) > 1) {
                             throw Error('DataTid должен быть уникальным');
                         }
                         return [4 /*yield*/, item.click(options)];
                     case 3:
-                        _a.sent();
+                        _e.sent();
                         // note: ожидание закрытия меню, чтобы не было гонок
                         return [4 /*yield*/, this.portal.expect().toBeHidden()];
                     case 4:
                         // note: ожидание закрытия меню, чтобы не было гонок
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/];
                 }
             });
@@ -175,33 +181,29 @@ var Dropdown = /** @class */ (function (_super) {
     };
     Dropdown.prototype.click = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.buttonLocator.click(options)];
                     case 1:
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/];
                 }
             });
         });
     };
     Dropdown.prototype.getTooltip = function (type) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, (0, utils_1.getTooltip)(type, this)];
-            });
-        });
+        return (0, utils_1.getTooltip)(type, this);
     };
     Dropdown.prototype.focus = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, (0, test_1.expect)(this.buttonLocator).toBeEnabled()];
                     case 1:
-                        _a.sent();
+                        _e.sent();
                         return [4 /*yield*/, this.buttonLocator.focus(options)];
                     case 2:
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/];
                 }
             });
@@ -209,11 +211,11 @@ var Dropdown = /** @class */ (function (_super) {
     };
     Dropdown.prototype.blur = function (options) {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.buttonLocator.blur(options)];
                     case 1:
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/];
                 }
             });
@@ -228,14 +230,14 @@ var Dropdown = /** @class */ (function (_super) {
     Dropdown.prototype.getMenuItems = function () {
         return __awaiter(this, void 0, void 0, function () {
             var container;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getPortalContainer()];
                     case 1:
-                        container = _a.sent();
+                        container = _e.sent();
                         return [4 /*yield*/, container.locator((0, dataTidSelector_1.getDataTidSelector)(react_ui_1.SpinnerDataTids.root)).waitFor({ state: 'hidden' })];
                     case 2:
-                        _a.sent();
+                        _e.sent();
                         return [2 /*return*/, new ComponentList_1.ComponentList(container, function (locator) {
                                 return locator
                                     .locator((0, dataTidSelector_1.getDataTidSelector)(react_ui_1.MenuItemDataTids.root))
@@ -250,23 +252,23 @@ var Dropdown = /** @class */ (function (_super) {
         return __awaiter(this, void 0, void 0, function () {
             var items;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getMenuItems()];
                     case 1:
-                        items = _a.sent();
+                        items = _e.sent();
                         return [4 /*yield*/, items.getFirstItemByPredicate(function (item) { return __awaiter(_this, void 0, void 0, function () {
                                 var itemText;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
+                                return __generator(this, function (_e) {
+                                    switch (_e.label) {
                                         case 0: return [4 /*yield*/, item.getText()];
                                         case 1:
-                                            itemText = _a.sent();
+                                            itemText = _e.sent();
                                             return [2 /*return*/, itemText.toLowerCase() === text.toLowerCase()];
                                     }
                                 });
                             }); })];
-                    case 2: return [2 /*return*/, _a.sent()];
+                    case 2: return [2 /*return*/, _e.sent()];
                 }
             });
         });
@@ -274,11 +276,11 @@ var Dropdown = /** @class */ (function (_super) {
     Dropdown.prototype.getMenuItemByIndex = function (index) {
         return __awaiter(this, void 0, void 0, function () {
             var items;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getMenuItems()];
                     case 1:
-                        items = _a.sent();
+                        items = _e.sent();
                         return [2 /*return*/, items.getItemByIndex(index)];
                 }
             });
@@ -290,11 +292,11 @@ var Dropdown = /** @class */ (function (_super) {
     Dropdown.prototype.getMenuItemsLocator = function (byText) {
         return __awaiter(this, void 0, void 0, function () {
             var container, items;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.getPortalContainer()];
                     case 1:
-                        container = _a.sent();
+                        container = _e.sent();
                         items = container.locator((0, dataTidSelector_1.getDataTidSelector)(react_ui_1.MenuItemDataTids.root));
                         return [2 /*return*/, !byText ? items : items.getByText(byText)];
                 }
@@ -303,20 +305,21 @@ var Dropdown = /** @class */ (function (_super) {
     };
     Dropdown.prototype.getPortalContainer = function () {
         return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_e) {
+                switch (_e.label) {
                     case 0: return [4 /*yield*/, this.isMenuOpened()];
                     case 1:
-                        if (!!(_a.sent())) return [3 /*break*/, 3];
+                        if (!!(_e.sent())) return [3 /*break*/, 3];
                         return [4 /*yield*/, this.buttonLocator.click()];
                     case 2:
-                        _a.sent();
-                        _a.label = 3;
+                        _e.sent();
+                        _e.label = 3;
                     case 3: return [2 /*return*/, this.portal.getContainer()];
                 }
             });
         });
     };
     return Dropdown;
-}(BaseComponent_1.BaseComponent));
+}(MenuComponent_1.MenuComponent));
 exports.Dropdown = Dropdown;
+_a = LocatorSymbols_1.toControlElementLocator, _b = LocatorSymbols_1.toTextElementLocator, _c = LocatorSymbols_1.toItemsElementLocator, _d = LocatorSymbols_1.toFocusableElementLocator;

package/build/src/components/DropdownMenu.d.ts

@@ -1,14 +1,18 @@
 import type { Locator } from '@playwright/test';
-import { BaseComponent } from './BaseComponent';
 import type { TooltipType } from '../utils';
 import { DropdownMenuAssertions } from '../assertions';
 import { ComponentList } from './ComponentList';
 import { MenuItem } from './MenuItem';
 import type { BlurOptions, ClickOptions, FocusOptions, InnerTextOptions } from '../options';
-export declare class DropdownMenu extends BaseComponent {
+import { MenuComponent } from './MenuComponent';
+import { toFocusableElementLocator, toItemsElementLocator, toTextElementLocator } from '../matchers/component/LocatorSymbols';
+export declare class DropdownMenu extends MenuComponent {
     readonly rootLocator: Locator;
     readonly buttonLocator: Locator;
     private readonly portal;
+    readonly [toTextElementLocator]: () => Locator;
+    readonly [toItemsElementLocator]: () => Promise<Locator>;
+    readonly [toFocusableElementLocator]: () => Locator;
     constructor(rootLocator: Locator);
     getText(options?: InnerTextOptions): Promise<string>;
     isMenuOpened(): Promise<boolean>;