dockview-core 5.1.0 → 6.0.0

package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -9,6 +9,7 @@ import { DockviewHeaderDirection } from '../../options';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
+    readonly targetTabGroupId?: string | null;
 }
 export interface TabDragEvent {
     readonly nativeEvent: DragEvent;
@@ -41,6 +42,8 @@ export interface ITabsContainer extends IDisposable {
     show(): void;
     hide(): void;
     updateDragAndDropState(): void;
+    updateTabGroups(): void;
+    refreshTabGroupAccent(): void;
 }
 export declare class TabsContainer extends CompositeDisposable implements ITabsContainer {
     private readonly accessor;
@@ -58,6 +61,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private _direction;
     private dropdownPart;
     private _overflowTabs;
+    private _overflowTabGroups;
     private readonly _dropdownDisposable;
     private readonly _onDrop;
     readonly onDrop: Event<TabDropIndexEvent>;
@@ -89,4 +93,6 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private updateClassnames;
     private toggleDropdown;
     updateDragAndDropState(): void;
+    updateTabGroups(): void;
+    refreshTabGroupAccent(): void;
 }

package/dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -35,6 +35,7 @@ var events_2 = require("../../events");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
 var tabs_1 = require("./tabs");
 var tabOverflowControl_1 = require("./tabOverflowControl");
+var tabGroupAccent_1 = require("../../tabGroupAccent");
 var TabsContainer = /** @class */ (function (_super) {
     __extends(TabsContainer, _super);
     function TabsContainer(accessor, group) {
@@ -45,6 +46,7 @@ var TabsContainer = /** @class */ (function (_super) {
         _this._direction = 'horizontal';
         _this.dropdownPart = null;
         _this._overflowTabs = [];
+        _this._overflowTabGroups = [];
         _this._dropdownDisposable = new lifecycle_1.MutableDisposable();
         _this._onDrop = new events_1.Emitter();
         _this.onDrop = _this._onDrop.event;
@@ -65,11 +67,13 @@ var TabsContainer = /** @class */ (function (_super) {
             showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
         });
         _this.voidContainer = new voidContainer_1.VoidContainer(_this.accessor, _this.group);
+        _this.tabs.voidContainer = _this.voidContainer.element;
         _this._element.appendChild(_this.preActionsContainer);
         _this._element.appendChild(_this.tabs.element);
         _this._element.appendChild(_this.leftActionsContainer);
         _this._element.appendChild(_this.voidContainer.element);
         _this._element.appendChild(_this.rightActionsContainer);
+        _this.tabs.setExtendedDropZone(_this._element);
         _this.addDisposables(_this.tabs.onDrop(function (e) { return _this._onDrop.fire(e); }), _this.tabs.onWillShowOverlay(function (e) { return _this._onWillShowOverlay.fire(e); }), accessor.onDidOptionsChange(function () {
             _this.tabs.showTabsOverflowControl =
                 !accessor.options.disableTabsOverflowList;
@@ -81,6 +85,10 @@ var TabsContainer = /** @class */ (function (_super) {
                 group: _this.group,
             });
         }), _this.voidContainer.onDrop(function (event) {
+            // If an active group drag is in progress, let Tabs handle it
+            if (_this.tabs.handleVoidDrop()) {
+                return;
+            }
             _this._onDrop.fire({
                 event: event.nativeEvent,
                 index: _this.tabs.size,
@@ -93,6 +101,25 @@ var TabsContainer = /** @class */ (function (_super) {
                 group: _this.group,
                 getData: dataTransfer_1.getPanelData,
             }));
+        }), (0, events_1.addDisposableListener)(_this.leftActionsContainer, 'dragleave', function (event) {
+            var related = event.relatedTarget;
+            if (!_this.leftActionsContainer.contains(related) &&
+                !_this._element.contains(related)) {
+                // Left the header entirely
+                _this.tabs.clearExternalAnimState();
+            }
+        }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'dragleave', function (event) {
+            var related = event.relatedTarget;
+            if (!_this.voidContainer.element.contains(related)) {
+                if (_this._element.contains(related)) {
+                    // Moved to another part of the header — keep state
+                    _this.tabs.setExternalInsertionIndex(null);
+                }
+                else {
+                    // Left the header entirely
+                    _this.tabs.clearExternalAnimState();
+                }
+            }
         }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
@@ -100,7 +127,8 @@ var TabsContainer = /** @class */ (function (_super) {
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
-                _this.group.api.location.type !== 'floating') {
+                _this.group.api.location.type !== 'floating' &&
+                _this.group.api.location.type !== 'edge') {
                 event.preventDefault();
                 var _a = _this.element.getBoundingClientRect(), top_1 = _a.top, left = _a.left;
                 var _b = _this.accessor.element.getBoundingClientRect(), rootTop = _b.top, rootLeft = _b.left;
@@ -249,19 +277,22 @@ var TabsContainer = /** @class */ (function (_super) {
     TabsContainer.prototype.toggleDropdown = function (options) {
         var _this = this;
         var tabs = options.reset ? [] : options.tabs;
+        var tabGroups = options.reset ? [] : options.tabGroups;
         this._overflowTabs = tabs;
-        if (this._overflowTabs.length > 0 && this.dropdownPart) {
-            this.dropdownPart.update({ tabs: tabs.length });
+        this._overflowTabGroups = tabGroups;
+        var totalCount = this._overflowTabs.length;
+        if (totalCount > 0 && this.dropdownPart) {
+            this.dropdownPart.update({ tabs: totalCount });
             return;
         }
-        if (this._overflowTabs.length === 0) {
+        if (totalCount === 0) {
             this._dropdownDisposable.dispose();
             return;
         }
         var root = document.createElement('div');
         root.className = 'dv-tabs-overflow-dropdown-root';
         var part = (0, tabOverflowControl_1.createDropdownElementHandle)();
-        part.update({ tabs: tabs.length });
+        part.update({ tabs: totalCount });
         this.dropdownPart = part;
         root.appendChild(part.element);
         this.rightActionsContainer.prepend(root);
@@ -273,11 +304,82 @@ var TabsContainer = /** @class */ (function (_super) {
         }), (0, events_1.addDisposableListener)(root, 'pointerdown', function (event) {
             event.preventDefault();
         }, { capture: true }), (0, events_1.addDisposableListener)(root, 'click', function (event) {
-            var e_1, _a;
+            var e_1, _a, e_2, _b, e_3, _c;
             var el = document.createElement('div');
             el.style.overflow = 'auto';
             el.className = 'dv-tabs-overflow-container';
+            // Build lookup: panelId → tabGroup for overflow groups
+            var overflowGroupSet = new Set(_this._overflowTabGroups);
+            var allTabGroups = _this.group.model.getTabGroups();
+            var panelToGroup = new Map();
+            try {
+                for (var allTabGroups_1 = __values(allTabGroups), allTabGroups_1_1 = allTabGroups_1.next(); !allTabGroups_1_1.done; allTabGroups_1_1 = allTabGroups_1.next()) {
+                    var tg = allTabGroups_1_1.value;
+                    if (overflowGroupSet.has(tg.id)) {
+                        try {
+                            for (var _d = (e_2 = void 0, __values(tg.panelIds)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                                var pid = _e.value;
+                                panelToGroup.set(pid, tg);
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (allTabGroups_1_1 && !allTabGroups_1_1.done && (_a = allTabGroups_1.return)) _a.call(allTabGroups_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            // Track which groups have already been rendered
+            var renderedGroups = new Set();
             var _loop_1 = function (tab) {
+                var tg = panelToGroup.get(tab.panel.id);
+                // If this tab belongs to an overflow group, render the
+                // group header before its first member tab.
+                if (tg && !renderedGroups.has(tg.id)) {
+                    renderedGroups.add(tg.id);
+                    var groupHeader = document.createElement('div');
+                    groupHeader.className = 'dv-tabs-overflow-group-header';
+                    var colorDot = document.createElement('span');
+                    colorDot.className = 'dv-tabs-overflow-group-color';
+                    (0, tabGroupAccent_1.applyTabGroupAccent)(colorDot, tg.color, _this.accessor.tabGroupColorPalette);
+                    groupHeader.appendChild(colorDot);
+                    var labelSpan = document.createElement('span');
+                    labelSpan.className = 'dv-tabs-overflow-group-label';
+                    labelSpan.textContent = tg.label || tg.id;
+                    groupHeader.appendChild(labelSpan);
+                    if (tg.collapsed) {
+                        var badge = document.createElement('span');
+                        badge.className =
+                            'dv-tabs-overflow-group-collapsed-badge';
+                        badge.textContent = "".concat(tg.panelIds.length);
+                        groupHeader.appendChild(badge);
+                    }
+                    groupHeader.addEventListener('click', function () {
+                        _this.accessor
+                            .getPopupServiceForGroup(_this.group)
+                            .close();
+                        if (tg.collapsed) {
+                            tg.expand();
+                        }
+                        // Activate the first panel in the group
+                        var firstPanelId = tg.panelIds[0];
+                        if (firstPanelId) {
+                            var panel = _this.group.panels.find(function (p) { return p.id === firstPanelId; });
+                            panel === null || panel === void 0 ? void 0 : panel.api.setActive();
+                        }
+                    });
+                    el.appendChild(groupHeader);
+                }
                 var panelObject = _this.group.panels.find(function (panel) { return panel === tab.panel; });
                 var tabComponent = panelObject.view.createTabRenderer('headerOverflow');
                 var child = tabComponent.element;
@@ -285,11 +387,19 @@ var TabsContainer = /** @class */ (function (_super) {
                 (0, dom_1.toggleClass)(wrapper, 'dv-tab', true);
                 (0, dom_1.toggleClass)(wrapper, 'dv-active-tab', panelObject.api.isActive);
                 (0, dom_1.toggleClass)(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
+                if (tg) {
+                    (0, dom_1.toggleClass)(wrapper, 'dv-tab--grouped', true);
+                }
                 wrapper.addEventListener('click', function (event) {
-                    _this.accessor.popupService.close();
+                    _this.accessor
+                        .getPopupServiceForGroup(_this.group)
+                        .close();
                     if (event.defaultPrevented) {
                         return;
                     }
+                    if (tg === null || tg === void 0 ? void 0 : tg.collapsed) {
+                        tg.expand();
+                    }
                     tab.element.scrollIntoView();
                     tab.panel.api.setActive();
                 });
@@ -297,22 +407,24 @@ var TabsContainer = /** @class */ (function (_super) {
                 el.appendChild(wrapper);
             };
             try {
-                for (var _b = __values(_this.tabs.tabs.filter(function (tab) {
+                for (var _f = __values(_this.tabs.tabs.filter(function (tab) {
                     return _this._overflowTabs.includes(tab.panel.id);
-                })), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var tab = _c.value;
+                })), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var tab = _g.value;
                     _loop_1(tab);
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
                 }
-                finally { if (e_1) throw e_1.error; }
+                finally { if (e_3) throw e_3.error; }
             }
             var relativeParent = (0, dom_1.findRelativeZIndexParent)(root);
-            _this.accessor.popupService.openPopover(el, {
+            _this.accessor
+                .getPopupServiceForGroup(_this.group)
+                .openPopover(el, {
                 x: event.clientX,
                 y: event.clientY,
                 zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
@@ -325,6 +437,12 @@ var TabsContainer = /** @class */ (function (_super) {
         this.tabs.updateDragAndDropState();
         this.voidContainer.updateDragAndDropState();
     };
+    TabsContainer.prototype.updateTabGroups = function () {
+        this.tabs.updateTabGroups();
+    };
+    TabsContainer.prototype.refreshTabGroupAccent = function () {
+        this.tabs.refreshTabGroupAccent();
+    };
     return TabsContainer;
 }(lifecycle_1.CompositeDisposable));
 exports.TabsContainer = TabsContainer;

package/dist/cjs/dockview/contextMenu.d.ts

@@ -0,0 +1,10 @@
+import { DockviewComponent } from './dockviewComponent';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
+import { IDockviewPanel } from './dockviewPanel';
+import { ITabGroup } from './tabGroup';
+export declare class ContextMenuController {
+    private readonly accessor;
+    constructor(accessor: DockviewComponent);
+    show(panel: IDockviewPanel, group: DockviewGroupPanel, event: MouseEvent): void;
+    showForChip(tabGroup: ITabGroup, group: DockviewGroupPanel, event: MouseEvent): void;
+}

package/dist/cjs/dockview/contextMenu.js

@@ -0,0 +1,298 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuController = void 0;
+var dom_1 = require("../dom");
+function popoverZIndexFor(target) {
+    if (!(target instanceof HTMLElement)) {
+        return undefined;
+    }
+    // Floating overlays live in the shell as siblings of the popover anchor
+    // and the AriaLevelTracker sets their inline z-index. Without this, a
+    // popover opened from inside a floating group would render behind it
+    // because they share the shell stacking context.
+    var relativeParent = (0, dom_1.findRelativeZIndexParent)(target);
+    return (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex)
+        ? "calc(".concat(relativeParent.style.zIndex, " * 2)")
+        : undefined;
+}
+var _nextId = 0;
+var nextContextMenuItemId = function () { return "dv-ctx-menu-item-".concat(_nextId++); };
+function isItemConfig(item) {
+    return typeof item === 'object';
+}
+function buildItem(label, close, action, disabled) {
+    var el = document.createElement('div');
+    el.className = 'dv-context-menu-item';
+    el.setAttribute('role', 'menuitem');
+    if (disabled) {
+        el.classList.add('dv-context-menu-item--disabled');
+        el.setAttribute('aria-disabled', 'true');
+    }
+    el.textContent = label;
+    if (!disabled) {
+        el.addEventListener('click', function () {
+            action();
+            close();
+        });
+    }
+    return el;
+}
+function buildSeparator() {
+    var el = document.createElement('div');
+    el.className = 'dv-context-menu-separator';
+    el.setAttribute('role', 'separator');
+    return el;
+}
+function buildRenameInput(tabGroup) {
+    var wrapper = document.createElement('div');
+    wrapper.className = 'dv-context-menu-rename';
+    var input = document.createElement('input');
+    input.className = 'dv-context-menu-rename-input';
+    input.type = 'text';
+    input.placeholder = 'Name This Group';
+    input.value = tabGroup.label;
+    input.addEventListener('input', function () {
+        tabGroup.setLabel(input.value);
+    });
+    input.addEventListener('keydown', function (e) {
+        if (e.key !== 'Escape' && e.key !== 'Enter') {
+            e.stopPropagation();
+        }
+    });
+    input.addEventListener('click', function (e) {
+        e.stopPropagation();
+    });
+    wrapper.appendChild(input);
+    requestAnimationFrame(function () {
+        input.focus();
+        input.select();
+    });
+    return wrapper;
+}
+function buildColorPicker(tabGroup, palette) {
+    var e_1, _a;
+    var wrapper = document.createElement('div');
+    wrapper.className = 'dv-context-menu-color-picker';
+    if (!palette.enabled) {
+        // Opt-out: render no swatches. Returning a wrapper rather than null
+        // keeps the call site simple; the wrapper is empty and visually inert.
+        return wrapper;
+    }
+    var _loop_1 = function (entry) {
+        var swatch = document.createElement('div');
+        swatch.className = 'dv-context-menu-color-swatch';
+        // Use a CSS custom property rather than setting `backgroundColor`
+        // directly: the IDL setter validates the value against a color
+        // grammar and rejects `var(...)` references in some environments
+        // (notably jsdom; some browsers have historically had similar
+        // quirks). The matching SCSS rule reads the var at use time.
+        swatch.style.setProperty('--dv-tab-group-color', entry.value);
+        if (entry.label) {
+            swatch.title = entry.label;
+        }
+        if (tabGroup.color === entry.id) {
+            swatch.classList.add('dv-context-menu-color-swatch--selected');
+        }
+        swatch.addEventListener('click', function () {
+            tabGroup.setColor(entry.id);
+        });
+        wrapper.appendChild(swatch);
+    };
+    try {
+        for (var _b = __values(palette.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var entry = _c.value;
+            _loop_1(entry);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return wrapper;
+}
+var ContextMenuController = /** @class */ (function () {
+    function ContextMenuController(accessor) {
+        this.accessor = accessor;
+    }
+    ContextMenuController.prototype.show = function (panel, group, event) {
+        var e_2, _a;
+        var _b, _c;
+        if (!this.accessor.options.getTabContextMenuItems) {
+            return;
+        }
+        var items = this.accessor.options.getTabContextMenuItems({
+            panel: panel,
+            group: group,
+            api: this.accessor.api,
+            event: event,
+        });
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        var popupService = this.accessor.getPopupServiceForGroup(group);
+        var close = function () { return popupService.close(); };
+        var menuEl = document.createElement('div');
+        menuEl.className = 'dv-context-menu';
+        menuEl.setAttribute('role', 'menu');
+        var _loop_2 = function (item) {
+            if (item === 'separator') {
+                menuEl.appendChild(buildSeparator());
+            }
+            else if (item === 'close') {
+                menuEl.appendChild(buildItem('Close', close, function () { return panel.api.close(); }));
+            }
+            else if (item === 'closeOthers') {
+                menuEl.appendChild(buildItem('Close Others', close, function () {
+                    group.panels
+                        .filter(function (p) { return p !== panel; })
+                        .forEach(function (p) { return p.api.close(); });
+                }));
+            }
+            else if (item === 'closeAll') {
+                menuEl.appendChild(buildItem('Close All', close, function () {
+                    __spreadArray([], __read(group.panels), false).forEach(function (p) { return p.api.close(); });
+                }));
+            }
+            else if (isItemConfig(item) && item.element) {
+                menuEl.appendChild(item.element);
+            }
+            else if (isItemConfig(item) && item.component) {
+                var renderer = (_c = (_b = this_1.accessor.options).createContextMenuItemComponent) === null || _c === void 0 ? void 0 : _c.call(_b, {
+                    id: nextContextMenuItemId(),
+                    component: item.component,
+                });
+                if (renderer) {
+                    renderer.init({
+                        panel: panel,
+                        group: group,
+                        api: this_1.accessor.api,
+                        close: close,
+                        componentProps: item.componentProps,
+                    });
+                    menuEl.appendChild(renderer.element);
+                }
+            }
+            else if (isItemConfig(item) && item.label) {
+                menuEl.appendChild(buildItem(item.label, close, function () { var _a; return (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item); }, item.disabled));
+            }
+        };
+        var this_1 = this;
+        try {
+            for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                var item = items_1_1.value;
+                _loop_2(item);
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        popupService.openPopover(menuEl, {
+            x: event.clientX,
+            y: event.clientY,
+            zIndex: popoverZIndexFor(event.target),
+        });
+    };
+    ContextMenuController.prototype.showForChip = function (tabGroup, group, event) {
+        var e_3, _a;
+        if (!this.accessor.options.getTabGroupChipContextMenuItems) {
+            return;
+        }
+        var items = this.accessor.options.getTabGroupChipContextMenuItems({
+            tabGroup: tabGroup,
+            group: group,
+            api: this.accessor.api,
+            event: event,
+        });
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        var popupService = this.accessor.getPopupServiceForGroup(group);
+        var close = function () { return popupService.close(); };
+        var menuEl = document.createElement('div');
+        menuEl.className = 'dv-context-menu';
+        menuEl.setAttribute('role', 'menu');
+        var _loop_3 = function (item) {
+            if (item === 'separator') {
+                menuEl.appendChild(buildSeparator());
+            }
+            else if (item === 'rename') {
+                menuEl.appendChild(buildRenameInput(tabGroup));
+            }
+            else if (item === 'colorPicker') {
+                menuEl.appendChild(buildColorPicker(tabGroup, this_2.accessor.tabGroupColorPalette));
+            }
+            else if (isItemConfig(item) && item.element) {
+                menuEl.appendChild(item.element);
+            }
+            else if (isItemConfig(item) && item.label) {
+                menuEl.appendChild(buildItem(item.label, close, function () { var _a; return (_a = item.action) === null || _a === void 0 ? void 0 : _a.call(item); }, item.disabled));
+            }
+        };
+        var this_2 = this;
+        try {
+            for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
+                var item = items_2_1.value;
+                _loop_3(item);
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        popupService.openPopover(menuEl, {
+            x: event.clientX,
+            y: event.clientY,
+            zIndex: popoverZIndexFor(event.target),
+        });
+    };
+    return ContextMenuController;
+}());
+exports.ContextMenuController = ContextMenuController;