@codingame/monaco-vscode-api 4.5.1 → 5.0.0

package/vscode/src/vs/base/browser/ui/findinput/replaceInput.js

@@ -7,12 +7,9 @@ import { Emitter } from '../../../common/event.js';
 import './findInput.css.js';
 import { localizeWithPath } from '../../../../nls.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
-const NLS_DEFAULT_LABEL = ( localizeWithPath('vs/base/browser/ui/findinput/replaceInput', 'defaultLabel', "input"));
-const NLS_PRESERVE_CASE_LABEL = ( localizeWithPath(
-    'vs/base/browser/ui/findinput/replaceInput',
-    'label.preserveCaseToggle',
-    "Preserve Case"
-));
+const _moduleId = "vs/base/browser/ui/findinput/replaceInput";
+const NLS_DEFAULT_LABEL = ( localizeWithPath(_moduleId, 0, "input"));
+const NLS_PRESERVE_CASE_LABEL = ( localizeWithPath(_moduleId, 1, "Preserve Case"));
 class PreserveCaseToggle extends Toggle {
     constructor(opts) {
         super({
@@ -33,17 +30,17 @@ class ReplaceInput extends Widget {
         this._showOptionButtons = _showOptionButtons;
         this.fixFocusOnOptionClickEnabled = true;
         this.cachedOptionsWidth = 0;
-        this._onDidOptionChange = this._register(( new Emitter()));
+        this._onDidOptionChange = this._register(( (new Emitter())));
         this.onDidOptionChange = this._onDidOptionChange.event;
-        this._onKeyDown = this._register(( new Emitter()));
+        this._onKeyDown = this._register(( (new Emitter())));
         this.onKeyDown = this._onKeyDown.event;
-        this._onMouseDown = this._register(( new Emitter()));
+        this._onMouseDown = this._register(( (new Emitter())));
         this.onMouseDown = this._onMouseDown.event;
-        this._onInput = this._register(( new Emitter()));
+        this._onInput = this._register(( (new Emitter())));
         this.onInput = this._onInput.event;
-        this._onKeyUp = this._register(( new Emitter()));
+        this._onKeyUp = this._register(( (new Emitter())));
         this.onKeyUp = this._onKeyUp.event;
-        this._onPreserveCaseKeyDown = this._register(( new Emitter()));
+        this._onPreserveCaseKeyDown = this._register(( (new Emitter())));
         this.onPreserveCaseKeyDown = this._onPreserveCaseKeyDown.event;
         this._lastHighlightFindOptions = 0;
         this.contextViewProvider = contextViewProvider;
@@ -57,7 +54,7 @@ class ReplaceInput extends Widget {
         const flexibleMaxHeight = options.flexibleMaxHeight;
         this.domNode = document.createElement('div');
         this.domNode.classList.add('monaco-findInput');
-        this.inputBox = this._register(( new HistoryInputBox(this.domNode, this.contextViewProvider, {
+        this.inputBox = this._register(( (new HistoryInputBox(this.domNode, this.contextViewProvider, {
             ariaLabel: this.label || '',
             placeholder: this.placeholder || '',
             validationOptions: {
@@ -69,12 +66,12 @@ class ReplaceInput extends Widget {
             flexibleWidth,
             flexibleMaxHeight,
             inputBoxStyles: options.inputBoxStyles
-        })));
-        this.preserveCase = this._register(( new PreserveCaseToggle({
+        }))));
+        this.preserveCase = this._register(( (new PreserveCaseToggle({
             appendTitle: appendPreserveCaseLabel,
             isChecked: false,
             ...options.toggleStyles
-        })));
+        }))));
         this._register(this.preserveCase.onChange(viaKeyboard => {
             this._onDidOptionChange.fire(viaKeyboard);
             if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {

package/vscode/src/vs/base/browser/ui/highlightedlabel/highlightedLabel.js

@@ -1,6 +1,6 @@
 import { append, $, reset } from '../../dom.js';
+import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
-import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { renderLabelWithIcons } from '../iconLabel/iconLabels.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
@@ -74,7 +74,7 @@ class HighlightedLabel extends Disposable {
         else {
             if (!this.customHover && this.title !== '') {
                 const hoverDelegate = this.options?.hoverDelegate ?? getDefaultHoverDelegate('mouse');
-                this.customHover = this._register(setupCustomHover(hoverDelegate, this.domNode, this.title));
+                this.customHover = this._register(getBaseLayerHoverDelegate().setupUpdatableHover(hoverDelegate, this.domNode, this.title));
             }
             else if (this.customHover) {
                 this.customHover.update(this.title);

package/vscode/src/vs/{platform/hover/browser → base/browser/ui/hover}/hover.d.ts

@@ -1,7 +1,43 @@
-import { IDisposable } from '../../../base/common/lifecycle.js';
-import { IMarkdownString } from '../../../base/common/htmlContent.js';
-import { HoverPosition } from '../../../base/browser/ui/hover/hoverWidget.js';
+import { IHoverDelegate } from './hoverDelegate.js';
+import { HoverPosition } from './hoverWidget.js';
+import { CancellationToken } from '../../../common/cancellation.js';
+import { IMarkdownString } from '../../../common/htmlContent.js';
+import { IDisposable } from '../../../common/lifecycle.js';
 
+/**
+ * Enables the convenient display of rich markdown-based hovers in the workbench.
+ */
+interface IHoverDelegate2 {
+    /**
+     * Shows a hover, provided a hover with the same options object is not already visible.
+     * @param options A set of options defining the characteristics of the hover.
+     * @param focus Whether to focus the hover (useful for keyboard accessibility).
+     *
+     * **Example:** A simple usage with a single element target.
+     *
+     * ```typescript
+     * showHover({
+     *   text: new MarkdownString('Hello world'),
+     *   target: someElement
+     * });
+     * ```
+     */
+    showHover(options: IHoverOptions, focus?: boolean): IHoverWidget | undefined;
+    /**
+     * Hides the hover if it was visible. This call will be ignored if the the hover is currently
+     * "locked" via the alt/option key.
+     */
+    hideHover(): void;
+    /**
+     * This should only be used until we have the ability to show multiple context views
+     * simultaneously. #188822
+     */
+    showAndFocusLastHover(): void;
+    setupUpdatableHover(hoverDelegate: IHoverDelegate, htmlElement: HTMLElement, content: IUpdatableHoverContentOrFactory, options?: IUpdatableHoverOptions): IUpdatableHover;
+}
+interface IHoverWidget extends IDisposable {
+    readonly isDisposed: boolean;
+}
 interface IHoverOptions {
     /**
      * The content to display in the primary section of the hover. The type of text determines the
@@ -153,5 +189,29 @@ interface IHoverTarget extends IDisposable {
      */
     y?: number;
 }
+interface IUpdatableHoverTooltipMarkdownString {
+    markdown: IMarkdownString | string | undefined | ((token: CancellationToken) => Promise<IMarkdownString | string | undefined>);
+    markdownNotSupportedFallback: string | undefined;
+}
+type IUpdatableHoverContent = string | IUpdatableHoverTooltipMarkdownString | HTMLElement | undefined;
+type IUpdatableHoverContentOrFactory = IUpdatableHoverContent | (() => IUpdatableHoverContent);
+interface IUpdatableHoverOptions {
+    actions?: IHoverAction[];
+    linkHandler?(url: string): void;
+}
+interface IUpdatableHover extends IDisposable {
+    /**
+     * Allows to programmatically open the hover.
+     */
+    show(focus?: boolean): void;
+    /**
+     * Allows to programmatically hide the hover.
+     */
+    hide(): void;
+    /**
+     * Updates the contents of the hover.
+     */
+    update(tooltip: IUpdatableHoverContent, options?: IUpdatableHoverOptions): void;
+}
 
-export type { IHoverAction, IHoverAppearanceOptions, IHoverOptions, IHoverPersistenceOptions, IHoverPositionOptions, IHoverTarget };
+export type { IHoverAction, IHoverAppearanceOptions, IHoverDelegate2, IHoverOptions, IHoverPersistenceOptions, IHoverPositionOptions, IHoverTarget, IHoverWidget, IUpdatableHover, IUpdatableHoverContent, IUpdatableHoverContentOrFactory, IUpdatableHoverOptions, IUpdatableHoverTooltipMarkdownString };

package/vscode/src/vs/base/browser/ui/hover/hoverDelegate.d.ts

@@ -1,5 +1,5 @@
+import { IHoverWidget, IUpdatableHoverOptions } from './hover.js';
 import { HoverPosition } from './hoverWidget.js';
-import { IHoverWidget, IUpdatableHoverOptions } from './updatableHoverWidget.js';
 import { IMarkdownString } from '../../../common/htmlContent.js';
 import { IDisposable } from '../../../common/lifecycle.js';
 

package/vscode/src/vs/base/browser/ui/hover/hoverDelegate2.js

@@ -0,0 +1,13 @@
+let baseHoverDelegate = {
+    showHover: () => undefined,
+    hideHover: () => undefined,
+    showAndFocusLastHover: () => undefined,
+    setupUpdatableHover: () => null,
+};
+function setBaseLayerHoverDelegate(hoverDelegate) {
+    baseHoverDelegate = hoverDelegate;
+}
+function getBaseLayerHoverDelegate() {
+    return baseHoverDelegate;
+}
+export { getBaseLayerHoverDelegate, setBaseLayerHoverDelegate };

package/vscode/src/vs/base/browser/ui/hover/hoverWidget.css.js

@@ -1,4 +1,4 @@
 import n from '../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
-var css = ".monaco-hover{animation:fadein .1s linear;box-sizing:border-box;cursor:default;line-height:1.5em;overflow:hidden;position:absolute;user-select:text;-webkit-user-select:text;white-space:var(--vscode-hover-whiteSpace,normal)}.monaco-hover.hidden{display:none}.monaco-hover a:hover:not(.disabled){cursor:pointer}.monaco-hover .hover-contents:not(.html-hover-contents){padding:4px 8px}.monaco-hover .markdown-hover>.hover-contents:not(.code-hover-contents){word-wrap:break-word;max-width:var(--vscode-hover-maxWidth,500px)}.monaco-hover .markdown-hover>.hover-contents:not(.code-hover-contents) hr{min-width:100%}.monaco-hover .code,.monaco-hover h1,.monaco-hover h2,.monaco-hover h3,.monaco-hover h4,.monaco-hover h5,.monaco-hover h6,.monaco-hover p,.monaco-hover ul{margin:8px 0}.monaco-hover h1,.monaco-hover h2,.monaco-hover h3,.monaco-hover h4,.monaco-hover h5,.monaco-hover h6{line-height:1.1}.monaco-hover code{font-family:var(--monaco-monospace-font)}.monaco-hover hr{border-left:0;border-right:0;box-sizing:border-box;height:1px;margin:4px -8px -4px}.monaco-hover .code:first-child,.monaco-hover p:first-child,.monaco-hover ul:first-child{margin-top:0}.monaco-hover .code:last-child,.monaco-hover p:last-child,.monaco-hover ul:last-child{margin-bottom:0}.monaco-hover ol,.monaco-hover ul{padding-left:20px}.monaco-hover li>p{margin-bottom:0}.monaco-hover li>ul{margin-top:0}.monaco-hover code{border-radius:3px;padding:0 .4em}.monaco-hover .monaco-tokenized-source{white-space:var(--vscode-hover-sourceWhiteSpace,pre-wrap)}.monaco-hover .hover-row.status-bar{font-size:12px;line-height:22px}.monaco-hover .hover-row.status-bar .info{font-style:italic;padding:0 8px}.monaco-hover .hover-row.status-bar .actions{display:flex;padding:0 8px}.monaco-hover .hover-row.status-bar .actions .action-container{cursor:pointer;margin-right:16px}.monaco-hover .hover-row.status-bar .actions .action-container .action .icon{padding-right:4px}.monaco-hover .markdown-hover .hover-contents .codicon{color:inherit;font-size:inherit;vertical-align:middle}.monaco-hover .hover-contents a.code-link,.monaco-hover .hover-contents a.code-link:hover{color:inherit}.monaco-hover .hover-contents a.code-link:before{content:\"(\"}.monaco-hover .hover-contents a.code-link:after{content:\")\"}.monaco-hover .hover-contents a.code-link>span{border-bottom:1px solid transparent;color:var(--vscode-textLink-foreground);text-decoration:underline;text-underline-position:under}.monaco-hover .hover-contents a.code-link>span:hover{color:var(--vscode-textLink-activeForeground)}.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span{display:inline-block;margin-bottom:4px}.monaco-hover-content .action-container a{-webkit-user-select:none;user-select:none}.monaco-hover-content .action-container.disabled{cursor:default;opacity:.4;pointer-events:none}";
+var css = ".monaco-hover{animation:fadein .1s linear;box-sizing:border-box;cursor:default;line-height:1.5em;overflow:hidden;position:absolute;user-select:text;-webkit-user-select:text;white-space:var(--vscode-hover-whiteSpace,normal)}.monaco-hover.hidden{display:none}.monaco-hover a:hover:not(.disabled){cursor:pointer}.monaco-hover .hover-contents:not(.html-hover-contents){padding:4px 8px}.monaco-hover .markdown-hover>.hover-contents:not(.code-hover-contents){word-wrap:break-word;max-width:var(--vscode-hover-maxWidth,500px)}.monaco-hover .markdown-hover>.hover-contents:not(.code-hover-contents) hr{min-width:100%}.monaco-hover .code,.monaco-hover h1,.monaco-hover h2,.monaco-hover h3,.monaco-hover h4,.monaco-hover h5,.monaco-hover h6,.monaco-hover p,.monaco-hover ul{margin:8px 0}.monaco-hover h1,.monaco-hover h2,.monaco-hover h3,.monaco-hover h4,.monaco-hover h5,.monaco-hover h6{line-height:1.1}.monaco-hover code{font-family:var(--monaco-monospace-font)}.monaco-hover hr{border-left:0;border-right:0;box-sizing:border-box;height:1px;margin:4px -8px -4px}.monaco-hover .code:first-child,.monaco-hover p:first-child,.monaco-hover ul:first-child{margin-top:0}.monaco-hover .code:last-child,.monaco-hover p:last-child,.monaco-hover ul:last-child{margin-bottom:0}.monaco-hover ol,.monaco-hover ul{padding-left:20px}.monaco-hover li>p{margin-bottom:0}.monaco-hover li>ul{margin-top:0}.monaco-hover code{border-radius:3px;padding:0 .4em}.monaco-hover .monaco-tokenized-source{white-space:var(--vscode-hover-sourceWhiteSpace,pre-wrap)}.monaco-hover .hover-row.status-bar{font-size:12px;line-height:22px}.monaco-hover .hover-row.status-bar .info{font-style:italic;padding:0 8px}.monaco-hover .hover-row.status-bar .actions{display:flex;padding:0 8px;width:100%}.monaco-hover .hover-row.status-bar .actions .action-container{cursor:pointer;margin-right:16px}.monaco-hover .hover-row.status-bar .actions .action-container .action .icon{padding-right:4px}.monaco-hover .markdown-hover .hover-contents .codicon{color:inherit;font-size:inherit;vertical-align:middle}.monaco-hover .hover-contents a.code-link,.monaco-hover .hover-contents a.code-link:hover{color:inherit}.monaco-hover .hover-contents a.code-link:before{content:\"(\"}.monaco-hover .hover-contents a.code-link:after{content:\")\"}.monaco-hover .hover-contents a.code-link>span{border-bottom:1px solid transparent;color:var(--vscode-textLink-foreground);text-decoration:underline;text-underline-position:under}.monaco-hover .hover-contents a.code-link>span:hover{color:var(--vscode-textLink-activeForeground)}.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span{display:inline-block;margin-bottom:4px}.monaco-hover-content{box-sizing:border-box;padding-bottom:2px;padding-right:2px}.monaco-hover-content .action-container a{-webkit-user-select:none;user-select:none}.monaco-hover-content .action-container.disabled{cursor:default;opacity:.4;pointer-events:none}";
 n(css,{});
 export { css, css as default };

package/vscode/src/vs/base/browser/ui/hover/hoverWidget.js

@@ -4,6 +4,7 @@ import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import './hoverWidget.css.js';
 import { localizeWithPath } from '../../../../nls.js';
+const _moduleId = "vs/base/browser/ui/hover/hoverWidget";
 const $ = $$1;
 class HoverWidget extends Disposable {
     constructor() {
@@ -14,9 +15,9 @@ class HoverWidget extends Disposable {
         this.containerDomNode.setAttribute('role', 'tooltip');
         this.contentsDomNode = document.createElement('div');
         this.contentsDomNode.className = 'monaco-hover-content';
-        this.scrollbar = this._register(( new DomScrollableElement(this.contentsDomNode, {
+        this.scrollbar = this._register(( (new DomScrollableElement(this.contentsDomNode, {
             consumeMouseWheelIfScrollbarIsNeeded: true
-        })));
+        }))));
         this.containerDomNode.appendChild(this.scrollbar.getDomNode());
     }
     onContentsChanged() {
@@ -25,7 +26,9 @@ class HoverWidget extends Disposable {
 }
 class HoverAction extends Disposable {
     static render(parent, actionOptions, keybindingLabel) {
-        return ( new HoverAction(parent, actionOptions, keybindingLabel));
+        return (
+             (new HoverAction(parent, actionOptions, keybindingLabel))
+        );
     }
     constructor(parent, actionOptions, keybindingLabel) {
         super();
@@ -38,19 +41,12 @@ class HoverAction extends Disposable {
         }
         const label = append(this.action, $('span'));
         label.textContent = keybindingLabel ? `${actionOptions.label} (${keybindingLabel})` : actionOptions.label;
-        this._register(addDisposableListener(this.actionContainer, EventType.CLICK, e => {
-            e.stopPropagation();
-            e.preventDefault();
-            actionOptions.run(this.actionContainer);
-        }));
-        this._register(addDisposableListener(this.actionContainer, EventType.KEY_DOWN, e => {
-            const event = ( new StandardKeyboardEvent(e));
-            if (event.equals(3 ) || event.equals(10 )) {
-                e.stopPropagation();
-                e.preventDefault();
-                actionOptions.run(this.actionContainer);
-            }
-        }));
+        this._store.add(( (new ClickAction(this.actionContainer, actionOptions.run))));
+        this._store.add(( (new KeyDownAction(
+            this.actionContainer,
+            actionOptions.run,
+            [3 , 10 ]
+        ))));
         this.setEnabled(true);
     }
     setEnabled(enabled) {
@@ -65,15 +61,33 @@ class HoverAction extends Disposable {
     }
 }
 function getHoverAccessibleViewHint(shouldHaveHint, keybinding) {
-    return shouldHaveHint && keybinding ? ( localizeWithPath(
-        'vs/base/browser/ui/hover/hoverWidget',
-        'acessibleViewHint',
-        "Inspect this in the accessible view with {0}.",
-        keybinding
-    )) : shouldHaveHint ? ( localizeWithPath(
-        'vs/base/browser/ui/hover/hoverWidget',
-        'acessibleViewHintNoKbOpen',
+    return shouldHaveHint && keybinding ? ( localizeWithPath(_moduleId, 0, "Inspect this in the accessible view with {0}.", keybinding)) : shouldHaveHint ? ( localizeWithPath(
+        _moduleId,
+        1,
         "Inspect this in the accessible view via the command Open Accessible View which is currently not triggerable via keybinding."
     )) : '';
 }
-export { HoverAction, HoverWidget, getHoverAccessibleViewHint };
+class ClickAction extends Disposable {
+    constructor(container, run) {
+        super();
+        this._register(addDisposableListener(container, EventType.CLICK, e => {
+            e.stopPropagation();
+            e.preventDefault();
+            run(container);
+        }));
+    }
+}
+class KeyDownAction extends Disposable {
+    constructor(container, run, keyCodes) {
+        super();
+        this._register(addDisposableListener(container, EventType.KEY_DOWN, e => {
+            const event = ( (new StandardKeyboardEvent(e)));
+            if (( (keyCodes.some(keyCode => event.equals(keyCode))))) {
+                e.stopPropagation();
+                e.preventDefault();
+                run(container);
+            }
+        }));
+    }
+}
+export { ClickAction, HoverAction, HoverWidget, KeyDownAction, getHoverAccessibleViewHint };

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

@@ -1,11 +1,13 @@
 import './iconlabel.css.js';
 import { append, $, after } from '../../dom.js';
 import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
-import { setupNativeHover, setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
 import { Range } from '../../../common/range.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
+import { isString } from '../../../common/types.js';
+import { stripIcons } from '../../../common/iconLabels.js';
 class FastLabelNode {
     constructor(_element) {
         this._element = _element;
@@ -116,10 +118,21 @@ class IconLabel extends Disposable {
             return;
         }
         if (this.hoverDelegate.showNativeHover) {
+            function setupNativeHover(htmlElement, tooltip) {
+                if (isString(tooltip)) {
+                    htmlElement.title = stripIcons(tooltip);
+                }
+                else if (tooltip?.markdownNotSupportedFallback) {
+                    htmlElement.title = tooltip.markdownNotSupportedFallback;
+                }
+                else {
+                    htmlElement.removeAttribute('title');
+                }
+            }
             setupNativeHover(htmlElement, tooltip);
         }
         else {
-            const hoverDisposable = setupCustomHover(this.hoverDelegate, htmlElement, tooltip);
+            const hoverDisposable = getBaseLayerHoverDelegate().setupUpdatableHover(this.hoverDelegate, htmlElement, tooltip);
             if (hoverDisposable) {
                 this.customHovers.set(htmlElement, hoverDisposable);
             }

package/vscode/src/vs/base/browser/ui/iconLabel/simpleIconLabel.js

@@ -1,6 +1,6 @@
 import { reset } from '../../dom.js';
+import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
 import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
-import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { renderLabelWithIcons } from './iconLabels.js';
 class SimpleIconLabel {
     constructor(_container) {
@@ -11,7 +11,7 @@ class SimpleIconLabel {
     }
     set title(title) {
         if (!this.hover && title) {
-            this.hover = setupCustomHover(getDefaultHoverDelegate('mouse'), this._container, title);
+            this.hover = getBaseLayerHoverDelegate().setupUpdatableHover(getDefaultHoverDelegate('mouse'), this._container, title);
         }
         else if (this.hover) {
             this.hover.update(title);

package/vscode/src/vs/base/browser/ui/icons/iconSelectBox.css.js

@@ -0,0 +1,4 @@
+import n from '../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+var css = ".icon-select-box>.icon-select-box-container{height:100%}.icon-select-box .icon-select-icons-container{height:100%;outline:0!important}.icon-select-box .icon-select-icons-container>.icon-container{align-items:center;border-radius:5px;cursor:pointer;display:inline-flex;font-size:20px;justify-content:center}.icon-select-box .icon-select-icons-container>.icon-container.focused{background-color:var(--vscode-quickInputList-focusBackground);color:var(--vscode-quickInputList-focusForeground)}.icon-select-box .icon-select-icons-container>.icon-container:hover:not(.focused){background-color:var(--vscode-toolbar-hoverBackground);color:var(--vscode-list-hoverForeground)}.icon-select-box .icon-select-id-container .icon-select-id-label{height:24px;opacity:.8;padding:10px}.icon-select-box .icon-select-id-container .icon-select-id-label .highlight{color:var(--vscode-list-highlightForeground);font-weight:700}";
+n(css,{});
+export { css, css as default };

package/vscode/src/vs/base/browser/ui/icons/iconSelectBox.js

@@ -0,0 +1,239 @@
+import './iconSelectBox.css.js';
+import { $, append, clearNode, addDisposableListener, EventType } from '../../dom.js';
+import { alert } from '../aria/aria.js';
+import { InputBox } from '../inputbox/inputBox.js';
+import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
+import { Emitter } from '../../../common/event.js';
+import { Disposable, MutableDisposable, DisposableStore } from '../../../common/lifecycle.js';
+import { ThemeIcon } from '../../../common/themables.js';
+import { localizeWithPath } from '../../../../nls.js';
+import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
+const _moduleId = "vs/base/browser/ui/icons/iconSelectBox";
+class IconSelectBox extends Disposable {
+    static { this.InstanceCount = 0; }
+    constructor(options) {
+        super();
+        this.options = options;
+        this.domId = `icon_select_box_id_${++IconSelectBox.InstanceCount}`;
+        this._onDidSelect = this._register(( (new Emitter())));
+        this.onDidSelect = this._onDidSelect.event;
+        this.renderedIcons = [];
+        this.focusedItemIndex = 0;
+        this.numberOfElementsPerRow = 1;
+        this.iconContainerWidth = 36;
+        this.iconContainerHeight = 36;
+        this.domNode = $('.icon-select-box');
+        this._register(this.create());
+    }
+    create() {
+        const disposables = ( (new DisposableStore()));
+        const iconSelectBoxContainer = append(this.domNode, $('.icon-select-box-container'));
+        iconSelectBoxContainer.style.margin = '10px 15px';
+        const iconSelectInputContainer = append(iconSelectBoxContainer, $('.icon-select-input-container'));
+        iconSelectInputContainer.style.paddingBottom = '10px';
+        this.inputBox = disposables.add(( (new InputBox(iconSelectInputContainer, undefined, {
+            placeholder: ( localizeWithPath(_moduleId, 0, "Search icons")),
+            inputBoxStyles: this.options.inputBoxStyles,
+        }))));
+        const iconsContainer = this.iconsContainer = $('.icon-select-icons-container', { id: `${this.domId}_icons` });
+        iconsContainer.role = 'listbox';
+        iconsContainer.tabIndex = 0;
+        this.scrollableElement = disposables.add(( (new DomScrollableElement(iconsContainer, {
+            useShadows: false,
+            horizontal: 2 ,
+        }))));
+        append(iconSelectBoxContainer, this.scrollableElement.getDomNode());
+        if (this.options.showIconInfo) {
+            this.iconIdElement = this._register(( (new HighlightedLabel(
+                append(append(iconSelectBoxContainer, $('.icon-select-id-container')), $('.icon-select-id-label'))
+            ))));
+        }
+        const iconsDisposables = disposables.add(( (new MutableDisposable())));
+        iconsDisposables.value = this.renderIcons(this.options.icons, [], iconsContainer);
+        this.scrollableElement.scanDomNode();
+        disposables.add(this.inputBox.onDidChange(value => {
+            const icons = [], matches = [];
+            for (const icon of this.options.icons) {
+                const match = this.matchesContiguous(value, icon.id);
+                if (match) {
+                    icons.push(icon);
+                    matches.push(match);
+                }
+            }
+            if (icons.length) {
+                iconsDisposables.value = this.renderIcons(icons, matches, iconsContainer);
+                this.scrollableElement?.scanDomNode();
+            }
+        }));
+        this.inputBox.inputElement.role = 'combobox';
+        this.inputBox.inputElement.ariaHasPopup = 'menu';
+        this.inputBox.inputElement.ariaAutoComplete = 'list';
+        this.inputBox.inputElement.ariaExpanded = 'true';
+        this.inputBox.inputElement.setAttribute('aria-controls', iconsContainer.id);
+        return disposables;
+    }
+    renderIcons(icons, matches, container) {
+        const disposables = ( (new DisposableStore()));
+        clearNode(container);
+        const focusedIcon = this.renderedIcons[this.focusedItemIndex]?.icon;
+        let focusedIconIndex = 0;
+        const renderedIcons = [];
+        if (icons.length) {
+            for (let index = 0; index < icons.length; index++) {
+                const icon = icons[index];
+                const iconContainer = append(container, $('.icon-container', { id: `${this.domId}_icons_${index}` }));
+                iconContainer.style.width = `${this.iconContainerWidth}px`;
+                iconContainer.style.height = `${this.iconContainerHeight}px`;
+                iconContainer.title = icon.id;
+                iconContainer.role = 'button';
+                iconContainer.setAttribute('aria-setsize', `${icons.length}`);
+                iconContainer.setAttribute('aria-posinset', `${index + 1}`);
+                append(iconContainer, $(ThemeIcon.asCSSSelector(icon)));
+                renderedIcons.push({ icon, element: iconContainer, highlightMatches: matches[index] });
+                disposables.add(addDisposableListener(iconContainer, EventType.CLICK, (e) => {
+                    e.stopPropagation();
+                    this.setSelection(index);
+                }));
+                if (icon === focusedIcon) {
+                    focusedIconIndex = index;
+                }
+            }
+        }
+        else {
+            const noResults = ( localizeWithPath(_moduleId, 1, "No results"));
+            append(container, $('.icon-no-results', undefined, noResults));
+            alert(noResults);
+        }
+        this.renderedIcons.splice(0, this.renderedIcons.length, ...renderedIcons);
+        this.focusIcon(focusedIconIndex);
+        return disposables;
+    }
+    focusIcon(index) {
+        const existing = this.renderedIcons[this.focusedItemIndex];
+        if (existing) {
+            existing.element.classList.remove('focused');
+        }
+        this.focusedItemIndex = index;
+        const renderedItem = this.renderedIcons[index];
+        if (renderedItem) {
+            renderedItem.element.classList.add('focused');
+        }
+        if (this.inputBox) {
+            if (renderedItem) {
+                this.inputBox.inputElement.setAttribute('aria-activedescendant', renderedItem.element.id);
+            }
+            else {
+                this.inputBox.inputElement.removeAttribute('aria-activedescendant');
+            }
+        }
+        if (this.iconIdElement) {
+            if (renderedItem) {
+                this.iconIdElement.set(renderedItem.icon.id, renderedItem.highlightMatches);
+            }
+            else {
+                this.iconIdElement.set('');
+            }
+        }
+        this.reveal(index);
+    }
+    reveal(index) {
+        if (!this.scrollableElement) {
+            return;
+        }
+        if (index < 0 || index >= this.renderedIcons.length) {
+            return;
+        }
+        const element = this.renderedIcons[index].element;
+        if (!element) {
+            return;
+        }
+        const { height } = this.scrollableElement.getScrollDimensions();
+        const { scrollTop } = this.scrollableElement.getScrollPosition();
+        if (element.offsetTop + this.iconContainerHeight > scrollTop + height) {
+            this.scrollableElement.setScrollPosition({ scrollTop: element.offsetTop + this.iconContainerHeight - height });
+        }
+        else if (element.offsetTop < scrollTop) {
+            this.scrollableElement.setScrollPosition({ scrollTop: element.offsetTop });
+        }
+    }
+    matchesContiguous(word, wordToMatchAgainst) {
+        const matchIndex = wordToMatchAgainst.toLowerCase().indexOf(word.toLowerCase());
+        if (matchIndex !== -1) {
+            return [{ start: matchIndex, end: matchIndex + word.length }];
+        }
+        return null;
+    }
+    layout(dimension) {
+        this.domNode.style.width = `${dimension.width}px`;
+        this.domNode.style.height = `${dimension.height}px`;
+        const iconsContainerWidth = dimension.width - 30;
+        this.numberOfElementsPerRow = Math.floor(iconsContainerWidth / this.iconContainerWidth);
+        if (this.numberOfElementsPerRow === 0) {
+            throw ( (new Error('Insufficient width')));
+        }
+        const extraSpace = iconsContainerWidth % this.iconContainerWidth;
+        const iconElementMargin = Math.floor(extraSpace / this.numberOfElementsPerRow);
+        for (const { element } of this.renderedIcons) {
+            element.style.marginRight = `${iconElementMargin}px`;
+        }
+        const containerPadding = extraSpace % this.numberOfElementsPerRow;
+        if (this.iconsContainer) {
+            this.iconsContainer.style.paddingLeft = `${Math.floor(containerPadding / 2)}px`;
+            this.iconsContainer.style.paddingRight = `${Math.ceil(containerPadding / 2)}px`;
+        }
+        if (this.scrollableElement) {
+            this.scrollableElement.getDomNode().style.height = `${this.iconIdElement ? dimension.height - 80 : dimension.height - 40}px`;
+            this.scrollableElement.scanDomNode();
+        }
+    }
+    getFocus() {
+        return [this.focusedItemIndex];
+    }
+    setSelection(index) {
+        if (index < 0 || index >= this.renderedIcons.length) {
+            throw ( (new Error(`Invalid index ${index}`)));
+        }
+        this.focusIcon(index);
+        this._onDidSelect.fire(this.renderedIcons[index].icon);
+    }
+    clearInput() {
+        if (this.inputBox) {
+            this.inputBox.value = '';
+        }
+    }
+    focus() {
+        this.inputBox?.focus();
+        this.focusIcon(0);
+    }
+    focusNext() {
+        this.focusIcon((this.focusedItemIndex + 1) % this.renderedIcons.length);
+    }
+    focusPrevious() {
+        this.focusIcon((this.focusedItemIndex - 1 + this.renderedIcons.length) % this.renderedIcons.length);
+    }
+    focusNextRow() {
+        let nextRowIndex = this.focusedItemIndex + this.numberOfElementsPerRow;
+        if (nextRowIndex >= this.renderedIcons.length) {
+            nextRowIndex = (nextRowIndex + 1) % this.numberOfElementsPerRow;
+            nextRowIndex = nextRowIndex >= this.renderedIcons.length ? 0 : nextRowIndex;
+        }
+        this.focusIcon(nextRowIndex);
+    }
+    focusPreviousRow() {
+        let previousRowIndex = this.focusedItemIndex - this.numberOfElementsPerRow;
+        if (previousRowIndex < 0) {
+            const numberOfRows = Math.floor(this.renderedIcons.length / this.numberOfElementsPerRow);
+            previousRowIndex = this.focusedItemIndex + (this.numberOfElementsPerRow * numberOfRows) - 1;
+            previousRowIndex = previousRowIndex < 0
+                ? this.renderedIcons.length - 1
+                : previousRowIndex >= this.renderedIcons.length
+                    ? previousRowIndex - this.numberOfElementsPerRow
+                    : previousRowIndex;
+        }
+        this.focusIcon(previousRowIndex);
+    }
+    getFocusedIcon() {
+        return this.renderedIcons[this.focusedItemIndex].icon;
+    }
+}
+export { IconSelectBox };