@codingame/monaco-vscode-api 26.2.2 → 28.0.0

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

@@ -1,19 +1,26 @@
 
 import { registerCss } from '../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
-import { createElement, setVisibility, clearNode, getWindow, isHTMLElement } from '../../../base/browser/dom.js';
+import { createElement, setVisibility, clearNode, addDisposableListener, isActiveElement, getWindow, isHTMLElement } 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 { CancellationTokenSource } from '../../../base/common/cancellation.js';
 import { Codicon } from '../../../base/common/codicons.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 { OS } from '../../../base/common/platform.js';
 import { ThemeIcon } from '../../../base/common/themables.js';
+import { URI } from '../../../base/common/uri.js';
 import * as actionWidget from './actionWidget.css';
 import { localize } from '../../../nls.js';
 import { IContextViewService } from '../../contextview/browser/contextView.service.js';
 import { IKeybindingService } from '../../keybinding/common/keybinding.service.js';
+import { IOpenerService } from '../../opener/common/opener.service.js';
 import { defaultListStyles } from '../../theme/browser/defaultStyles.js';
 import { asCssVariable } from '../../theme/common/colorUtils.js';
 import '../../theme/common/colors/baseColors.js';
@@ -28,7 +35,6 @@ import '../../theme/common/colors/quickpickColors.js';
 import '../../theme/common/colors/searchColors.js';
 import { ILayoutService } from '../../layout/browser/layoutService.service.js';
 import { IHoverService } from '../../hover/browser/hover.service.js';
-import { MarkdownString } from '../../../base/common/htmlContent.js';
 import { HoverPosition } from '../../../base/browser/ui/hover/hoverWidget.js';
 
 registerCss(actionWidget);
@@ -80,9 +86,11 @@ let ActionItemRenderer = class ActionItemRenderer {
     get templateId() {
         return ActionListItemKind.Action;
     }
-    constructor(_supportsPreview, _keybindingService) {
+    constructor(_supportsPreview, _onRemoveItem, _keybindingService, _openerService) {
         this._supportsPreview = _supportsPreview;
+        this._onRemoveItem = _onRemoveItem;
         this._keybindingService = _keybindingService;
+        this._openerService = _openerService;
     }
     renderTemplate(container) {
         container.classList.add(this.templateId);
@@ -92,6 +100,9 @@ let ActionItemRenderer = class ActionItemRenderer {
         const text = createElement("span");
         text.className = "title";
         container.append(text);
+        const badge = createElement("span");
+        badge.className = "action-item-badge";
+        container.append(badge);
         const description = createElement("span");
         description.className = "description";
         container.append(description);
@@ -104,6 +115,7 @@ let ActionItemRenderer = class ActionItemRenderer {
             container,
             icon,
             text,
+            badge,
             description,
             keybinding,
             toolbar,
@@ -125,13 +137,41 @@ let ActionItemRenderer = class ActionItemRenderer {
             return;
         }
         setVisibility(!element.hideIcon, data.icon);
+        if (data.previousClassName) {
+            data.container.classList.remove(data.previousClassName);
+        }
+        data.container.classList.toggle("action-list-custom", !!element.className);
+        if (element.className) {
+            data.container.classList.add(element.className);
+        }
+        data.previousClassName = element.className;
         data.text.textContent = stripNewlines(element.label);
+        if (element.badge) {
+            data.badge.textContent = element.badge;
+            data.badge.style.display = "";
+        } else {
+            data.badge.textContent = "";
+            data.badge.style.display = "none";
+        }
         if (element.keybinding) {
             data.description.textContent = element.keybinding.getLabel();
             data.description.style.display = "inline";
             data.description.style.letterSpacing = "0.5px";
         } else if (element.description) {
-            data.description.textContent = stripNewlines(element.description);
+            clearNode(data.description);
+            if (typeof element.description === "string") {
+                data.description.textContent = stripNewlines(element.description);
+            } else {
+                const rendered = renderMarkdown(element.description, {
+                    actionHandler: content => {
+                        this._openerService.open(( URI.parse(content)), {
+                            allowCommands: true
+                        });
+                    }
+                });
+                data.elementDisposables.add(rendered);
+                data.description.appendChild(rendered.element);
+            }
             data.description.style.display = "inline";
         } else {
             data.description.textContent = "";
@@ -139,7 +179,7 @@ let ActionItemRenderer = class ActionItemRenderer {
         }
         const actionTitle = this._keybindingService.lookupKeybinding(acceptSelectedActionCommand)?.getLabel();
         const previewTitle = this._keybindingService.lookupKeybinding(previewSelectedActionCommand)?.getLabel();
-        data.container.classList.toggle("option-disabled", element.disabled);
+        data.container.classList.toggle("option-disabled", !!element.disabled);
         if (element.hover !== undefined) {
             data.container.title = "";
         } else if (element.tooltip) {
@@ -148,19 +188,31 @@ let ActionItemRenderer = class ActionItemRenderer {
             data.container.title = element.label;
         } else if (actionTitle && previewTitle) {
             if (this._supportsPreview && element.canPreview) {
-                data.container.title = ( localize(1747, "{0} to Apply, {1} to Preview", actionTitle, previewTitle));
+                data.container.title = ( localize(1773, "{0} to Apply, {1} to Preview", actionTitle, previewTitle));
             } else {
-                data.container.title = ( localize(1748, "{0} to Apply", actionTitle));
+                data.container.title = ( localize(1774, "{0} to Apply", actionTitle));
             }
         } else {
             data.container.title = "";
         }
         clearNode(data.toolbar);
-        data.container.classList.toggle("has-toolbar", !!element.toolbarActions?.length);
-        if (element.toolbarActions?.length) {
+        const toolbarActions = [...(element.toolbarActions ?? [])];
+        if (element.onRemove) {
+            toolbarActions.push(toAction({
+                id: "actionList.remove",
+                label: ( localize(1775, "Remove")),
+                class: ThemeIcon.asClassName(Codicon.close),
+                run: () => {
+                    element.onRemove();
+                    this._onRemoveItem?.(element);
+                }
+            }));
+        }
+        data.container.classList.toggle("has-toolbar", toolbarActions.length > 0);
+        if (toolbarActions.length > 0) {
             const actionBar = ( new ActionBar(data.toolbar));
             data.elementDisposables.add(actionBar);
-            actionBar.push(element.toolbarActions, {
+            actionBar.push(toolbarActions, {
                 icon: true,
                 label: false
             });
@@ -171,7 +223,7 @@ let ActionItemRenderer = class ActionItemRenderer {
         templateData.elementDisposables.dispose();
     }
 };
-ActionItemRenderer = ( __decorate([( __param(1, IKeybindingService))], ActionItemRenderer));
+ActionItemRenderer = ( __decorate([( __param(2, IKeybindingService)), ( __param(3, IOpenerService))], ActionItemRenderer));
 class AcceptSelectedEvent extends UIEvent {
     constructor() {
         super("acceptSelectedAction");
@@ -189,30 +241,55 @@ 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;
+    }
     constructor(
         user,
         preview,
         items,
         _delegate,
         accessibilityProvider,
+        _options,
+        _anchor,
         _contextViewService,
         _keybindingService,
         _layoutService,
-        _hoverService
+        _hoverService,
+        _openerService
     ) {
         super();
         this._delegate = _delegate;
+        this._options = _options;
+        this._anchor = _anchor;
         this._contextViewService = _contextViewService;
         this._keybindingService = _keybindingService;
         this._layoutService = _layoutService;
         this._hoverService = _hoverService;
-        this._actionLineHeight = 28;
-        this._headerLineHeight = 28;
+        this._openerService = _openerService;
+        this._headerLineHeight = 24;
         this._separatorLineHeight = 8;
         this.cts = this._register(( new CancellationTokenSource()));
         this._hover = this._register(( new MutableDisposable()));
+        this._collapsedSections = ( new Set());
+        this._filterText = "";
+        this._suppressHover = false;
+        this._lastMinWidth = 0;
+        this._hasLaidOut = false;
         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;
+        if (this._options?.collapsedByDefault) {
+            for (const section of this._options.collapsedByDefault) {
+                this._collapsedSections.add(section);
+            }
+        }
         const virtualDelegate = {
             getHeight: element => {
                 switch (element.kind) {
@@ -226,9 +303,14 @@ let ActionList = class ActionList extends Disposable {
             },
             getTemplateId: element => element.kind
         };
-        this._list = this._register(( new List(user, this.domNode, virtualDelegate, [( new ActionItemRenderer(preview, this._keybindingService)), ( new HeaderRenderer()), ( new SeparatorRenderer())], {
+        this._list = this._register(( new List(user, this.domNode, virtualDelegate, [( new ActionItemRenderer(
+            preview,
+            item => this._removeItem(item),
+            this._keybindingService,
+            this._openerService
+        )), ( new HeaderRenderer()), ( new SeparatorRenderer())], {
             keyboardSupport: false,
-            typeNavigationEnabled: true,
+            typeNavigationEnabled: !this._options?.showFilter,
             keyboardNavigationLabelProvider: {
                 getKeyboardNavigationLabel
             },
@@ -237,16 +319,17 @@ let ActionList = class ActionList extends Disposable {
                     if (element.kind === ActionListItemKind.Action) {
                         let label = element.label ? stripNewlines(element?.label) : "";
                         if (element.description) {
-                            label = label + ", " + stripNewlines(element.description);
+                            const descText = typeof element.description === "string" ? element.description : element.description.value;
+                            label = label + ", " + stripNewlines(descText);
                         }
                         if (element.disabled) {
-                            label = ( localize(1749, "{0}, Disabled Reason: {1}", label, element.disabled));
+                            label = ( localize(1776, "{0}, Disabled Reason: {1}", label, element.disabled));
                         }
                         return label;
                     }
                     return null;
                 },
-                getWidgetAriaLabel: () => ( localize(1750, "Action Widget")),
+                getWidgetAriaLabel: () => ( localize(1777, "Action Widget")),
                 getRole: e => {
                     switch (e.kind) {
                     case ActionListItemKind.Action:
@@ -266,59 +349,418 @@ let ActionList = class ActionList extends Disposable {
         this._register(this._list.onMouseOver(e => this.onListHover(e)));
         this._register(this._list.onDidChangeFocus(() => this.onFocus()));
         this._register(this._list.onDidChangeSelection(e => this.onListSelection(e)));
-        this._allMenuItems = items;
-        this._list.splice(0, this._list.length, this._allMenuItems);
+        this._allMenuItems = [...items];
+        if (this._options?.showFilter) {
+            this._filterContainer = createElement("div");
+            this._filterContainer.className = "action-list-filter";
+            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._register(addDisposableListener(this._filterInput, "input", () => {
+                this._filterText = this._filterInput.value;
+                this._applyFilter();
+            }));
+        }
+        this._applyFilter();
         if (this._list.length) {
-            this.focusNext();
+            this._focusCheckedOrFirst();
+        }
+        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) {
+                    this._filterInput.focus();
+                    this._filterInput.value = e.key;
+                    this._filterText = e.key;
+                    this._applyFilter();
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }));
+        }
+    }
+    _toggleSection(section) {
+        if (( this._collapsedSections.has(section))) {
+            this._collapsedSections.delete(section);
+        } else {
+            this._collapsedSections.add(section);
+        }
+        this._applyFilter();
+    }
+    _applyFilter() {
+        const filterLower = this._filterText.toLowerCase();
+        const isFiltering = filterLower.length > 0;
+        const visible = [];
+        const focusedIndexes = this._list.getFocus();
+        let focusedItem;
+        if (focusedIndexes.length > 0) {
+            focusedItem = this._list.element(focusedIndexes[0]);
+        }
+        for (const item of this._allMenuItems) {
+            if (item.kind === ActionListItemKind.Header) {
+                if (isFiltering) {
+                    continue;
+                }
+                visible.push(item);
+                continue;
+            }
+            if (item.kind === ActionListItemKind.Separator) {
+                if (isFiltering) {
+                    continue;
+                }
+                if (item.section && ( this._collapsedSections.has(item.section))) {
+                    continue;
+                }
+                visible.push(item);
+                continue;
+            }
+            if (isFiltering) {
+                if (item.showAlways) {
+                    visible.push(item);
+                    continue;
+                }
+                if (item.isSectionToggle) {
+                    continue;
+                }
+                const label = (item.label ?? "").toLowerCase();
+                const descValue = typeof item.description === "string" ? item.description : item.description?.value ?? "";
+                const desc = descValue.toLowerCase();
+                if (label.includes(filterLower) || desc.includes(filterLower)) {
+                    visible.push(item);
+                }
+            } else {
+                if (item.isSectionToggle && item.section) {
+                    const collapsed = ( this._collapsedSections.has(item.section));
+                    visible.push({
+                        ...item,
+                        group: {
+                            ...item.group,
+                            icon: collapsed ? Codicon.chevronRight : Codicon.chevronDown
+                        }
+                    });
+                    continue;
+                }
+                if (item.section && ( this._collapsedSections.has(item.section))) {
+                    continue;
+                }
+                visible.push(item);
+            }
+        }
+        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._contextViewService.layout();
         }
     }
+    get filterContainer() {
+        return this._filterContainer;
+    }
+    get filterInput() {
+        return this._filterInput;
+    }
     focusCondition(element) {
         return !element.disabled && element.kind === ActionListItemKind.Action;
     }
+    focus() {
+        if (this._filterInput && this._options?.focusFilterOnOpen) {
+            this._filterInput.focus();
+            this._focusCheckedOrFirst();
+            return;
+        }
+        this._list.domFocus();
+        this._focusCheckedOrFirst();
+    }
+    _focusCheckedOrFirst() {
+        this._suppressHover = true;
+        try {
+            for (let i = 0; i < this._list.length; i++) {
+                const element = this._list.element(i);
+                if (element.kind === ActionListItemKind.Action && element.item?.checked) {
+                    this._list.setFocus([i]);
+                    this._list.reveal(i);
+                    return;
+                }
+            }
+            this._list.focusFirst(undefined, this.focusCondition);
+            const focused = this._list.getFocus();
+            if (focused.length > 0) {
+                this._list.reveal(focused[0]);
+            }
+        } finally {
+            this._suppressHover = false;
+        }
+    }
     hide(didCancel) {
         this._delegate.onHide(didCancel);
         this.cts.cancel();
         this._hover.clear();
         this._contextViewService.hideContextView();
     }
-    layout(minWidth) {
-        const numHeaders = this._allMenuItems.filter(item => item.kind === "header").length;
-        const numSeparators = this._allMenuItems.filter(item => item.kind === "separator").length;
-        const itemsHeight = this._allMenuItems.length * this._actionLineHeight;
-        const heightWithHeaders = itemsHeight + numHeaders * this._headerLineHeight - numHeaders * this._actionLineHeight;
-        const heightWithSeparators = heightWithHeaders + numSeparators * this._separatorLineHeight - numSeparators * this._actionLineHeight;
-        this._list.layout(heightWithSeparators);
-        let maxWidth = minWidth;
-        if (this._allMenuItems.length >= 50) {
-            maxWidth = 380;
+    clearFilter() {
+        if (this._filterInput && this._filterText) {
+            this._filterInput.value = "";
+            this._filterText = "";
+            this._applyFilter();
+            return true;
+        }
+        return false;
+    }
+    hasDynamicHeight() {
+        if (this._options?.showFilter) {
+            return true;
+        }
+        return ( this._allMenuItems.some(item => item.isSectionToggle));
+    }
+    computeHeight() {
+        const visibleCount = this._list.length;
+        let listHeight = 0;
+        for (let i = 0; i < visibleCount; i++) {
+            const element = this._list.element(i);
+            switch (element.kind) {
+            case ActionListItemKind.Header:
+                listHeight += this._headerLineHeight;
+                break;
+            case ActionListItemKind.Separator:
+                listHeight += this._separatorLineHeight;
+                break;
+            default:
+                listHeight += this._actionLineHeight;
+                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 itemWidths = ( this._allMenuItems.map((_, index) => {
-                const element = this._getRowElement(index);
+            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.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;
+        const effectiveMinWidth = Math.max(minWidth, this._options?.minWidth ?? 0);
+        let maxWidth = effectiveMinWidth;
+        const totalItemCount = this._allMenuItems.length;
+        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++) {
+                visibleItems.push(this._list.element(i));
+            }
+            const allItems = [...this._allMenuItems];
+            this._list.splice(0, visibleCount, allItems);
+            let allItemsHeight = 0;
+            for (const item of allItems) {
+                switch (item.kind) {
+                case ActionListItemKind.Header:
+                    allItemsHeight += this._headerLineHeight;
+                    break;
+                case ActionListItemKind.Separator:
+                    allItemsHeight += this._separatorLineHeight;
+                    break;
+                default:
+                    allItemsHeight += this._actionLineHeight;
+                    break;
+                }
+            }
+            this._list.layout(allItemsHeight);
+            const itemWidths = [];
+            for (let i = 0; i < allItems.length; i++) {
+                const element = this._getRowElement(i);
                 if (element) {
                     element.style.width = "auto";
                     const width = element.getBoundingClientRect().width;
                     element.style.width = "";
-                    return width;
+                    itemWidths.push(width + this._computeToolbarWidth(allItems[i]));
                 }
-                return 0;
-            }));
-            maxWidth = Math.max(...itemWidths, minWidth);
+            }
+            maxWidth = Math.max(...itemWidths, effectiveMinWidth);
+            this._list.splice(0, allItems.length, visibleItems);
+            return maxWidth;
         }
-        const maxVhPrecentage = 0.7;
-        const height = Math.min(
-            heightWithSeparators,
-            this._layoutService.getContainer(getWindow(this.domNode)).clientHeight * maxVhPrecentage
-        );
-        this._list.layout(height, maxWidth);
-        this.domNode.style.height = `${height}px`;
-        this._list.domFocus();
-        return maxWidth;
+        const itemWidths = [];
+        for (let i = 0; i < visibleCount; i++) {
+            const element = this._getRowElement(i);
+            if (element) {
+                element.style.width = "auto";
+                const width = element.getBoundingClientRect().width;
+                element.style.width = "";
+                itemWidths.push(width + this._computeToolbarWidth(this._list.element(i)));
+            }
+        }
+        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();
+            const current = this._list.getFocus();
+            if (current.length > 0) {
+                this._list.focusPrevious(1, false, undefined, this.focusCondition);
+                const focused = this._list.getFocus();
+                if (focused.length > 0 && focused[0] >= current[0]) {
+                    this._filterInput.focus();
+                } else if (focused.length > 0) {
+                    this._list.reveal(focused[0]);
+                }
+            } else {
+                this._list.focusLast(undefined, this.focusCondition);
+                const focused = this._list.getFocus();
+                if (focused.length > 0) {
+                    this._list.reveal(focused[0]);
+                }
+            }
+            return;
+        }
+        const previousFocus = this._list.getFocus();
         this._list.focusPrevious(1, true, undefined, this.focusCondition);
+        const focused = this._list.getFocus();
+        if (focused.length > 0) {
+            if (this._filterInput && previousFocus.length > 0 && focused[0] > previousFocus[0]) {
+                this._list.setFocus([]);
+                this._filterInput.focus();
+                return;
+            }
+            this._list.reveal(focused[0]);
+        }
     }
     focusNext() {
+        if (this._filterInput && isActiveElement(this._filterInput)) {
+            this._list.domFocus();
+            const current = this._list.getFocus();
+            if (current.length > 0) {
+                this._list.focusNext(1, false, undefined, this.focusCondition);
+                const focused = this._list.getFocus();
+                if (focused.length > 0) {
+                    this._list.reveal(focused[0]);
+                }
+            } else {
+                this._list.focusFirst(undefined, this.focusCondition);
+                const focused = this._list.getFocus();
+                if (focused.length > 0) {
+                    this._list.reveal(focused[0]);
+                }
+            }
+            return;
+        }
+        const previousFocus = this._list.getFocus();
         this._list.focusNext(1, true, undefined, this.focusCondition);
+        const focused = this._list.getFocus();
+        if (focused.length > 0) {
+            if (this._filterInput && previousFocus.length > 0 && focused[0] < previousFocus[0]) {
+                this._list.setFocus([]);
+                this._filterInput.focus();
+                return;
+            }
+            this._list.reveal(focused[0]);
+        }
+    }
+    collapseFocusedSection() {
+        const section = this._getFocusedSection();
+        if (section && !( this._collapsedSections.has(section))) {
+            this._toggleSection(section);
+        }
+    }
+    expandFocusedSection() {
+        const section = this._getFocusedSection();
+        if (section && ( this._collapsedSections.has(section))) {
+            this._toggleSection(section);
+        }
+    }
+    toggleFocusedSection() {
+        const focused = this._list.getFocus();
+        if (focused.length === 0) {
+            return false;
+        }
+        const element = this._list.element(focused[0]);
+        if (element.isSectionToggle && element.section) {
+            this._toggleSection(element.section);
+            return true;
+        }
+        return false;
+    }
+    _getFocusedSection() {
+        const focused = this._list.getFocus();
+        if (focused.length === 0) {
+            return undefined;
+        }
+        const element = this._list.element(focused[0]);
+        if (element.isSectionToggle && element.section) {
+            return element.section;
+        }
+        return element.section;
     }
     acceptSelected(preview) {
         const focused = this._list.getFocus();
@@ -338,6 +780,10 @@ let ActionList = class ActionList extends Disposable {
             return;
         }
         const element = e.elements[0];
+        if (element.isSectionToggle) {
+            this._list.setSelection([]);
+            return;
+        }
         if (element.item && this.focusCondition(element)) {
             this._delegate.onSelect(element.item, e.browserEvent instanceof PreviewSelectedEvent);
         } else {
@@ -352,7 +798,27 @@ let ActionList = class ActionList extends Disposable {
         const focusIndex = focused[0];
         const element = this._list.element(focusIndex);
         this._delegate.onFocus?.(element.item);
-        this._showHoverForElement(element, focusIndex);
+        if (!this._suppressHover) {
+            this._showHoverForElement(element, focusIndex);
+        }
+    }
+    _removeItem(item) {
+        const index = this._allMenuItems.indexOf(item);
+        if (index >= 0) {
+            this._allMenuItems.splice(index, 1);
+            this._applyFilter();
+        }
+    }
+    _computeToolbarWidth(item) {
+        let actionCount = item.toolbarActions?.length ?? 0;
+        if (item.onRemove) {
+            actionCount++;
+        }
+        if (actionCount === 0) {
+            return 0;
+        }
+        const actionButtonWidth = 22;
+        return actionCount * actionButtonWidth + 6;
     }
     _getRowElement(index) {
         if (!this.domNode.isConnected) {
@@ -362,10 +828,10 @@ let ActionList = class ActionList extends Disposable {
     }
     _showHoverForElement(element, index) {
         let newHover;
-        if (element.hover?.content && this.focusCondition(element)) {
+        if (element.hover?.content) {
             const rowElement = this._getRowElement(index);
             if (rowElement) {
-                const markdown = element.hover.content ? ( new MarkdownString(element.hover.content)) : undefined;
+                const markdown = typeof element.hover.content === "string" ? ( new MarkdownString(element.hover.content)) : element.hover.content;
                 newHover = this._hoverService.showDelayedHover({
                     content: markdown ?? "",
                     target: rowElement,
@@ -393,23 +859,34 @@ let ActionList = class ActionList extends Disposable {
                 this._list.setFocus([]);
                 return;
             }
+            this._list.setFocus(typeof e.index === "number" ? [e.index] : []);
             if (this._delegate.onHover && !element.disabled && element.kind === ActionListItemKind.Action) {
                 const result = await this._delegate.onHover(element.item, this.cts.token);
-                element.canPreview = result ? result.canPreview : undefined;
-            }
-            if (e.index) {
-                this._list.splice(e.index, 1, [element]);
+                const canPreview = result ? result.canPreview : undefined;
+                if (canPreview !== element.canPreview) {
+                    element.canPreview = canPreview;
+                    if (typeof e.index === "number") {
+                        this._list.splice(e.index, 1, [element]);
+                        this._list.setFocus([e.index]);
+                    }
+                }
             }
-            this._list.setFocus(typeof e.index === "number" ? [e.index] : []);
+        } else if (element && element.hover?.content && typeof e.index === "number") {
+            this._showHoverForElement(element, e.index);
         }
     }
     onListClick(e) {
+        if (e.element && e.element.isSectionToggle && e.element.section) {
+            const section = e.element.section;
+            queueMicrotask(() => this._toggleSection(section));
+            return;
+        }
         if (e.element && this.focusCondition(e.element)) {
             this._list.setFocus([]);
         }
     }
 };
-ActionList = ( __decorate([( __param(5, IContextViewService)), ( __param(6, IKeybindingService)), ( __param(7, ILayoutService)), ( __param(8, IHoverService))], ActionList));
+ActionList = ( __decorate([( __param(7, IContextViewService)), ( __param(8, IKeybindingService)), ( __param(9, ILayoutService)), ( __param(10, IHoverService)), ( __param(11, IOpenerService))], ActionList));
 function stripNewlines(str) {
     return str.replace(/\r\n|\r|\n/g, " ");
 }