@codingame/monaco-vscode-api 36.2.6 → 37.0.0

package/vscode/src/vs/base/browser/ui/contextview/contextview.js

@@ -2,6 +2,7 @@
 import { registerCss } from '../../../../../../../css.js';
 import { BrowserFeatures } from '../../canIUse.js';
 import { isHTMLElement, getDomNodePagePosition, getDomNodeZoomLevel, $, hide, createElement, addStandardDisposableListener, clearNode, show, getWindow, getActiveWindow, getTotalHeight, getTotalWidth, getActiveElement, isAncestor } from '../../dom.js';
+import { createStyleSheet } from '../../domStylesheets.js';
 import { Disposable, toDisposable, DisposableStore } from '../../../common/lifecycle.js';
 import { layout2d, AnchorPosition, AnchorAlignment } from '../../../common/layout.js';
 export { AnchorAxisAlignment } from '../../../common/layout.js';
@@ -19,6 +20,87 @@ function isAnchor(obj) {
     const anchor = obj;
     return !!anchor && typeof anchor.x === "number" && typeof anchor.y === "number";
 }
+const CONTEXT_VIEW_MENU_MOTION_CLASS = "context-view-menu-motion";
+const CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS = "context-view-menu-motion-closing";
+const CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION = 150;
+const CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES = ["modern-ui", "monaco-enable-motion"];
+const CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE = "--vscode-context-view-close-animation-duration";
+const CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE = "--vscode-context-view-menu-motion-shadow";
+const CONTEXT_VIEW_MENU_MOTION_CLOSE_START_OPACITY_VARIABLE = "--vscode-context-view-menu-motion-close-start-opacity";
+const CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE = "--vscode-context-view-menu-motion-close-start-transform";
+const CONTEXT_VIEW_MENU_MOTION_OPEN_DURATION_MS = 250;
+const CONTEXT_VIEW_MENU_MOTION_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+const contextViewMenuCloseAnimation = {
+    className: CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS,
+    duration: CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION,
+    requiredAncestorClasses: CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES
+};
+function getContextViewMenuMotionCss(enabledSelectorPrefix) {
+    return (
+         `
+    ${enabledSelectorPrefix} .context-view.${CONTEXT_VIEW_MENU_MOTION_CLASS} {
+        animation: none;
+        box-shadow: none;
+        overflow: visible;
+    }
+
+    ${enabledSelectorPrefix} .context-view.${CONTEXT_VIEW_MENU_MOTION_CLASS} > .monaco-scrollable-element {
+        animation: context-view-menu-motion-open ${CONTEXT_VIEW_MENU_MOTION_OPEN_DURATION_MS}ms ${CONTEXT_VIEW_MENU_MOTION_EASING} backwards;
+        box-shadow: var(${CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE});
+        transform-origin: top left;
+        will-change: opacity;
+    }
+
+    ${enabledSelectorPrefix} .context-view.${CONTEXT_VIEW_MENU_MOTION_CLASS}.right > .monaco-scrollable-element {
+        transform-origin: top right;
+    }
+
+    ${enabledSelectorPrefix} .context-view.${CONTEXT_VIEW_MENU_MOTION_CLASS}.top > .monaco-scrollable-element {
+        transform-origin: bottom left;
+    }
+
+    ${enabledSelectorPrefix} .context-view.${CONTEXT_VIEW_MENU_MOTION_CLASS}.top.right > .monaco-scrollable-element {
+        transform-origin: bottom right;
+    }
+
+    ${enabledSelectorPrefix} .context-view.${CONTEXT_VIEW_MENU_MOTION_CLASS}.${CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS} > .monaco-scrollable-element {
+        animation: context-view-menu-motion-close var(${CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE}) ${CONTEXT_VIEW_MENU_MOTION_EASING} both;
+        pointer-events: none;
+    }
+
+    @keyframes context-view-menu-motion-open {
+        0% {
+            opacity: 0;
+            transform: scale(0.97);
+        }
+
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    @keyframes context-view-menu-motion-close {
+        0% {
+            opacity: var(${CONTEXT_VIEW_MENU_MOTION_CLOSE_START_OPACITY_VARIABLE}, 1);
+            transform: var(${CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE}, scale(1));
+        }
+
+        100% {
+            opacity: 0;
+            transform: scale(0.99);
+        }
+    }`
+    );
+}
+let contextViewMenuMotionStyleSheet;
+function ensureContextViewMenuMotionStyleSheet() {
+    if (!contextViewMenuMotionStyleSheet) {
+        contextViewMenuMotionStyleSheet = createStyleSheet(undefined, style => {
+            style.textContent = getContextViewMenuMotionCss(".modern-ui.monaco-enable-motion");
+        });
+    }
+}
 function getAnchorRect(anchor) {
     if (isHTMLElement(anchor)) {
         const elementPosition = getDomNodePagePosition(anchor);
@@ -62,6 +144,7 @@ class ContextView extends Disposable {
         this.toDisposeOnSetContainer = Disposable.None;
         this.shadowRoot = null;
         this.shadowRootHostElement = null;
+        ensureContextViewMenuMotionStyleSheet();
         this.view = $(".context-view");
         hide(this.view);
         this.setContainer(container, domPosition);
@@ -90,6 +173,13 @@ class ContextView extends Disposable {
             this.container = container;
             if (this.useShadowDOM) {
                 this.shadowRootHostElement = $(".shadow-root-host");
+                Object.assign(this.shadowRootHostElement.style, {
+                    position: "fixed",
+                    top: "0",
+                    left: "0",
+                    width: "0",
+                    height: "0"
+                });
                 this.container.appendChild(this.shadowRootHostElement);
                 this.shadowRoot = this.shadowRootHostElement.attachShadow({
                     mode: "open"
@@ -117,14 +207,19 @@ class ContextView extends Disposable {
         }
     }
     show(delegate) {
+        this.completeHideAnimation();
         if (this.isVisible()) {
-            this.hide();
+            this.hide(undefined, true);
         }
         clearNode(this.view);
         this.view.className = "context-view monaco-component";
         this.view.style.top = "0px";
         this.view.style.left = "0px";
-        this.view.style.zIndex = `${2575 + (delegate.layer ?? 0)}`;
+        const zIndex = `${2575 + (delegate.layer ?? 0)}`;
+        this.view.style.zIndex = zIndex;
+        if (this.shadowRootHostElement) {
+            this.shadowRootHostElement.style.zIndex = zIndex;
+        }
         this.view.style.position = this.useFixedPosition ? "fixed" : "absolute";
         show(this.view);
         this.toDisposeOnClean = delegate.render(this.view) || Disposable.None;
@@ -157,6 +252,10 @@ class ContextView extends Disposable {
             width: containerWindow.innerWidth,
             height: containerWindow.innerHeight
         };
+        this.view.classList.toggle("fixed", this.useFixedPosition);
+        this.view.style.top = "0px";
+        this.view.style.left = "0px";
+        const positioningOrigin = getDomNodePagePosition(this.view);
         const view = {
             width: getTotalWidth(this.view),
             height: getTotalHeight(this.view)
@@ -164,39 +263,113 @@ class ContextView extends Disposable {
         const anchorPosition = this.delegate.anchorPosition;
         const anchorAlignment = this.delegate.anchorAlignment;
         const anchorAxisAlignment = this.delegate.anchorAxisAlignment;
-        const {
-            top,
-            left
-        } = layout2d(viewport, view, anchor, {
+        const layoutResult = layout2d(viewport, view, anchor, {
             anchorAlignment,
             anchorPosition,
             anchorAxisAlignment
         });
+        const {
+            top,
+            left
+        } = layoutResult;
         this.view.classList.remove("top", "bottom", "left", "right");
-        this.view.classList.add(anchorPosition === AnchorPosition.BELOW ? "bottom" : "top");
-        this.view.classList.add(anchorAlignment === AnchorAlignment.LEFT ? "left" : "right");
-        this.view.classList.toggle("fixed", this.useFixedPosition);
-        const containerPosition = getDomNodePagePosition(this.container);
-        const containerScrollTop = this.container.scrollTop || 0;
-        const containerScrollLeft = this.container.scrollLeft || 0;
-        this.view.style.top = `${top - (this.useFixedPosition ? getDomNodePagePosition(this.view).top : containerPosition.top) + containerScrollTop}px`;
-        this.view.style.left = `${left - (this.useFixedPosition ? getDomNodePagePosition(this.view).left : containerPosition.left) + containerScrollLeft}px`;
+        this.view.classList.add(layoutResult.anchorPosition === AnchorPosition.BELOW ? "bottom" : "top");
+        this.view.classList.add(layoutResult.anchorAlignment === AnchorAlignment.LEFT ? "left" : "right");
+        this.view.style.top = `${top - positioningOrigin.top}px`;
+        this.view.style.left = `${left - positioningOrigin.left}px`;
         this.view.style.width = "initial";
     }
-    hide(data) {
+    hide(data, skipAnimation = false) {
+        if (this.hidingContextView) {
+            if (skipAnimation) {
+                this.completeHideAnimation();
+            }
+            return;
+        }
         const delegate = this.delegate;
         this.delegate = null;
-        if (delegate?.onHide) {
-            delegate.onHide(data);
+        if (!delegate) {
+            return;
         }
         const toDispose = this.toDisposeOnClean;
         this.toDisposeOnClean = Disposable.None;
+        delegate.onHide?.(data);
+        const closeAnimation = delegate.closeAnimation;
+        if (!skipAnimation && closeAnimation && closeAnimation.duration > 0 && this.hasRequiredAncestorClasses(closeAnimation.requiredAncestorClasses)) {
+            this.view.style.setProperty(
+                CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE,
+                `${closeAnimation.duration}ms`
+            );
+            this.prepareMenuCloseAnimation();
+            this.view.inert = true;
+            this.view.classList.add(closeAnimation.className);
+            const timeout = setTimeout(() => this.completeHideAnimation(), closeAnimation.duration);
+            this.hidingContextView = {
+                disposable: toDisposable(() => clearTimeout(timeout)),
+                toDispose,
+                className: closeAnimation.className
+            };
+            return;
+        }
         toDispose.dispose();
         hide(this.view);
     }
     isVisible() {
         return !!this.delegate;
     }
+    completeHideAnimation() {
+        const hidingContextView = this.hidingContextView;
+        if (!hidingContextView) {
+            return;
+        }
+        this.hidingContextView = undefined;
+        hidingContextView.disposable.dispose();
+        this.view.classList.remove(hidingContextView.className);
+        this.view.style.removeProperty(CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE);
+        this.view.style.removeProperty(CONTEXT_VIEW_MENU_MOTION_CLOSE_START_OPACITY_VARIABLE);
+        this.view.style.removeProperty(CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE);
+        hidingContextView.toDispose.dispose();
+        hide(this.view);
+        this.view.inert = false;
+    }
+    prepareMenuCloseAnimation() {
+        if (!this.view.classList.contains(CONTEXT_VIEW_MENU_MOTION_CLASS)) {
+            return;
+        }
+        const surface = Array.from(this.view.children).find(
+            element => isHTMLElement(element) && element.classList.contains("monaco-scrollable-element")
+        );
+        if (!isHTMLElement(surface)) {
+            return;
+        }
+        const computedStyle = getWindow(surface).getComputedStyle(surface);
+        this.view.style.setProperty(
+            CONTEXT_VIEW_MENU_MOTION_CLOSE_START_OPACITY_VARIABLE,
+            computedStyle.opacity
+        );
+        this.view.style.setProperty(
+            CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE,
+            computedStyle.transform
+        );
+    }
+    hasRequiredAncestorClasses(classNames) {
+        if (!classNames?.length) {
+            return true;
+        }
+        for (let candidate = this.view; candidate; ) {
+            const current = candidate;
+            if (classNames.every(className => current.classList.contains(className))) {
+                return true;
+            }
+            if (current.parentElement) {
+                candidate = current.parentElement;
+            } else {
+                const root = current.getRootNode();
+                candidate = root instanceof ShadowRoot && isHTMLElement(root.host) ? root.host : null;
+            }
+        }
+        return false;
+    }
     onDOMEvent(e, onCapture) {
         if (this.delegate) {
             if (this.delegate.onDOMEvent) {
@@ -208,6 +381,7 @@ class ContextView extends Disposable {
     }
     dispose() {
         this.hide();
+        this.completeHideAnimation();
         super.dispose();
     }
 }
@@ -250,6 +424,7 @@ const SHADOW_ROOT_CSS =  `
     :host-context(.linux:lang(zh-Hant)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; }
     :host-context(.linux:lang(ja)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; }
     :host-context(.linux:lang(ko)) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; }
+    ${getContextViewMenuMotionCss(":host-context(.modern-ui.monaco-enable-motion)")}
 `;
 
-export { AnchorAlignment, AnchorPosition, ContextView, ContextViewDOMPosition, getAnchorRect, isAnchor };
+export { AnchorAlignment, AnchorPosition, CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE, CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES, CONTEXT_VIEW_MENU_MOTION_CLASS, CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION, CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS, CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE, ContextView, ContextViewDOMPosition, contextViewMenuCloseAnimation, getAnchorRect, isAnchor };

package/vscode/src/vs/base/browser/ui/dialog/dialog.css

@@ -126,7 +126,7 @@
 .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message {
 	font-size: 14px;
 	font-weight: 600;
-	flex: 1; /* let the message always grow */
+	flex-grow: 1; /* let the message always grow */
 	white-space: normal;
 	word-wrap: break-word; /* never overflow long words, but break to next line */
 	min-height: 22px;
@@ -139,9 +139,11 @@
 .monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-detail {
 	line-height: 20px;
 	flex: 1; /* let the message always grow */
+	white-space: pre-wrap;
 }
 
-.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message a:focus {
+.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message a:focus,
+.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-detail a:focus {
 	outline-width: 1px;
 	outline-style: solid;
 }

package/vscode/src/vs/base/browser/ui/dialog/dialog.d.ts

@@ -24,11 +24,22 @@ export declare enum DialogContentsAlignment {
 export interface IDialogOptions {
     readonly cancelId?: number;
     readonly detail?: string;
+    /**
+     * A pre-rendered element to show in place of the plain-text {@link detail}.
+     * Used to present rich detail content (e.g. rendered Markdown) since this
+     * base widget has no Markdown rendering capability of its own. Takes
+     * precedence over {@link detail} when both are provided. Any `<a>` element
+     * within is made keyboard-focusable and participates in tab order like
+     * links rendered via {@link renderBody}.
+     */
+    readonly detailElement?: HTMLElement;
     readonly alignment?: DialogContentsAlignment;
     readonly checkboxLabel?: string;
     readonly checkboxChecked?: boolean;
     readonly type?: "none" | "info" | "error" | "question" | "warning" | "pending";
     readonly extraClasses?: string[];
+    /** Classes to add to the full-window modal blocker. */
+    readonly modalBlockExtraClasses?: string[];
     readonly inputs?: IDialogInputOptions[];
     readonly keyEventProcessor?: (event: StandardKeyboardEvent) => void;
     readonly renderBody?: (container: HTMLElement) => void;
@@ -81,6 +92,7 @@ export declare class Dialog extends Disposable {
     private readonly messageDetailElement;
     private readonly messageContainer;
     private readonly footerContainer;
+    private footerActionToFocus;
     private readonly iconElement;
     private readonly checkbox;
     private readonly toolbarContainer;

package/vscode/src/vs/base/browser/ui/dialog/dialog.js

@@ -2,7 +2,7 @@
 import { registerCss } from '../../../../../../../css.js';
 import * as dialog from './dialog.css';
 import { localize } from '../../../../nls.js';
-import { $, addStandardDisposableListener, EventType, hide, addDisposableListener, getActiveElement, clearNode, EventHelper, getWindow, isActiveElement, isAncestor, show } from '../../dom.js';
+import { $, addStandardDisposableListener, EventType, hide, addDisposableListener, getActiveElement, clearNode, EventHelper, getWindow, isHTMLElement, isEditableElement, isActiveElement, isAncestor, show } from '../../dom.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { ActionBar } from '../actionbar/actionbar.js';
 import { ButtonBar, ButtonBarAlignment, ButtonWithDescription, ButtonWithDropdown } from '../button/button.js';
@@ -30,6 +30,9 @@ class Dialog extends Disposable {
         this.message = message;
         this.options = options;
         this.modalElement = this.container.appendChild($(`.monaco-dialog-modal-block.dimmed`));
+        if (options.modalBlockExtraClasses) {
+            this.modalElement.classList.add(...options.modalBlockExtraClasses);
+        }
         this._register(addStandardDisposableListener(this.modalElement, EventType.CLICK, e => {
             if (e.target === this.modalElement) {
                 this.element.focus();
@@ -52,6 +55,7 @@ class Dialog extends Disposable {
             this.options.renderFooter(customFooter);
             for (const el of this.footerContainer.querySelectorAll("a")) {
                 el.tabIndex = 0;
+                this.footerActionToFocus ??= el;
             }
         }
         this.buttonStyles = options.buttonStyles;
@@ -68,13 +72,16 @@ class Dialog extends Disposable {
         this.iconElement = messageRowElement.appendChild($("#monaco-dialog-icon.dialog-icon"));
         this.iconElement.setAttribute("aria-label", this.getIconAriaLabel());
         this.messageContainer = messageRowElement.appendChild($(".dialog-message-container"));
-        if (this.options.detail || this.options.renderBody) {
+        const hasDetail = !!this.options.detail || !!this.options.detailElement;
+        if (hasDetail || this.options.renderBody) {
             const messageElement = this.messageContainer.appendChild($(".dialog-message"));
             const messageTextElement = messageElement.appendChild($("#monaco-dialog-message-text.dialog-message-text"));
             messageTextElement.innerText = this.message;
         }
         this.messageDetailElement = this.messageContainer.appendChild($("#monaco-dialog-message-detail.dialog-message-detail"));
-        if (this.options.detail || !this.options.renderBody) {
+        if (this.options.detailElement) {
+            this.messageDetailElement.appendChild(this.options.detailElement);
+        } else if (hasDetail || !this.options.renderBody) {
             this.messageDetailElement.innerText = this.options.detail ? this.options.detail : message;
         } else {
             this.messageDetailElement.style.display = "none";
@@ -82,6 +89,8 @@ class Dialog extends Disposable {
         if (this.options.renderBody) {
             const customBody = this.messageContainer.appendChild($("#monaco-dialog-message-body.dialog-message-body"));
             this.options.renderBody(customBody);
+        }
+        if (this.options.renderBody || this.options.detailElement) {
             for (const el of this.messageContainer.querySelectorAll("a")) {
                 el.tabIndex = 0;
             }
@@ -245,7 +254,9 @@ class Dialog extends Disposable {
                     return;
                 }
                 let eventHandled = false;
-                if (evt.equals(KeyCode.Tab) || evt.equals(KeyCode.RightArrow) || evt.equals(KeyMod$1.Shift | KeyCode.Tab) || evt.equals(KeyCode.LeftArrow)) {
+                const isArrowNavigation = evt.equals(KeyCode.RightArrow) || evt.equals(KeyCode.LeftArrow);
+                const isEditableTarget = isHTMLElement(e.target) && (isEditableElement(e.target) || e.target.isContentEditable);
+                if (evt.equals(KeyCode.Tab) || evt.equals(KeyMod$1.Shift | KeyCode.Tab) || isArrowNavigation && !isEditableTarget) {
                     const focusableElements = [];
                     let focusedIndex = -1;
                     if (this.messageContainer) {
@@ -398,11 +409,16 @@ class Dialog extends Disposable {
                 this.inputs[0].focus();
                 this.inputs[0].select();
             } else {
+                let focusedButton = false;
                 buttonMap.forEach((value, index) => {
                     if (value.index === 0) {
                         buttonBar.buttons[index].focus();
+                        focusedButton = true;
                     }
                 });
+                if (!focusedButton) {
+                    (this.footerActionToFocus ?? this.element).focus();
+                }
             }
         }));
     }
@@ -422,6 +438,9 @@ class Dialog extends Disposable {
                 ...this.messageContainer.getElementsByTagName("a"),
                 ...(this.footerContainer?.getElementsByTagName("a") ?? [])
             ]) {
+                if (el.classList.contains("monaco-button")) {
+                    continue;
+                }
                 el.style.color = linkFgColor;
                 el.style.textDecoration = "underline";
             }

package/vscode/src/vs/base/browser/ui/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import { IContextMenuProvider } from "../../contextmenu.js";
+import { IContextViewCloseAnimation } from "../contextview/contextview.js";
 import { IMenuOptions } from "../menu/menu.js";
 import { ActionRunner, IAction } from "../../../common/actions.js";
 import { IDisposable } from "../../../common/lifecycle.js";
@@ -8,8 +9,10 @@ export interface ILabelRenderer {
 export interface IBaseDropdownOptions {
     label?: string;
     labelRenderer?: ILabelRenderer;
+    isEnabled?: () => boolean;
 }
 export declare class BaseDropdown extends ActionRunner {
+    private readonly baseOptions;
     private _element;
     private boxContainer?;
     private _label?;
@@ -18,7 +21,7 @@ export declare class BaseDropdown extends ActionRunner {
     private _onDidChangeVisibility;
     readonly onDidChangeVisibility: import("../../../common/event.js").Event<boolean>;
     private hover;
-    constructor(container: HTMLElement, options: IBaseDropdownOptions);
+    constructor(container: HTMLElement, baseOptions: IBaseDropdownOptions);
     get element(): HTMLElement;
     get label(): HTMLElement | undefined;
     set tooltip(tooltip: string);
@@ -37,6 +40,8 @@ export interface IDropdownMenuOptions extends IBaseDropdownOptions {
     readonly actions?: IAction[];
     readonly actionProvider?: IActionProvider;
     menuClassName?: string;
+    closeAnimation?: IContextViewCloseAnimation;
+    getAnchor?: () => HTMLElement;
     menuAsChild?: boolean;
     readonly skipTelemetry?: boolean;
 }
@@ -50,6 +55,7 @@ export declare class DropdownMenu extends BaseDropdown {
     private get actions();
     private set actions(value);
     show(): void;
+    private getMenuClassName;
     hide(): void;
     private onHide;
 }

package/vscode/src/vs/base/browser/ui/dropdown/dropdown.js

@@ -3,7 +3,7 @@ import { registerCss } from '../../../../../../../css.js';
 import { append, $, EventType, addDisposableListener, EventHelper, isMouseEvent } from '../../dom.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { EventType as EventType$1, Gesture } from '../../touch.js';
-import '../contextview/contextview.js';
+import { contextViewMenuCloseAnimation, CONTEXT_VIEW_MENU_MOTION_CLASS } from '../contextview/contextview.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { ActionRunner } from '../../../common/actions.js';
@@ -14,16 +14,17 @@ import { AnchorAlignment } from '../../../common/layout.js';
 
 registerCss(dropdown);
 class BaseDropdown extends ActionRunner {
-    constructor(container, options) {
+    constructor(container, baseOptions) {
         super();
+        this.baseOptions = baseOptions;
         this._onDidChangeVisibility = this._register(( new Emitter()));
         this.onDidChangeVisibility = this._onDidChangeVisibility.event;
         this._element = append(container, $(".monaco-dropdown"));
         this._label = append(this._element, $(".dropdown-label"));
-        let labelRenderer = options.labelRenderer;
+        let labelRenderer = baseOptions.labelRenderer;
         if (!labelRenderer) {
             labelRenderer = container => {
-                container.textContent = options.label || "";
+                container.textContent = baseOptions.label || "";
                 return null;
             };
         }
@@ -32,6 +33,9 @@ class BaseDropdown extends ActionRunner {
         }
         for (const event of [EventType.MOUSE_DOWN, EventType$1.Tap]) {
             this._register(addDisposableListener(this._label, event, e => {
+                if (baseOptions.isEnabled?.() === false) {
+                    return;
+                }
                 if (isMouseEvent(e) && e.button !== 0) {
                     return;
                 }
@@ -46,6 +50,9 @@ class BaseDropdown extends ActionRunner {
             const event = ( new StandardKeyboardEvent(e));
             if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
                 EventHelper.stop(e, true);
+                if (baseOptions.isEnabled?.() === false) {
+                    return;
+                }
                 if (this.visible) {
                     this.hide();
                 } else {
@@ -77,7 +84,7 @@ class BaseDropdown extends ActionRunner {
         }
     }
     show() {
-        if (!this.visible) {
+        if (!this.visible && this.baseOptions.isEnabled?.() !== false) {
             this.visible = true;
             this._onDidChangeVisibility.fire(true);
         }
@@ -138,15 +145,19 @@ class DropdownMenu extends BaseDropdown {
         this._actions = actions;
     }
     show() {
+        if (this._options.isEnabled?.() === false) {
+            return;
+        }
         super.show();
         this.element.classList.add("active");
         this._options.contextMenuProvider.showContextMenu({
-            getAnchor: () => this.element,
+            getAnchor: () => this._options.getAnchor?.() ?? this.element,
             getActions: () => this.actions,
             getActionsContext: () => this.menuOptions ? this.menuOptions.context : null,
             getActionViewItem: (action, options) => this.menuOptions && this.menuOptions.actionViewItemProvider ? this.menuOptions.actionViewItemProvider(action, options) : undefined,
             getKeyBinding: action => this.menuOptions && this.menuOptions.getKeyBinding ? this.menuOptions.getKeyBinding(action) : undefined,
-            getMenuClassName: () => this._options.menuClassName || "",
+            getMenuClassName: () => this.getMenuClassName(),
+            closeAnimation: this._options.closeAnimation ?? contextViewMenuCloseAnimation,
             onHide: () => this.onHide(),
             actionRunner: this.menuOptions ? this.menuOptions.actionRunner : undefined,
             anchorAlignment: this.menuOptions ? this.menuOptions.anchorAlignment : AnchorAlignment.LEFT,
@@ -154,6 +165,13 @@ class DropdownMenu extends BaseDropdown {
             skipTelemetry: this._options.skipTelemetry
         });
     }
+    getMenuClassName() {
+        const classNames = this._options.menuClassName?.split(/\s+/).filter(Boolean) ?? [];
+        if (!classNames.includes(CONTEXT_VIEW_MENU_MOTION_CLASS)) {
+            classNames.push(CONTEXT_VIEW_MENU_MOTION_CLASS);
+        }
+        return classNames.join(" ");
+    }
     hide() {
         super.hide();
     }

package/vscode/src/vs/base/browser/ui/dropdown/dropdownActionViewItem.d.ts

@@ -4,7 +4,7 @@ import { IDisposable } from "../../../common/lifecycle.js";
 import { IContextMenuProvider } from "../../contextmenu.js";
 import { IActionViewItemProvider } from "../actionbar/actionbar.js";
 import { ActionViewItem, BaseActionViewItem, IActionViewItemOptions, IBaseActionViewItemOptions } from "../actionbar/actionViewItems.js";
-import { AnchorAlignment } from "../contextview/contextview.js";
+import { AnchorAlignment, IContextViewCloseAnimation } from "../contextview/contextview.js";
 import { IActionProvider } from "./dropdown.js";
 export interface IKeybindingProvider {
     (action: IAction): ResolvedKeybinding | undefined;
@@ -17,6 +17,9 @@ export interface IDropdownMenuActionViewItemOptions extends IBaseActionViewItemO
     readonly keybindingProvider?: IKeybindingProvider;
     readonly actionRunner?: IActionRunner;
     readonly classNames?: string[] | string;
+    readonly menuClassName?: string;
+    readonly closeAnimation?: IContextViewCloseAnimation;
+    readonly getAnchor?: () => HTMLElement;
     readonly anchorAlignmentProvider?: IAnchorAlignmentProvider;
     readonly menuAsChild?: boolean;
     readonly skipTelemetry?: boolean;
@@ -41,6 +44,7 @@ export declare class DropdownMenuActionViewItem extends BaseActionViewItem {
 export interface IActionWithDropdownActionViewItemOptions extends IActionViewItemOptions {
     readonly menuActionsOrProvider: readonly IAction[] | IActionProvider;
     readonly menuActionClassNames?: string[];
+    readonly keybindingProvider?: IKeybindingProvider;
 }
 export declare class ActionWithDropdownActionViewItem extends ActionViewItem {
     private readonly contextMenuProvider;
@@ -49,4 +53,5 @@ export declare class ActionWithDropdownActionViewItem extends ActionViewItem {
     render(container: HTMLElement): void;
     blur(): void;
     setFocusable(focusable: boolean): void;
+    protected updateEnabled(): void;
 }

package/vscode/src/vs/base/browser/ui/dropdown/dropdownActionViewItem.js

@@ -46,9 +46,13 @@ class DropdownMenuActionViewItem extends BaseActionViewItem {
         const options = {
             contextMenuProvider: this.contextMenuProvider,
             labelRenderer: labelRenderer,
+            isEnabled: () => this.action.enabled,
             menuAsChild: this.options.menuAsChild,
             actions: isActionsArray ? this.menuActionsOrProvider : undefined,
             actionProvider: isActionsArray ? undefined : this.menuActionsOrProvider,
+            menuClassName: this.options.menuClassName,
+            closeAnimation: this.options.closeAnimation,
+            getAnchor: this.options.getAnchor,
             skipTelemetry: this.options.skipTelemetry
         };
         this.dropdownMenu = this._register(( new DropdownMenu(container, options)));
@@ -128,6 +132,7 @@ class DropdownMenuActionViewItem extends BaseActionViewItem {
         const disabled = !this.action.enabled;
         this.actionItem?.classList.toggle("disabled", disabled);
         this.element?.classList.toggle("disabled", disabled);
+        this.element?.setAttribute("aria-disabled", String(disabled));
     }
 }
 class ActionWithDropdownActionViewItem extends ActionViewItem {
@@ -149,13 +154,14 @@ class ActionWithDropdownActionViewItem extends ActionViewItem {
             const separator = h("div.action-dropdown-item-separator", [h("div", {})]).root;
             separator.classList.toggle("prominent", menuActionClassNames.includes("prominent"));
             append(this.element, separator);
-            this.dropdownMenuActionViewItem = this._register(( new DropdownMenuActionViewItem(this._register(( new Action("dropdownAction", ( localize(9, "More Actions..."))))), menuActionsProvider, this.contextMenuProvider, {
+            this.dropdownMenuActionViewItem = this._register(( new DropdownMenuActionViewItem(this._register(( new Action("dropdownAction", ( localize(9, "More Actions...")), undefined, this.action.enabled))), menuActionsProvider, this.contextMenuProvider, {
                 classNames: [
                     "dropdown",
                     ...ThemeIcon.asClassNameArray(Codicon.dropDownButton),
                     ...menuActionClassNames
                 ],
-                hoverDelegate: this.options.hoverDelegate
+                hoverDelegate: this.options.hoverDelegate,
+                keybindingProvider: this.options.keybindingProvider
             })));
             this.dropdownMenuActionViewItem.render(this.element);
             this._register(addDisposableListener(this.element, EventType.KEY_DOWN, e => {
@@ -188,6 +194,12 @@ class ActionWithDropdownActionViewItem extends ActionViewItem {
         super.setFocusable(focusable);
         this.dropdownMenuActionViewItem?.setFocusable(focusable);
     }
+    updateEnabled() {
+        super.updateEnabled();
+        if (this.dropdownMenuActionViewItem) {
+            this.dropdownMenuActionViewItem.action.enabled = this.action.enabled;
+        }
+    }
 }
 
 export { ActionWithDropdownActionViewItem, DropdownMenuActionViewItem };