@codingame/monaco-vscode-api 36.2.7 → 37.0.0

package/vscode/src/vs/platform/actionWidget/browser/actionWidget.css

@@ -18,24 +18,53 @@
 	box-shadow: var(--vscode-shadow-lg);
 }
 
-.context-view-block {
-	position: fixed;
-	cursor: initial;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
+.modern-ui.monaco-enable-motion .action-widget.action-widget-dropdown {
+	animation: action-widget-dropdown-open 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
+	transform-origin: bottom left;
+	will-change: transform, opacity;
+}
+
+.modern-ui.monaco-enable-motion .context-view.bottom .action-widget.action-widget-dropdown {
+	transform-origin: top left;
+}
+
+.modern-ui.monaco-enable-motion .action-widget.action-widget-dropdown.action-widget-dropdown-closing {
+	animation: action-widget-dropdown-close 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
+	pointer-events: none;
+}
+
+@keyframes action-widget-dropdown-open {
+	0% {
+		opacity: 0;
+		transform: scale(0.97);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 
-.context-view-pointerBlock {
+@keyframes action-widget-dropdown-close {
+	0% {
+		opacity: var(--action-widget-close-start-opacity, 1);
+		transform: var(--action-widget-close-start-transform, scale(1));
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale(0.99);
+	}
+}
+
+.context-view-block {
 	position: fixed;
 	cursor: initial;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
-	z-index: 2;
+	z-index: -1;
 }
 
 .action-widget .monaco-list {
@@ -71,7 +100,7 @@
 
 .action-widget .monaco-list-row.group-header {
 	color: var(--vscode-descriptionForeground) !important;
-	font-weight: 500;
+	font-weight: var(--vscode-fontWeight-semiBold);
 	font-size: 11px;
 }
 
@@ -185,6 +214,11 @@
 	white-space: nowrap;
 }
 
+.action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) .detail {
+	color: inherit;
+	opacity: 1;
+}
+
 .action-widget .monaco-list-row.action .action-item-badge {
 	padding: 0px 6px;
 	border-radius: 10px;
@@ -271,15 +305,13 @@
 }
 
 /* Items with detail — show detail as subtext below the title */
-.action-widget .monaco-list .monaco-list-row.action {
-	&:has(.detail:not([style*="display: none"])) {
-		flex-wrap: wrap;
-		align-content: center;
-		padding-right: 6px;
-
-		.title {
-			line-height: 14px;
-		}
+.action-widget .monaco-list .monaco-list-row.action.has-detail {
+	flex-wrap: wrap;
+	align-content: center;
+	padding-right: 6px;
+
+	.title {
+		line-height: 14px;
 	}
 }
 
@@ -294,6 +326,19 @@
 	}
 }
 
+/* Standalone toggles are peer settings, so the label and switch share one row. */
+.action-widget .monaco-list-row.action.has-standalone-toggle .title {
+	font-size: var(--vscode-fontSize-body1);
+	font-weight: var(--vscode-fontWeight-regular);
+}
+
+.action-widget .monaco-list-row.action.has-standalone-toggle .action-list-item-inline-toggle {
+	order: 100;
+	width: auto;
+	margin-left: auto;
+	padding: var(--vscode-spacing-sizeNone);
+}
+
 .action-widget .monaco-list-row.action .action-list-item-inline-toggle {
 	order: 100;
 	width: 100%;
@@ -316,58 +361,6 @@
 	color: var(--vscode-foreground);
 }
 
-/* Inline pill switch (restyles the base Toggle as an iOS-style switch) */
-.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch {
-	position: relative;
-	flex-shrink: 0;
-	float: none;
-	margin: 0;
-	padding: 0;
-	width: 26px;
-	height: 16px;
-	border-radius: var(--vscode-cornerRadius-circle);
-	border: var(--vscode-strokeThickness) solid var(--vscode-checkbox-border);
-	background-color: var(--vscode-checkbox-background);
-	overflow: visible;
-	transition: background-color 0.1s ease, border-color 0.1s ease;
-}
-
-.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch:hover {
-	background-color: var(--vscode-checkbox-background);
-}
-
-.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch::before {
-	content: "";
-	position: absolute;
-	top: 1px;
-	left: 1px;
-	width: 12px;
-	height: 12px;
-	border-radius: 50%;
-	background-color: var(--vscode-checkbox-foreground);
-	transition: left 0.1s ease, background-color 0.1s ease;
-}
-
-.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch.checked {
-	background-color: var(--vscode-button-background);
-	border-color: var(--vscode-button-background);
-}
-
-.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch.checked:hover {
-	background-color: var(--vscode-button-hoverBackground, var(--vscode-button-background));
-}
-
-.action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch.checked::before {
-	left: 11px;
-	background-color: var(--vscode-button-foreground);
-}
-
-.hc-black .action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch,
-.hc-light .action-widget .action-list-item-inline-toggle .monaco-custom-toggle.action-list-inline-switch {
-	border-color: var(--vscode-contrastBorder);
-}
-
-
 /* Inline description mode — description rendered right after the label */
 .action-widget .inline-description .monaco-list-row.action {
 	/* Override the row gap so group-title and toolbar sit flush */
@@ -410,9 +403,19 @@
 	display: none;
 }
 
+.action-widget .monaco-list-row.action.has-toolbar .action-list-item-toolbar {
+	margin-right: var(--vscode-spacing-size100, 10px);
+}
+
+.action-widget .monaco-list-row.action.has-detail.has-toolbar .action-list-item-toolbar {
+	display: flex;
+	visibility: hidden;
+}
+
 .action-widget .monaco-list-row.focused.action.has-toolbar .action-list-item-toolbar,
 .action-widget .monaco-list-row:hover.action.has-toolbar .action-list-item-toolbar {
 	display: flex;
+	visibility: visible;
 }
 
 .action-widget .monaco-list-row .action-list-item-toolbar .monaco-action-bar:not(.vertical) .action-label:not(.disabled):hover {
@@ -455,6 +458,7 @@
 	border-radius: 3px;
 	background-color: var(--vscode-input-background);
 	color: var(--vscode-input-foreground);
+	/* The themed border below replaces the browser's native focus outline. */
 	outline: none;
 }
 
@@ -466,6 +470,7 @@
 	color: var(--vscode-input-placeholderForeground);
 }
 
+/* Filter action buttons remain quiet until the pointer reveals them. */
 .action-widget .action-list-filter-actions .action-label {
 	padding: 3px;
 	border-radius: 3px;
@@ -580,6 +585,10 @@
 	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
 	z-index: 50;
 	width: max-content;
+	/* Hug the inner list so rows (and their hover background) fill the panel.
+	 * Otherwise the panel inherits the 100px min-width from `.action-widget`
+	 * and the hover highlight stops short of the right edge. */
+	min-width: 0;
 	outline: none;
 }
 

package/vscode/src/vs/platform/actionWidget/browser/actionWidget.d.ts

@@ -15,6 +15,9 @@ export declare class ActionWidgetService extends Disposable implements IActionWi
     readonly _serviceBrand: undefined;
     get isVisible(): boolean;
     private readonly _list;
+    private readonly _closeAnimation;
+    private _widgetElement;
+    private _closingList;
     constructor(_contextViewService: IContextViewService, _contextKeyService: IContextKeyService, _instantiationService: IInstantiationService);
     show<T>(user: string, supportsPreview: boolean, items: readonly IActionListItem<T>[], delegate: IActionListDelegate<T>, anchor: HTMLElement | StandardMouseEvent | IAnchor, container: HTMLElement | undefined, actionBarActions?: readonly IAction[], accessibilityProvider?: Partial<IListAccessibilityProvider<IActionListItem<T>>>, listOptions?: IActionListOptions): void;
     acceptSelected(preview?: boolean): void;
@@ -30,5 +33,6 @@ export declare class ActionWidgetService extends Disposable implements IActionWi
     clear(): void;
     private _renderWidget;
     private _createActionBar;
+    private _hasRequiredAncestorClasses;
     private _onWidgetClosed;
 }

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

@@ -1,9 +1,10 @@
 
 import { registerCss } from '../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
-import { createElement, addDisposableGenericMouseDownListener, addDisposableListener, EventType, trackFocus, getActiveElement, $ } from '../../../base/browser/dom.js';
+import { getWindow, createElement, addStandardDisposableListener, EventHelper, addDisposableGenericMouseDownListener, addDisposableListener, trackFocus, getActiveElement, $ } from '../../../base/browser/dom.js';
 import { ActionBar } from '../../../base/browser/ui/actionbar/actionbar.js';
-import { KeyMod as KeyMod$1, KeyCode } from '../../../base/common/keyCodes.js';
+import { disposableTimeout } from '../../../base/common/async.js';
+import { KeyCode, KeyMod as KeyMod$1 } from '../../../base/common/keyCodes.js';
 import { Disposable, MutableDisposable, DisposableStore } from '../../../base/common/lifecycle.js';
 import * as actionWidget from './actionWidget.css';
 import { localize, localize2 } from '../../../nls.js';
@@ -29,10 +30,12 @@ import '../../theme/common/colors/searchColors.js';
 import { IActionWidgetService } from './actionWidget.service.js';
 
 registerCss(actionWidget);
-registerColor("actionBar.toggledBackground", inputActiveOptionBackground, ( localize(1804, "Background color for toggled action items in action bar.")));
+registerColor("actionBar.toggledBackground", inputActiveOptionBackground, ( localize(1825, "Background color for toggled action items in action bar.")));
+const ACTION_WIDGET_CLOSE_START_OPACITY_VARIABLE = "--action-widget-close-start-opacity";
+const ACTION_WIDGET_CLOSE_START_TRANSFORM_VARIABLE = "--action-widget-close-start-transform";
 const ActionWidgetContextKeys = {
-    Visible: ( new RawContextKey("codeActionMenuVisible", false, ( localize(1805, "Whether the action widget list is visible")))),
-    FilterFocused: ( new RawContextKey("codeActionMenuFilterFocused", false, ( localize(1806, "Whether the action widget filter input is focused"))))
+    Visible: ( new RawContextKey("codeActionMenuVisible", false, ( localize(1826, "Whether the action widget list is visible")))),
+    FilterFocused: ( new RawContextKey("codeActionMenuFilterFocused", false, ( localize(1827, "Whether the action widget filter input is focused"))))
 };
 let ActionWidgetService = class ActionWidgetService extends Disposable {
     get isVisible() {
@@ -44,6 +47,7 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
         this._contextKeyService = _contextKeyService;
         this._instantiationService = _instantiationService;
         this._list = this._register(( new MutableDisposable()));
+        this._closeAnimation = this._register(( new MutableDisposable()));
     }
     show(
         user,
@@ -71,7 +75,7 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
             getAnchor: () => anchor,
             render: container => {
                 visibleContext.set(true);
-                return this._renderWidget(container, list, actionBarActions ?? []);
+                return this._renderWidget(container, list, actionBarActions ?? [], listOptions);
             },
             onHide: didCancel => {
                 visibleContext.reset();
@@ -79,7 +83,8 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
             },
             get anchorPosition() {
                 return list.anchorPosition;
-            }
+            },
+            focus: () => list.focus()
         }, container, false);
     }
     acceptSelected(preview) {
@@ -110,16 +115,46 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
         return this._list?.value?.clearFilter() ?? false;
     }
     hide(didCancel) {
-        this._list.value?.hide(didCancel);
-        this._list.clear();
+        const list = this._list.value;
+        const widget = this._widgetElement;
+        if (!list || this._closingList === list) {
+            return;
+        }
+        const closeAnimation = list.closeAnimation;
+        if (!widget || !closeAnimation || closeAnimation.duration <= 0 || !this._hasRequiredAncestorClasses(widget, closeAnimation.requiredAncestorClasses)) {
+            this._closingList = list;
+            list.hide(didCancel);
+            return;
+        }
+        this._closingList = list;
+        const computedStyle = getWindow(widget).getComputedStyle(widget);
+        widget.style.setProperty(ACTION_WIDGET_CLOSE_START_OPACITY_VARIABLE, computedStyle.opacity);
+        widget.style.setProperty(ACTION_WIDGET_CLOSE_START_TRANSFORM_VARIABLE, computedStyle.transform);
+        widget.classList.add(closeAnimation.className);
+        list.hide(didCancel, false);
+        this._closeAnimation.value = disposableTimeout(() => {
+            if (this._list.value === list) {
+                this._contextViewService.hideContextView(didCancel);
+            }
+        }, closeAnimation.duration);
     }
     clear() {
+        this._closeAnimation.clear();
+        this._closingList = undefined;
+        this._widgetElement?.style.removeProperty(ACTION_WIDGET_CLOSE_START_OPACITY_VARIABLE);
+        this._widgetElement?.style.removeProperty(ACTION_WIDGET_CLOSE_START_TRANSFORM_VARIABLE);
+        this._widgetElement = undefined;
         this._list.clear();
     }
-    _renderWidget(element, list, actionBarActions) {
+    _renderWidget(element, list, actionBarActions, listOptions) {
         const widget = createElement("div");
         widget.classList.add("action-widget");
+        const widgetClassNames = list.widgetClassName?.split(/\s+/).filter(Boolean);
+        if (widgetClassNames?.length) {
+            widget.classList.add(...widgetClassNames);
+        }
         element.appendChild(widget);
+        this._widgetElement = widget;
         this._list.value = list;
         if (this._list.value) {
             if (this._list.value.headerContainer) {
@@ -136,6 +171,14 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
             throw ( new Error("List has no value"));
         }
         const renderDisposables = ( new DisposableStore());
+        if (listOptions?.filterAsCombobox) {
+            renderDisposables.add(addStandardDisposableListener(widget, "keydown", e => {
+                if (e.keyCode === KeyCode.Escape && !e.browserEvent.isComposing) {
+                    EventHelper.stop(e, true);
+                    this.hide(true);
+                }
+            }));
+        }
         const headerContainer = this._list.value.headerContainer;
         if (headerContainer) {
             renderDisposables.add(
@@ -146,15 +189,6 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
         const block = element.appendChild(menuBlock);
         block.classList.add("context-view-block");
         renderDisposables.add(addDisposableGenericMouseDownListener(block, e => e.stopPropagation()));
-        const pointerBlockDiv = createElement("div");
-        const pointerBlock = element.appendChild(pointerBlockDiv);
-        pointerBlock.classList.add("context-view-pointerBlock");
-        renderDisposables.add(
-            addDisposableListener(pointerBlock, EventType.POINTER_MOVE, () => pointerBlock.remove())
-        );
-        renderDisposables.add(
-            addDisposableGenericMouseDownListener(pointerBlock, () => pointerBlock.remove())
-        );
         let actionBarWidth = 0;
         if (actionBarActions.length) {
             const actionBar = this._createActionBar(".action-widget-action-bar", actionBarActions);
@@ -166,7 +200,6 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
         }
         const width = this._list.value?.layout(actionBarWidth);
         widget.style.width = `${width}px`;
-        this._list.value?.focus();
         const filterFocusedContext = ActionWidgetContextKeys.FilterFocused.bindTo(this._contextKeyService);
         renderDisposables.add({
             dispose: () => filterFocusedContext.reset()
@@ -202,7 +235,25 @@ let ActionWidgetService = class ActionWidgetService extends Disposable {
         });
         return actionBar;
     }
+    _hasRequiredAncestorClasses(element, classNames) {
+        if (!classNames?.length) {
+            return true;
+        }
+        for (let candidate = element; candidate; candidate = candidate.parentElement) {
+            if (classNames.every(className => candidate.classList.contains(className))) {
+                return true;
+            }
+        }
+        return false;
+    }
     _onWidgetClosed(didCancel) {
+        if (this._closingList === this._list.value) {
+            this.clear();
+            return;
+        }
+        this._closeAnimation.clear();
+        this._closingList = undefined;
+        this._widgetElement = undefined;
         this._list.value?.hide(didCancel);
     }
 };
@@ -212,7 +263,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "hideCodeActionWidget",
-            title: ( localize2(1807, "Hide action widget")),
+            title: ( localize2(1828, "Hide action widget")),
             precondition: ActionWidgetContextKeys.Visible,
             keybinding: {
                 weight,
@@ -229,7 +280,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "clearFilterCodeActionWidget",
-            title: ( localize2(1808, "Clear action widget filter")),
+            title: ( localize2(1829, "Clear action widget filter")),
             precondition: ( ContextKeyExpr.and(ActionWidgetContextKeys.Visible, ActionWidgetContextKeys.FilterFocused)),
             keybinding: {
                 weight: weight + 1,
@@ -250,7 +301,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "selectPrevCodeAction",
-            title: ( localize2(1809, "Select previous action")),
+            title: ( localize2(1830, "Select previous action")),
             precondition: ActionWidgetContextKeys.Visible,
             keybinding: {
                 weight,
@@ -274,7 +325,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "selectNextCodeAction",
-            title: ( localize2(1810, "Select next action")),
+            title: ( localize2(1831, "Select next action")),
             precondition: ActionWidgetContextKeys.Visible,
             keybinding: {
                 weight,
@@ -298,7 +349,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "collapseSectionCodeAction",
-            title: ( localize2(1811, "Collapse section")),
+            title: ( localize2(1832, "Collapse section")),
             precondition: ( ContextKeyExpr.and(ActionWidgetContextKeys.Visible, ( ActionWidgetContextKeys.FilterFocused.negate()))),
             keybinding: {
                 weight,
@@ -317,7 +368,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "expandSectionCodeAction",
-            title: ( localize2(1812, "Expand section")),
+            title: ( localize2(1833, "Expand section")),
             precondition: ( ContextKeyExpr.and(ActionWidgetContextKeys.Visible, ( ActionWidgetContextKeys.FilterFocused.negate()))),
             keybinding: {
                 weight,
@@ -336,7 +387,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: "toggleSectionCodeAction",
-            title: ( localize2(1813, "Toggle section")),
+            title: ( localize2(1834, "Toggle section")),
             precondition: ( ContextKeyExpr.and(ActionWidgetContextKeys.Visible, ( ActionWidgetContextKeys.FilterFocused.negate()))),
             keybinding: {
                 weight,
@@ -357,7 +408,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: acceptSelectedActionCommand,
-            title: ( localize2(1814, "Accept selected action")),
+            title: ( localize2(1835, "Accept selected action")),
             precondition: ActionWidgetContextKeys.Visible,
             keybinding: {
                 weight,
@@ -377,7 +428,7 @@ registerAction2(class extends Action2 {
     constructor() {
         super({
             id: previewSelectedActionCommand,
-            title: ( localize2(1815, "Preview selected action")),
+            title: ( localize2(1836, "Preview selected action")),
             precondition: ActionWidgetContextKeys.Visible,
             keybinding: {
                 weight,

package/vscode/src/vs/platform/actionWidget/browser/actionWidgetDropdown.d.ts

@@ -5,8 +5,12 @@ import { ResolvedKeybinding } from "../../../base/common/keybindings.js";
 import { ThemeIcon } from "../../../base/common/themables.js";
 import { IKeybindingService } from "../../keybinding/common/keybinding.service.js";
 import { ITelemetryService } from "../../telemetry/common/telemetry.service.js";
-import { IActionListItemHover, IActionListItemInlineToggle, IActionListOptions } from "./actionList.js";
+import { IActionListCloseAnimation, IActionListItemHover, IActionListItemInlineToggle, IActionListOptions } from "./actionList.js";
 import { IActionWidgetService } from "./actionWidget.service.js";
+export declare const ACTION_WIDGET_DROPDOWN_MOTION_CLASS = "action-widget-dropdown";
+export declare const ACTION_WIDGET_DROPDOWN_MOTION_CLOSING_CLASS = "action-widget-dropdown-closing";
+export declare const actionWidgetDropdownCloseAnimation: IActionListCloseAnimation;
+export declare function withActionWidgetDropdownMotion(listOptions: IActionListOptions | undefined): IActionListOptions;
 export interface IActionWidgetDropdownAction extends IAction {
     category?: {
         label: string;
@@ -19,6 +23,10 @@ export interface IActionWidgetDropdownAction extends IAction {
      * Optional detail text displayed as a second line below the label.
      */
     detail?: string;
+    /**
+     * Optional description used in the accessible label instead of the visual description.
+     */
+    ariaDescription?: string;
     /**
      * Optional flyout hover configuration shown when focusing/hovering over the action.
      */
@@ -35,6 +43,10 @@ export interface IActionWidgetDropdownAction extends IAction {
      * Optional inline toggle switch rendered on its own row inside the item.
      */
     inlineToggle?: IActionListItemInlineToggle;
+    /**
+     * Optional toggle switch rendered on the same row as the label.
+     */
+    standaloneToggle?: IActionListItemInlineToggle;
     /**
      * Optional keybinding to display next to the action. When provided, this overrides the
      * keybinding that would otherwise be looked up via {@link IKeybindingService.lookupKeybinding}.
@@ -46,6 +58,9 @@ export interface IActionWidgetDropdownAction extends IAction {
 export interface IActionWidgetDropdownActionProvider {
     getActions(): IActionWidgetDropdownAction[];
 }
+export interface IActionWidgetDropdownListOptionsProvider {
+    getListOptions(): IActionListOptions;
+}
 export interface IActionWidgetDropdownOptions extends IBaseDropdownOptions {
     readonly actions?: IActionWidgetDropdownAction[];
     readonly actionProvider?: IActionWidgetDropdownActionProvider;
@@ -67,6 +82,13 @@ export interface IActionWidgetDropdownOptions extends IBaseDropdownOptions {
      * Options for the underlying ActionList (filter, collapsible sections).
      */
     readonly listOptions?: IActionListOptions;
+    /**
+     * Provides the ActionList options each time the dropdown opens. Evaluated fresh on every open
+     * (like {@link actionProvider}); used only when {@link listOptions} is not set.
+     */
+    readonly listOptionsProvider?: IActionWidgetDropdownListOptionsProvider;
+    /** Returns the action id to focus each time the dropdown opens. */
+    readonly getInitialFocusActionId?: () => string | undefined;
 }
 /**
  * Action widget dropdown is a dropdown that uses the action widget under the hood to simulate a native dropdown menu
@@ -80,6 +102,7 @@ export declare class ActionWidgetDropdown extends BaseDropdown {
     private _enabled;
     constructor(container: HTMLElement, _options: IActionWidgetDropdownOptions, actionWidgetService: IActionWidgetService, keybindingService: IKeybindingService, telemetryService: ITelemetryService);
     show(): void;
+    hide(): void;
     setEnabled(enabled: boolean): void;
     private _emitCloseEvent;
 }

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

@@ -1,6 +1,7 @@
 
 import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
 import { getActiveElement, isHTMLElement } from '../../../base/browser/dom.js';
+import { CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES, CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION } from '../../../base/browser/ui/contextview/contextview.js';
 import { BaseDropdown } from '../../../base/browser/ui/dropdown/dropdown.js';
 import { Codicon } from '../../../base/common/codicons.js';
 import { ThemeIcon } from '../../../base/common/themables.js';
@@ -9,6 +10,29 @@ import { ITelemetryService } from '../../telemetry/common/telemetry.service.js';
 import { ActionListItemKind } from './actionList.js';
 import { IActionWidgetService } from './actionWidget.service.js';
 
+const ACTION_WIDGET_DROPDOWN_MOTION_CLASS = "action-widget-dropdown";
+const ACTION_WIDGET_DROPDOWN_MOTION_CLOSING_CLASS = "action-widget-dropdown-closing";
+const actionWidgetDropdownCloseAnimation = {
+    className: ACTION_WIDGET_DROPDOWN_MOTION_CLOSING_CLASS,
+    duration: CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION,
+    requiredAncestorClasses: CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES
+};
+function withActionWidgetDropdownMotion(listOptions) {
+    const classNames = listOptions?.className?.split(/\s+/).filter(Boolean) ?? [];
+    if (!classNames.includes(ACTION_WIDGET_DROPDOWN_MOTION_CLASS)) {
+        classNames.push(ACTION_WIDGET_DROPDOWN_MOTION_CLASS);
+    }
+    const widgetClassNames = listOptions?.widgetClassName?.split(/\s+/).filter(Boolean) ?? [];
+    if (!widgetClassNames.includes(ACTION_WIDGET_DROPDOWN_MOTION_CLASS)) {
+        widgetClassNames.push(ACTION_WIDGET_DROPDOWN_MOTION_CLASS);
+    }
+    return {
+        ...listOptions,
+        className: classNames.join(" "),
+        widgetClassName: widgetClassNames.join(" "),
+        closeAnimation: listOptions?.closeAnimation ?? actionWidgetDropdownCloseAnimation
+    };
+}
 let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
     constructor(
         container,
@@ -65,23 +89,26 @@ let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
                 });
             }
             for (const action of categoryActions) {
+                const isCheckable = action.checked !== undefined;
                 actionWidgetItems.push({
                     item: action,
                     tooltip: action.tooltip,
                     description: action.description,
+                    ariaDescription: action.ariaDescription,
                     detail: action.detail,
                     hover: action.hover,
                     toolbarActions: action.toolbarActions,
                     className: action.className,
                     inlineToggle: action.inlineToggle,
+                    standaloneToggle: action.standaloneToggle,
                     kind: ActionListItemKind.Action,
                     canPreview: false,
                     group: {
                         title: "",
-                        icon: action.icon ?? ThemeIcon.fromId(action.checked ? Codicon.check.id : Codicon.blank.id)
+                        icon: action.icon ?? ThemeIcon.fromId(isCheckable && action.checked ? Codicon.check.id : Codicon.blank.id)
                     },
                     disabled: !action.enabled,
-                    hideIcon: false,
+                    hideIcon: !isCheckable && !action.icon,
                     label: action.label,
                     keybinding: this._options.showItemKeybindings ? (action.keybinding ?? this.keybindingService.lookupKeybinding(action.id)) : undefined
                 });
@@ -143,7 +170,7 @@ let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
         const nonSeparatorItems = actionWidgetItems.filter(i => i.kind === ActionListItemKind.Action);
         const accessibilityProvider = {
             isChecked(element) {
-                return element.kind === ActionListItemKind.Action && !!element?.item?.checked;
+                return element.kind === ActionListItemKind.Action ? element.item?.checked : undefined;
             },
             getSetSize: () => nonSeparatorItems.length,
             getPosInSet: (_element, index) => {
@@ -158,7 +185,7 @@ let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
             getRole: e => {
                 switch (e.kind) {
                 case ActionListItemKind.Action:
-                    return e.item && ( auxiliaryActionIds.has(e.item.id)) ? "menuitem" : "menuitemcheckbox";
+                    return e.item && (( auxiliaryActionIds.has(e.item.id)) || e.item.checked === undefined) ? "menuitem" : "menuitemcheckbox";
                 case ActionListItemKind.Separator:
                     return "separator";
                 default:
@@ -168,6 +195,9 @@ let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
             getWidgetRole: () => "menu"
         };
         super.show();
+        const listOptions = withActionWidgetDropdownMotion(
+            this._options.listOptions ?? this._options.listOptionsProvider?.getListOptions()
+        );
         this.actionWidgetService.show(
             this._options.label ?? "",
             false,
@@ -177,9 +207,19 @@ let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
             undefined,
             [],
             accessibilityProvider,
-            this._options.listOptions
+            {
+                ...listOptions,
+                initialFocusItemId: this._options.getInitialFocusActionId?.() ?? listOptions.initialFocusItemId
+            }
         );
     }
+    hide() {
+        const wasVisible = this.isVisible();
+        super.hide();
+        if (wasVisible) {
+            this.actionWidgetService.hide(true);
+        }
+    }
     setEnabled(enabled) {
         this._enabled = enabled;
     }
@@ -201,4 +241,4 @@ let ActionWidgetDropdown = class ActionWidgetDropdown extends BaseDropdown {
 };
 ActionWidgetDropdown = ( __decorate([( __param(2, IActionWidgetService)), ( __param(3, IKeybindingService)), ( __param(4, ITelemetryService))], ActionWidgetDropdown));
 
-export { ActionWidgetDropdown };
+export { ACTION_WIDGET_DROPDOWN_MOTION_CLASS, ACTION_WIDGET_DROPDOWN_MOTION_CLOSING_CLASS, ActionWidgetDropdown, actionWidgetDropdownCloseAnimation, withActionWidgetDropdownMotion };