@codingame/monaco-vscode-api 28.4.1 → 29.1.0

package/vscode/src/vs/platform/actionWidget/browser/actionList.js

@@ -1,18 +1,19 @@
 
 import { registerCss } from '../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
-import { createElement, setVisibility, clearNode, addDisposableListener, isActiveElement, getWindow, isHTMLElement } from '../../../base/browser/dom.js';
+import { createElement, setVisibility, clearNode, addDisposableListener, append, $, EventHelper, isActiveElement, isMouseEvent, isHTMLElement, getWindow } from '../../../base/browser/dom.js';
 import { renderMarkdown } from '../../../base/browser/markdownRenderer.js';
 import { ActionBar } from '../../../base/browser/ui/actionbar/actionbar.js';
 import { getAnchorRect } from '../../../base/browser/ui/contextview/contextview.js';
 import { KeybindingLabel } from '../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
 import { List } from '../../../base/browser/ui/list/listWidget.js';
-import { toAction } from '../../../base/common/actions.js';
+import { toAction, SubmenuAction } from '../../../base/common/actions.js';
 import { CancellationTokenSource } from '../../../base/common/cancellation.js';
 import { Codicon } from '../../../base/common/codicons.js';
+import { Emitter } from '../../../base/common/event.js';
 import { MarkdownString } from '../../../base/common/htmlContent.js';
 import { AnchorPosition } from '../../../base/common/layout.js';
-import { DisposableStore, Disposable, MutableDisposable } from '../../../base/common/lifecycle.js';
+import { DisposableStore, Disposable, MutableDisposable, toDisposable } from '../../../base/common/lifecycle.js';
 import { OS } from '../../../base/common/platform.js';
 import { ThemeIcon } from '../../../base/common/themables.js';
 import { URI } from '../../../base/common/uri.js';
@@ -34,9 +35,11 @@ import '../../theme/common/colors/miscColors.js';
 import '../../theme/common/colors/quickpickColors.js';
 import '../../theme/common/colors/searchColors.js';
 import { ILayoutService } from '../../layout/browser/layoutService.service.js';
+import { IInstantiationService } from '../../instantiation/common/instantiation.js';
 import { IHoverService } from '../../hover/browser/hover.service.js';
 import { HoverPosition } from '../../../base/browser/ui/hover/hoverWidget.js';
 
+var ActionListWidget_1;
 registerCss(actionWidget);
 const acceptSelectedActionCommand = "acceptSelectedCodeAction";
 const previewSelectedActionCommand = "previewSelectedCodeAction";
@@ -86,9 +89,18 @@ let ActionItemRenderer = class ActionItemRenderer {
     get templateId() {
         return ActionListItemKind.Action;
     }
-    constructor(_supportsPreview, _onRemoveItem, _keybindingService, _openerService) {
+    constructor(
+        _supportsPreview,
+        _onRemoveItem,
+        _hasAnySubmenuActions,
+        _linkHandler,
+        _keybindingService,
+        _openerService
+    ) {
         this._supportsPreview = _supportsPreview;
         this._onRemoveItem = _onRemoveItem;
+        this._hasAnySubmenuActions = _hasAnySubmenuActions;
+        this._linkHandler = _linkHandler;
         this._keybindingService = _keybindingService;
         this._openerService = _openerService;
     }
@@ -110,6 +122,9 @@ let ActionItemRenderer = class ActionItemRenderer {
         const toolbar = createElement("div");
         toolbar.className = "action-list-item-toolbar";
         container.append(toolbar);
+        const submenuIndicator = createElement("div");
+        submenuIndicator.className = "action-list-submenu-indicator";
+        container.append(submenuIndicator);
         const elementDisposables = ( new DisposableStore());
         return {
             container,
@@ -119,6 +134,7 @@ let ActionItemRenderer = class ActionItemRenderer {
             description,
             keybinding,
             toolbar,
+            submenuIndicator,
             elementDisposables
         };
     }
@@ -164,9 +180,14 @@ let ActionItemRenderer = class ActionItemRenderer {
             } else {
                 const rendered = renderMarkdown(element.description, {
                     actionHandler: content => {
-                        this._openerService.open(( URI.parse(content)), {
-                            allowCommands: true
-                        });
+                        const uri = ( URI.parse(content));
+                        if (this._linkHandler) {
+                            this._linkHandler(uri, element);
+                        } else {
+                            void this._openerService.open(uri, {
+                                allowCommands: true
+                            });
+                        }
                     }
                 });
                 data.elementDisposables.add(rendered);
@@ -188,9 +209,9 @@ let ActionItemRenderer = class ActionItemRenderer {
             data.container.title = element.label;
         } else if (actionTitle && previewTitle) {
             if (this._supportsPreview && element.canPreview) {
-                data.container.title = ( localize(1773, "{0} to Apply, {1} to Preview", actionTitle, previewTitle));
+                data.container.title = ( localize(1778, "{0} to Apply, {1} to Preview", actionTitle, previewTitle));
             } else {
-                data.container.title = ( localize(1774, "{0} to Apply", actionTitle));
+                data.container.title = ( localize(1779, "{0} to Apply", actionTitle));
             }
         } else {
             data.container.title = "";
@@ -200,7 +221,7 @@ let ActionItemRenderer = class ActionItemRenderer {
         if (element.onRemove) {
             toolbarActions.push(toAction({
                 id: "actionList.remove",
-                label: ( localize(1775, "Remove")),
+                label: ( localize(1780, "Remove")),
                 class: ThemeIcon.asClassName(Codicon.close),
                 run: () => {
                     element.onRemove();
@@ -217,13 +238,23 @@ let ActionItemRenderer = class ActionItemRenderer {
                 label: false
             });
         }
+        const hasSubmenu = !!element.submenuActions?.length;
+        if (hasSubmenu) {
+            data.submenuIndicator.className = "action-list-submenu-indicator has-submenu " + ThemeIcon.asClassName(Codicon.chevronRight);
+            data.submenuIndicator.style.display = "";
+        } else if (this._hasAnySubmenuActions) {
+            data.submenuIndicator.className = "action-list-submenu-indicator";
+            data.submenuIndicator.style.display = "";
+        } else {
+            data.submenuIndicator.style.display = "none";
+        }
     }
     disposeTemplate(templateData) {
         templateData.keybinding.dispose();
         templateData.elementDisposables.dispose();
     }
 };
-ActionItemRenderer = ( __decorate([( __param(2, IKeybindingService)), ( __param(3, IOpenerService))], ActionItemRenderer));
+ActionItemRenderer = ( __decorate([( __param(4, IKeybindingService)), ( __param(5, IOpenerService))], ActionItemRenderer));
 class AcceptSelectedEvent extends UIEvent {
     constructor() {
         super("acceptSelectedAction");
@@ -240,13 +271,7 @@ function getKeyboardNavigationLabel(item) {
     }
     return undefined;
 }
-let ActionList = class ActionList extends Disposable {
-    get anchorPosition() {
-        if (this._showAbove === undefined) {
-            return undefined;
-        }
-        return this._showAbove ? AnchorPosition.ABOVE : AnchorPosition.BELOW;
-    }
+let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Disposable {
     constructor(
         user,
         preview,
@@ -254,37 +279,48 @@ let ActionList = class ActionList extends Disposable {
         _delegate,
         accessibilityProvider,
         _options,
-        _anchor,
-        _contextViewService,
         _keybindingService,
-        _layoutService,
         _hoverService,
-        _openerService
+        _openerService,
+        _instantiationService
     ) {
         super();
         this._delegate = _delegate;
         this._options = _options;
-        this._anchor = _anchor;
-        this._contextViewService = _contextViewService;
         this._keybindingService = _keybindingService;
-        this._layoutService = _layoutService;
         this._hoverService = _hoverService;
         this._openerService = _openerService;
+        this._instantiationService = _instantiationService;
         this._headerLineHeight = 24;
         this._separatorLineHeight = 8;
         this.cts = this._register(( new CancellationTokenSource()));
         this._hover = this._register(( new MutableDisposable()));
+        this._submenuDisposables = this._register(( new DisposableStore()));
         this._collapsedSections = ( new Set());
         this._filterText = "";
         this._suppressHover = false;
-        this._lastMinWidth = 0;
-        this._hasLaidOut = false;
+        this._onDidRequestLayout = this._register(( new Emitter()));
+        this.onDidRequestLayout = this._onDidRequestLayout.event;
         this.domNode = createElement("div");
         this.domNode.classList.add("actionList");
         if (this._options?.descriptionBelow) {
             this.domNode.classList.add("description-below");
         }
         this._actionLineHeight = this._options?.descriptionBelow ? 48 : 24;
+        this._submenuContainer = createElement("div");
+        this._submenuContainer.className = "action-list-submenu-panel action-widget";
+        this._submenuContainer.style.display = "none";
+        this.domNode.append(this._submenuContainer);
+        this._register(addDisposableListener(this._submenuContainer, "mouseenter", () => {
+            this._cancelSubmenuHide();
+        }));
+        this._register(addDisposableListener(this._submenuContainer, "mouseleave", () => {
+            this._scheduleSubmenuHide();
+        }));
+        this._register(toDisposable(() => {
+            this._cancelSubmenuHide();
+            this._cancelSubmenuShow();
+        }));
         if (this._options?.collapsedByDefault) {
             for (const section of this._options.collapsedByDefault) {
                 this._collapsedSections.add(section);
@@ -303,9 +339,12 @@ let ActionList = class ActionList extends Disposable {
             },
             getTemplateId: element => element.kind
         };
+        const hasAnySubmenuActions = ( items.some(item => !!item.submenuActions?.length));
         this._list = this._register(( new List(user, this.domNode, virtualDelegate, [( new ActionItemRenderer(
             preview,
             item => this._removeItem(item),
+            hasAnySubmenuActions,
+            this._options?.linkHandler,
             this._keybindingService,
             this._openerService
         )), ( new HeaderRenderer()), ( new SeparatorRenderer())], {
@@ -323,13 +362,13 @@ let ActionList = class ActionList extends Disposable {
                             label = label + ", " + stripNewlines(descText);
                         }
                         if (element.disabled) {
-                            label = ( localize(1776, "{0}, Disabled Reason: {1}", label, element.disabled));
+                            label = ( localize(1781, "{0}, Disabled Reason: {1}", label, element.disabled));
                         }
                         return label;
                     }
                     return null;
                 },
-                getWidgetAriaLabel: () => ( localize(1777, "Action Widget")),
+                getWidgetAriaLabel: () => ( localize(1782, "Action Widget")),
                 getRole: e => {
                     switch (e.kind) {
                     case ActionListItemKind.Action:
@@ -353,12 +392,22 @@ let ActionList = class ActionList extends Disposable {
         if (this._options?.showFilter) {
             this._filterContainer = createElement("div");
             this._filterContainer.className = "action-list-filter";
+            const filterRow = append(this._filterContainer, $(".action-list-filter-row"));
             this._filterInput = createElement("input");
             this._filterInput.type = "text";
             this._filterInput.className = "action-list-filter-input";
-            this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1778, "Search..."));
-            this._filterInput.setAttribute("aria-label", ( localize(1779, "Filter items")));
-            this._filterContainer.appendChild(this._filterInput);
+            this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1783, "Search..."));
+            this._filterInput.setAttribute("aria-label", ( localize(1784, "Filter items")));
+            filterRow.appendChild(this._filterInput);
+            const filterActions = this._options?.filterActions ?? [];
+            if (filterActions.length > 0) {
+                const filterActionsContainer = append(filterRow, $(".action-list-filter-actions"));
+                const filterActionBar = this._register(( new ActionBar(filterActionsContainer)));
+                filterActionBar.push(filterActions, {
+                    icon: true,
+                    label: false
+                });
+            }
             this._register(addDisposableListener(this._filterInput, "input", () => {
                 this._filterText = this._filterInput.value;
                 this._applyFilter();
@@ -368,6 +417,22 @@ let ActionList = class ActionList extends Disposable {
         if (this._list.length) {
             this._focusCheckedOrFirst();
         }
+        this._register(addDisposableListener(this.domNode, "keydown", e => {
+            if (e.key === "ArrowRight") {
+                const focused = this._list.getFocus();
+                if (focused.length > 0) {
+                    const element = this._list.element(focused[0]);
+                    if (element?.submenuActions?.length) {
+                        EventHelper.stop(e, true);
+                        const rowElement = this._getRowElement(focused[0]);
+                        if (rowElement) {
+                            this._showSubmenuForElement(element, rowElement);
+                            this._currentSubmenuWidget?.focus();
+                        }
+                    }
+                }
+            }
+        }));
         if (this._filterInput) {
             this._register(addDisposableListener(this.domNode, "keydown", e => {
                 if (this._filterInput && !isActiveElement(this._filterInput) && e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey) {
@@ -387,6 +452,7 @@ let ActionList = class ActionList extends Disposable {
         } else {
             this._collapsedSections.add(section);
         }
+        this._options?.onDidToggleSection?.(section, ( this._collapsedSections.has(section)));
         this._applyFilter();
     }
     _applyFilter() {
@@ -450,28 +516,25 @@ let ActionList = class ActionList extends Disposable {
         }
         const filterInputHasFocus = this._filterInput && isActiveElement(this._filterInput);
         this._list.splice(0, this._list.length, visible);
-        if (this._hasLaidOut) {
-            this.layout(this._lastMinWidth);
-            if (filterInputHasFocus) {
-                this._filterInput?.focus();
-                this._focusCheckedOrFirst();
-            } else {
-                this._list.domFocus();
-                if (focusedItem) {
-                    const focusedItemId = focusedItem.item?.id;
-                    if (focusedItemId) {
-                        for (let i = 0; i < this._list.length; i++) {
-                            const el = this._list.element(i);
-                            if (el.item?.id === focusedItemId) {
-                                this._list.setFocus([i]);
-                                this._list.reveal(i);
-                                break;
-                            }
+        this._onDidRequestLayout.fire();
+        if (filterInputHasFocus) {
+            this._filterInput?.focus();
+            this._focusCheckedOrFirst();
+        } else {
+            this._list.domFocus();
+            if (focusedItem) {
+                const focusedItemId = focusedItem.item?.id;
+                if (focusedItemId) {
+                    for (let i = 0; i < this._list.length; i++) {
+                        const el = this._list.element(i);
+                        if (el.item?.id === focusedItemId) {
+                            this._list.setFocus([i]);
+                            this._list.reveal(i);
+                            break;
                         }
                     }
                 }
             }
-            this._contextViewService.layout();
         }
     }
     get filterContainer() {
@@ -492,6 +555,13 @@ let ActionList = class ActionList extends Disposable {
         this._list.domFocus();
         this._focusCheckedOrFirst();
     }
+    getFocusedElement() {
+        const focused = this._list.getFocus();
+        if (focused.length > 0) {
+            return this._list.element(focused[0]);
+        }
+        return undefined;
+    }
     _focusCheckedOrFirst() {
         this._suppressHover = true;
         try {
@@ -516,7 +586,7 @@ let ActionList = class ActionList extends Disposable {
         this._delegate.onHide(didCancel);
         this.cts.cancel();
         this._hover.clear();
-        this._contextViewService.hideContextView();
+        this._hideSubmenu();
     }
     clearFilter() {
         if (this._filterInput && this._filterText) {
@@ -527,13 +597,33 @@ let ActionList = class ActionList extends Disposable {
         }
         return false;
     }
-    hasDynamicHeight() {
+    get hasDynamicHeight() {
         if (this._options?.showFilter) {
             return true;
         }
         return ( this._allMenuItems.some(item => item.isSectionToggle));
     }
-    computeHeight() {
+    get lineHeight() {
+        return this._actionLineHeight;
+    }
+    computeFullHeight() {
+        let fullHeight = 0;
+        for (const item of this._allMenuItems) {
+            switch (item.kind) {
+            case ActionListItemKind.Header:
+                fullHeight += this._headerLineHeight;
+                break;
+            case ActionListItemKind.Separator:
+                fullHeight += this._separatorLineHeight;
+                break;
+            default:
+                fullHeight += this._actionLineHeight;
+                break;
+            }
+        }
+        return fullHeight;
+    }
+    computeListHeight() {
         const visibleCount = this._list.length;
         let listHeight = 0;
         for (let i = 0; i < visibleCount; i++) {
@@ -550,46 +640,14 @@ let ActionList = class ActionList extends Disposable {
                 break;
             }
         }
-        const filterHeight = this._filterContainer ? 36 : 0;
-        const padding = 10;
-        const targetWindow = getWindow(this.domNode);
-        let availableHeight;
-        if (this.hasDynamicHeight()) {
-            const viewportHeight = targetWindow.innerHeight;
-            const anchorRect = getAnchorRect(this._anchor);
-            const anchorTopInViewport = anchorRect.top - targetWindow.pageYOffset;
-            const spaceBelow = viewportHeight - anchorTopInViewport - anchorRect.height - padding;
-            const spaceAbove = anchorTopInViewport - padding;
-            if (this._showAbove === undefined) {
-                let fullHeight = filterHeight;
-                for (const item of this._allMenuItems) {
-                    switch (item.kind) {
-                    case ActionListItemKind.Header:
-                        fullHeight += this._headerLineHeight;
-                        break;
-                    case ActionListItemKind.Separator:
-                        fullHeight += this._separatorLineHeight;
-                        break;
-                    default:
-                        fullHeight += this._actionLineHeight;
-                        break;
-                    }
-                }
-                this._showAbove = fullHeight > spaceBelow && spaceAbove > spaceBelow;
-            }
-            availableHeight = this._showAbove ? spaceAbove : spaceBelow;
-        } else {
-            const windowHeight = this._layoutService.getContainer(targetWindow).clientHeight;
-            const widgetTop = this.domNode.getBoundingClientRect().top;
-            availableHeight = widgetTop > 0 ? windowHeight - widgetTop - padding : windowHeight * 0.7;
+        return listHeight;
+    }
+    layout(height, width) {
+        this._list.layout(height, width);
+        this.domNode.style.height = `${height}px`;
+        if (this._filterContainer && this._filterContainer.parentElement) {
+            this._filterContainer.parentElement.insertBefore(this._filterContainer, this.domNode);
         }
-        const viewportMaxHeight = Math.floor(targetWindow.innerHeight * 0.4);
-        const maxHeight = Math.min(
-            Math.max(availableHeight, this._actionLineHeight * 3 + filterHeight),
-            viewportMaxHeight
-        );
-        const height = Math.min(listHeight + filterHeight, maxHeight);
-        return height - filterHeight;
     }
     computeMaxWidth(minWidth) {
         const visibleCount = this._list.length;
@@ -599,9 +657,6 @@ let ActionList = class ActionList extends Disposable {
         if (totalItemCount >= 50) {
             return Math.max(380, effectiveMinWidth);
         }
-        if (this._cachedMaxWidth !== undefined) {
-            return this._cachedMaxWidth;
-        }
         if (totalItemCount > visibleCount) {
             const visibleItems = [];
             for (let i = 0; i < visibleCount; i++) {
@@ -650,19 +705,6 @@ let ActionList = class ActionList extends Disposable {
         }
         return Math.max(...itemWidths, effectiveMinWidth);
     }
-    layout(minWidth) {
-        this._hasLaidOut = true;
-        this._lastMinWidth = minWidth;
-        const listHeight = this.computeHeight();
-        this._list.layout(listHeight);
-        this._cachedMaxWidth = this.computeMaxWidth(minWidth);
-        this._list.layout(listHeight, this._cachedMaxWidth);
-        this.domNode.style.height = `${listHeight}px`;
-        if (this._filterContainer && this._filterContainer.parentElement) {
-            this._filterContainer.parentElement.insertBefore(this._filterContainer, this.domNode);
-        }
-        return this._cachedMaxWidth;
-    }
     focusPrevious() {
         if (this._filterInput && isActiveElement(this._filterInput)) {
             this._list.domFocus();
@@ -784,6 +826,13 @@ let ActionList = class ActionList extends Disposable {
             this._list.setSelection([]);
             return;
         }
+        if (element.submenuActions?.length && isMouseEvent(e.browserEvent)) {
+            const target = e.browserEvent.target;
+            if (isHTMLElement(target) && target.closest(".action-list-submenu-indicator")) {
+                this._list.setSelection([]);
+                return;
+            }
+        }
         if (element.item && this.focusCondition(element)) {
             this._delegate.onSelect(element.item, e.browserEvent instanceof PreviewSelectedEvent);
         } else {
@@ -827,40 +876,204 @@ let ActionList = class ActionList extends Disposable {
         return this.domNode.getRootNode().getElementById(this._list.getElementID(index));
     }
     _showHoverForElement(element, index) {
-        let newHover;
-        if (element.hover?.content) {
-            const rowElement = this._getRowElement(index);
-            if (rowElement) {
-                const markdown = typeof element.hover.content === "string" ? ( new MarkdownString(element.hover.content)) : element.hover.content;
-                newHover = this._hoverService.showDelayedHover({
-                    content: markdown ?? "",
-                    target: rowElement,
-                    additionalClasses: ["action-widget-hover"],
-                    position: {
-                        hoverPosition: HoverPosition.LEFT,
-                        forcePosition: false,
-                        ...element.hover.position
+        if (this._currentSubmenuElement === element || element.submenuActions?.length) {
+            return;
+        }
+        this._submenuDisposables.clear();
+        const rowElement = this._getRowElement(index);
+        if (!rowElement) {
+            this._hover.clear();
+            return;
+        }
+        const hasHoverContent = !!element.hover?.content;
+        if (!hasHoverContent) {
+            this._hover.clear();
+            return;
+        }
+        const markdown = typeof element.hover.content === "string" ? ( new MarkdownString(element.hover.content)) : element.hover.content;
+        const linkHandler = this._options?.linkHandler;
+        this._hover.value = this._hoverService.showDelayedHover({
+            content: markdown ?? "",
+            target: rowElement,
+            additionalClasses: ["action-widget-hover"],
+            linkHandler: linkHandler ? url => {
+                linkHandler(( URI.parse(url)), element);
+            } : undefined,
+            position: {
+                hoverPosition: HoverPosition.LEFT,
+                forcePosition: false,
+                ...element.hover.position
+            },
+            appearance: {
+                showPointer: true
+            }
+        }, {
+            groupId: `actionListHover`
+        });
+    }
+    _showSubmenuForElement(element, anchor) {
+        this._submenuDisposables.clear();
+        this._hover.clear();
+        this._currentSubmenuElement = element;
+        clearNode(this._submenuContainer);
+        const submenuItems = [];
+        for (const action of element.submenuActions) {
+            if (action instanceof SubmenuAction) {
+                submenuItems.push({
+                    kind: ActionListItemKind.Header,
+                    group: {
+                        title: action.label
                     },
-                    appearance: {
-                        showPointer: true
-                    }
-                }, {
-                    groupId: `actionListHover`
+                    label: action.label
                 });
+                for (const child of action.actions) {
+                    submenuItems.push({
+                        item: child,
+                        kind: ActionListItemKind.Action,
+                        label: child.label,
+                        description: child.tooltip || undefined,
+                        group: {
+                            title: "",
+                            icon: ThemeIcon.fromId(child.checked ? Codicon.check.id : Codicon.blank.id)
+                        },
+                        hideIcon: false
+                    });
+                }
+            }
+        }
+        const submenuDelegate = {
+            onHide: () => {},
+            onSelect: action => {
+                action.run();
+                const parentItem = this._currentSubmenuElement?.item;
+                this._hideSubmenu();
+                if (parentItem) {
+                    this._delegate.onSelect(parentItem);
+                }
+                this.hide();
             }
+        };
+        this._submenuContainer.style.display = "";
+        this._submenuContainer.style.position = "absolute";
+        const anchorRect = anchor.getBoundingClientRect();
+        const parentRect = this.domNode.getBoundingClientRect();
+        const submenuWidget = this._submenuDisposables.add(this._instantiationService.createInstance(
+            ActionListWidget_1,
+            "submenu",
+            false,
+            submenuItems,
+            submenuDelegate,
+            undefined,
+            undefined
+        ));
+        this._submenuContainer.appendChild(submenuWidget.domNode);
+        this._currentSubmenuWidget = submenuWidget;
+        const totalHeight = submenuWidget.computeListHeight();
+        submenuWidget.layout(totalHeight);
+        const maxWidth = submenuWidget.computeMaxWidth(0);
+        submenuWidget.layout(totalHeight, maxWidth);
+        submenuWidget.domNode.style.width = `${maxWidth}px`;
+        const targetWindow = getWindow(this.domNode);
+        const viewportWidth = targetWindow.innerWidth;
+        const spaceRight = viewportWidth - anchorRect.right;
+        const spaceLeft = parentRect.left;
+        const submenuWidth = maxWidth + 10;
+        const gap = 4;
+        if (spaceRight >= submenuWidth || spaceRight >= spaceLeft) {
+            this._submenuContainer.style.left = `${parentRect.right - parentRect.left + gap}px`;
+        } else {
+            this._submenuContainer.style.left = `${-submenuWidth - gap}px`;
+        }
+        this._submenuContainer.style.top = `${anchorRect.top - parentRect.top - 4}px`;
+        this._submenuDisposables.add(addDisposableListener(submenuWidget.domNode, "keydown", e => {
+            if (e.key === "ArrowLeft" || e.key === "Escape") {
+                EventHelper.stop(e, true);
+                this._hideSubmenu();
+                this._list.domFocus();
+            } else if (e.key === "Enter") {
+                EventHelper.stop(e, true);
+                const focused = submenuWidget.getFocusedElement();
+                if (focused?.item) {
+                    focused.item.run();
+                    const parentItem = this._currentSubmenuElement?.item;
+                    this._hideSubmenu();
+                    if (parentItem) {
+                        this._delegate.onSelect(parentItem);
+                    }
+                    this.hide();
+                }
+            } else if (e.key === "ArrowDown") {
+                EventHelper.stop(e, true);
+                submenuWidget.focusNext();
+            } else if (e.key === "ArrowUp") {
+                EventHelper.stop(e, true);
+                submenuWidget.focusPrevious();
+            }
+        }));
+    }
+    _hideSubmenu() {
+        this._cancelSubmenuHide();
+        this._cancelSubmenuShow();
+        this._submenuDisposables.clear();
+        this._currentSubmenuWidget = undefined;
+        this._currentSubmenuElement = undefined;
+        clearNode(this._submenuContainer);
+        this._submenuContainer.style.display = "none";
+    }
+    _scheduleSubmenuHide() {
+        this._cancelSubmenuHide();
+        this._submenuHideTimeout = setTimeout(() => {
+            this._hideSubmenu();
+        }, 300);
+    }
+    _cancelSubmenuHide() {
+        if (this._submenuHideTimeout !== undefined) {
+            clearTimeout(this._submenuHideTimeout);
+            this._submenuHideTimeout = undefined;
+        }
+    }
+    _scheduleSubmenuShow(element, index) {
+        this._cancelSubmenuShow();
+        this._submenuShowTimeout = setTimeout(() => {
+            this._submenuShowTimeout = undefined;
+            const rowElement = typeof index === "number" ? this._getRowElement(index) : null;
+            if (rowElement) {
+                this._showSubmenuForElement(element, rowElement);
+            }
+        }, 300);
+    }
+    _cancelSubmenuShow() {
+        if (this._submenuShowTimeout !== undefined) {
+            clearTimeout(this._submenuShowTimeout);
+            this._submenuShowTimeout = undefined;
         }
-        this._hover.value = newHover;
     }
     async onListHover(e) {
         const element = e.element;
         if (element && element.item && this.focusCondition(element)) {
             const isHoveringToolbar = isHTMLElement(e.browserEvent.target) && e.browserEvent.target.closest(".action-list-item-toolbar") !== null;
             if (isHoveringToolbar) {
+                this._cancelSubmenuShow();
                 this._list.setFocus([]);
                 return;
             }
             this._list.setFocus(typeof e.index === "number" ? [e.index] : []);
-            if (this._delegate.onHover && !element.disabled && element.kind === ActionListItemKind.Action) {
+            if (element.submenuActions?.length) {
+                if (this._currentSubmenuElement === element) {
+                    this._cancelSubmenuHide();
+                    this._cancelSubmenuShow();
+                } else {
+                    this._scheduleSubmenuShow(element, e.index);
+                }
+                return;
+            }
+            if (this._currentSubmenuElement === element) {
+                this._cancelSubmenuHide();
+            } else {
+                this._cancelSubmenuShow();
+                this._hideSubmenu();
+            }
+            if (this._delegate.onHover && !element.disabled && element.kind === ActionListItemKind.Action && this._currentSubmenuElement !== element) {
                 const result = await this._delegate.onHover(element.item, this.cts.token);
                 const canPreview = result ? result.canPreview : undefined;
                 if (canPreview !== element.canPreview) {
@@ -886,9 +1099,132 @@ let ActionList = class ActionList extends Disposable {
         }
     }
 };
-ActionList = ( __decorate([( __param(7, IContextViewService)), ( __param(8, IKeybindingService)), ( __param(9, ILayoutService)), ( __param(10, IHoverService)), ( __param(11, IOpenerService))], ActionList));
+ActionListWidget = ActionListWidget_1 = ( __decorate([( __param(6, IKeybindingService)), ( __param(7, IHoverService)), ( __param(8, IOpenerService)), ( __param(9, IInstantiationService))], ActionListWidget));
+let ActionList = class ActionList extends Disposable {
+    get domNode() {
+        return this._widget.domNode;
+    }
+    get filterContainer() {
+        return this._widget.filterContainer;
+    }
+    get filterInput() {
+        return this._widget.filterInput;
+    }
+    get anchorPosition() {
+        if (this._showAbove === undefined) {
+            return undefined;
+        }
+        return this._showAbove ? AnchorPosition.ABOVE : AnchorPosition.BELOW;
+    }
+    constructor(
+        user,
+        preview,
+        items,
+        _delegate,
+        accessibilityProvider,
+        options,
+        anchor,
+        _contextViewService,
+        _layoutService,
+        instantiationService
+    ) {
+        super();
+        this._contextViewService = _contextViewService;
+        this._layoutService = _layoutService;
+        this._lastMinWidth = 0;
+        this._hasLaidOut = false;
+        this._anchor = anchor;
+        this._widget = this._register(instantiationService.createInstance(
+            ActionListWidget,
+            user,
+            preview,
+            items,
+            _delegate,
+            accessibilityProvider,
+            options
+        ));
+        this._register(this._widget.onDidRequestLayout(() => {
+            if (this._hasLaidOut) {
+                this.layout(this._lastMinWidth);
+                this._contextViewService.layout();
+            }
+        }));
+    }
+    focus() {
+        this._widget.focus();
+    }
+    hide(didCancel) {
+        this._widget.hide(didCancel);
+        this._contextViewService.hideContextView();
+    }
+    clearFilter() {
+        return this._widget.clearFilter();
+    }
+    focusPrevious() {
+        this._widget.focusPrevious();
+    }
+    focusNext() {
+        this._widget.focusNext();
+    }
+    collapseFocusedSection() {
+        this._widget.collapseFocusedSection();
+    }
+    expandFocusedSection() {
+        this._widget.expandFocusedSection();
+    }
+    toggleFocusedSection() {
+        return this._widget.toggleFocusedSection();
+    }
+    acceptSelected(preview) {
+        this._widget.acceptSelected(preview);
+    }
+    hasDynamicHeight() {
+        return this._widget.hasDynamicHeight;
+    }
+    computeHeight() {
+        const listHeight = this._widget.computeListHeight();
+        const filterHeight = this._widget.filterContainer ? 36 : 0;
+        const padding = 10;
+        const targetWindow = getWindow(this.domNode);
+        let availableHeight;
+        if (this.hasDynamicHeight()) {
+            const viewportHeight = targetWindow.innerHeight;
+            const anchorRect = getAnchorRect(this._anchor);
+            const anchorTopInViewport = anchorRect.top - targetWindow.pageYOffset;
+            const spaceBelow = viewportHeight - anchorTopInViewport - anchorRect.height - padding;
+            const spaceAbove = anchorTopInViewport - padding;
+            if (this._showAbove === undefined) {
+                const fullHeight = filterHeight + this._widget.computeFullHeight();
+                this._showAbove = fullHeight > spaceBelow && spaceAbove > spaceBelow;
+            }
+            availableHeight = this._showAbove ? spaceAbove : spaceBelow;
+        } else {
+            const windowHeight = this._layoutService.getContainer(targetWindow).clientHeight;
+            const widgetTop = this.domNode.getBoundingClientRect().top;
+            availableHeight = widgetTop > 0 ? windowHeight - widgetTop - padding : windowHeight * 0.7;
+        }
+        const viewportMaxHeight = Math.floor(targetWindow.innerHeight * 0.6);
+        const actionLineHeight = this._widget.lineHeight;
+        const maxHeight = Math.min(
+            Math.max(availableHeight, actionLineHeight * 3 + filterHeight),
+            viewportMaxHeight
+        );
+        const height = Math.min(listHeight + filterHeight, maxHeight);
+        return height - filterHeight;
+    }
+    layout(minWidth) {
+        this._hasLaidOut = true;
+        this._lastMinWidth = minWidth;
+        const listHeight = this.computeHeight();
+        this._widget.layout(listHeight);
+        this._cachedMaxWidth = this._widget.computeMaxWidth(minWidth);
+        this._widget.layout(listHeight, this._cachedMaxWidth);
+        return this._cachedMaxWidth;
+    }
+};
+ActionList = ( __decorate([( __param(7, IContextViewService)), ( __param(8, ILayoutService)), ( __param(9, IInstantiationService))], ActionList));
 function stripNewlines(str) {
     return str.replace(/\r\n|\r|\n/g, " ");
 }
 
-export { ActionList, ActionListItemKind, acceptSelectedActionCommand, previewSelectedActionCommand };
+export { ActionList, ActionListItemKind, ActionListWidget, acceptSelectedActionCommand, previewSelectedActionCommand };