@theia/core 1.74.0-next.8 → 1.74.0

package/src/browser/shell/shell-layout-restorer.ts

@@ -28,6 +28,7 @@ import { CommonCommands } from '../common-commands';
 import { WindowService } from '../window/window-service';
 import { StopReason } from '../../common/frontend-application-state';
 import { isFunction, isObject, MaybePromise } from '../../common';
+import { PerspectiveServiceInternal } from '../perspective-service';
 
 /**
  * A contract for widgets that want to store and restore their inner state, between sessions.
@@ -124,6 +125,13 @@ export interface ShellLayoutTransformer {
     transformLayoutOnRestore(layoutData: ApplicationShell.LayoutData): void;
 }
 
+export const PERSPECTIVE_LAYOUTS_STORAGE_KEY = 'perspective-layouts';
+
+export interface PersistedPerspectiveData {
+    activePerspectiveId: string;
+    layouts: Record<string, string>;
+}
+
 export const RESET_LAYOUT = Command.toLocalizedCommand({
     id: 'reset.layout',
     category: CommonCommands.VIEW_CATEGORY,
@@ -141,6 +149,9 @@ export class ShellLayoutRestorer implements CommandContribution {
     @inject(WindowService) protected readonly windowService: WindowService;
     @inject(ThemeService) protected readonly themeService: ThemeService;
 
+    @inject(PerspectiveServiceInternal)
+    protected readonly perspectiveService: PerspectiveServiceInternal;
+
     constructor(
         @inject(WidgetManager) protected widgetManager: WidgetManager,
         @inject(ILogger) protected logger: ILogger,
@@ -157,6 +168,8 @@ export class ShellLayoutRestorer implements CommandContribution {
             this.logger.info('>>> Resetting layout...');
             this.shouldStoreLayout = false;
             this.storageService.setData(this.storageKey, undefined);
+            this.perspectiveService.clearSavedLayouts();
+            this.storageService.setData(PERSPECTIVE_LAYOUTS_STORAGE_KEY, undefined);
             this.themeService.reset();
             this.logger.info('<<< The layout has been successfully reset.');
             this.windowService.reload();
@@ -167,29 +180,137 @@ export class ShellLayoutRestorer implements CommandContribution {
         if (this.shouldStoreLayout) {
             try {
                 this.logger.info('>>> Storing the layout...');
-                const layoutData = app.shell.getLayoutData();
-                const serializedLayoutData = this.deflate(layoutData);
-                this.storageService.setData(this.storageKey, serializedLayoutData);
+                this.storePerspectiveLayouts(app);
                 this.logger.info('<<< The layout has been successfully stored.');
             } catch (error) {
-                this.storageService.setData(this.storageKey, undefined);
                 this.logger.error('Error during serialization of layout data', error);
             }
         }
     }
 
+    protected storePerspectiveLayouts(app: FrontendApplication): void {
+        const provider = this.perspectiveService;
+        const activeId = provider.getActivePerspectiveId();
+        const layouts: Record<string, string> = {};
+
+        // Snapshot current shell as the active perspective's layout
+        try {
+            const currentLayout = app.shell.getLayoutData();
+            layouts[activeId] = this.deflate(currentLayout);
+        } catch (error) {
+            this.logger.warn(`Could not deflate layout for active perspective '${activeId}'`, error);
+        }
+
+        // Deflate all other saved (inactive) perspective layouts
+        for (const perspId of provider.getSavedPerspectiveIds()) {
+            if (perspId === activeId) {
+                continue; // already handled above from live shell
+            }
+            try {
+                const layout = provider.getSavedLayout(perspId);
+                if (layout) {
+                    layouts[perspId] = this.deflate(layout);
+                }
+            } catch (error) {
+                this.logger.warn(`Could not deflate layout for perspective '${perspId}'`, error);
+            }
+        }
+
+        const perspectiveIds = Object.keys(layouts);
+        const onlyDefault = perspectiveIds.length <= 1 && (perspectiveIds.length === 0 || perspectiveIds[0] === provider.defaultPerspectiveId);
+        if (onlyDefault) {
+            // If only the default perspective has ever been used, continue writing
+            // to the legacy key for backward compatibility.
+            const defaultLayout = layouts[provider.defaultPerspectiveId];
+            if (defaultLayout) {
+                this.storageService.setData(this.storageKey, defaultLayout).catch(error => {
+                    this.logger.error('Error persisting default layout', error);
+                });
+            }
+            this.storageService.setData(PERSPECTIVE_LAYOUTS_STORAGE_KEY, undefined);
+        } else {
+            const data: PersistedPerspectiveData = { activePerspectiveId: activeId, layouts };
+            this.storageService.setData(PERSPECTIVE_LAYOUTS_STORAGE_KEY, data).catch(error => {
+                this.logger.error('Error persisting perspective layouts, clearing stored data', error);
+                this.storageService.setData(PERSPECTIVE_LAYOUTS_STORAGE_KEY, undefined);
+            });
+            // Clear the legacy key when perspectives are in use
+            this.storageService.setData(this.storageKey, undefined);
+        }
+    }
+
     async restoreLayout(app: FrontendApplication): Promise<boolean> {
         this.logger.info('>>> Restoring the layout state...');
-        const serializedLayoutData = await this.storageService.getData<string>(this.storageKey);
-        if (serializedLayoutData === undefined) {
-            this.logger.info('<<< Nothing to restore.');
-            return false;
+        return this.restorePerspectiveLayouts(app);
+    }
+
+    protected async restorePerspectiveLayouts(app: FrontendApplication): Promise<boolean> {
+        const persisted = await this.storageService.getData<PersistedPerspectiveData>(PERSPECTIVE_LAYOUTS_STORAGE_KEY);
+
+        let activeId: string | undefined;
+
+        if (persisted) {
+            activeId = persisted.activePerspectiveId;
+            // Inflate all perspective layouts, apply transforms, and push to provider
+            for (const [perspId, deflated] of Object.entries(persisted.layouts)) {
+                try {
+                    const layout = await this.inflate(deflated);
+                    this.transformations.getContributions()
+                        .forEach(t => t.transformLayoutOnRestore(layout));
+                    this.perspectiveService.setSavedLayout(perspId, layout);
+                } catch (error) {
+                    this.logger.warn(`Could not inflate layout for perspective '${perspId}'`, error);
+                }
+            }
+        } else {
+            // Migration: try legacy single-layout key. The key is deliberately left in place here:
+            // `storePerspectiveLayouts` rewrites it (default perspective only) or clears it (perspectives
+            // in use) on shutdown, so an unclean exit right after startup doesn't lose the layout.
+            const legacyData = await this.storageService.getData<string>(this.storageKey);
+            if (legacyData) {
+                try {
+                    const layout = await this.inflate(legacyData);
+                    this.transformations.getContributions()
+                        .forEach(t => t.transformLayoutOnRestore(layout));
+                    this.perspectiveService.setSavedLayout(this.perspectiveService.defaultPerspectiveId, layout);
+                    activeId = this.perspectiveService.defaultPerspectiveId;
+                } catch (error) {
+                    this.logger.warn('Could not inflate legacy layout for migration', error);
+                }
+            }
+        }
+
+        if (activeId) {
+            const accepted = this.perspectiveService.setActivePerspectiveId(activeId);
+            if (!accepted) {
+                activeId = this.perspectiveService.getActivePerspectiveId();
+            }
+        }
+
+        // Apply the active perspective's layout to the shell
+        const effectiveId = activeId ?? this.perspectiveService.getActivePerspectiveId();
+        let activeLayout = this.perspectiveService.getSavedLayout(effectiveId);
+
+        // Fallback: if the active perspective has no saved layout, try the default
+        if (!activeLayout && effectiveId !== this.perspectiveService.defaultPerspectiveId) {
+            this.logger.warn(`No saved layout for perspective '${effectiveId}', falling back to default.`);
+            const defaultId = this.perspectiveService.defaultPerspectiveId;
+            this.perspectiveService.setActivePerspectiveId(defaultId);
+            activeLayout = this.perspectiveService.getSavedLayout(defaultId);
         }
-        const layoutData = await this.inflate(serializedLayoutData);
-        this.transformations.getContributions().forEach(transformation => transformation.transformLayoutOnRestore(layoutData));
-        await app.shell.setLayoutData(layoutData);
-        this.logger.info('<<< The layout has been successfully restored.');
-        return true;
+
+        if (activeLayout) {
+            await app.shell.setLayoutData(activeLayout);
+            const restoredId = this.perspectiveService.getActivePerspectiveId();
+            this.perspectiveService.onLayoutRestored(restoredId);
+            this.logger.info('<<< The layout has been successfully restored.');
+            return true;
+        }
+
+        // Even with no layout to restore, ensure chrome is applied for whatever perspective is active
+        this.perspectiveService.onLayoutRestored(this.perspectiveService.getActivePerspectiveId());
+        this.logger.info('<<< Nothing to restore.');
+        return false;
     }
 
     protected isWidgetProperty(propertyName: string): boolean {

package/src/browser/shell/view-contribution.ts

@@ -87,6 +87,11 @@ export abstract class AbstractViewContribution<T extends Widget> implements Comm
         return this.options.defaultWidgetOptions;
     }
 
+    /** The widget ID used for shell operations — `viewContainerId` if set, otherwise `widgetId`. */
+    get effectiveWidgetId(): string {
+        return this.options.viewContainerId || this.options.widgetId;
+    }
+
     get widget(): Promise<T> {
         return this.widgetManager.getOrCreateWidget(this.viewId);
     }
@@ -97,7 +102,7 @@ export abstract class AbstractViewContribution<T extends Widget> implements Comm
 
     async openView(args: Partial<OpenViewArguments> = {}): Promise<T> {
         const shell = this.shell;
-        const widget = await this.widgetManager.getOrCreateWidget(this.options.viewContainerId || this.viewId);
+        const widget = await this.widgetManager.getOrCreateWidget(this.effectiveWidgetId);
         const tabBar = shell.getTabBarFor(widget);
         const area = shell.getAreaFor(widget);
         if (!tabBar) {

package/src/browser/status-bar/status-bar.tsx

@@ -35,6 +35,8 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
     protected backgroundColor: string | undefined;
     protected color: string | undefined;
 
+    protected preferencesReady = false;
+
     constructor(
         @inject(CommandService) protected readonly commands: CommandService,
         @inject(LabelParser) protected readonly entryService: LabelParser,
@@ -50,19 +52,27 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         // Hide the status bar until the `workbench.statusBar.visible` preference returns with a `true` value.
         this.hide();
         this.preferences.ready.then(() => {
-            const preferenceValue = this.preferences.get<boolean>('workbench.statusBar.visible', true);
-            this.setHidden(!preferenceValue);
+            this.preferencesReady = true;
+            this.updateVisibility();
         });
         this.toDispose.push(
             this.preferences.onPreferenceChanged(preference => {
                 if (preference.preferenceName === 'workbench.statusBar.visible') {
-                    this.setHidden(!this.preferences.get('workbench.statusBar.visible', true));
+                    this.updateVisibility();
                 }
             })
         );
         this.toDispose.push(this.viewModel.onDidChange(() => this.debouncedUpdate()));
     }
 
+    protected updateVisibility(): void {
+        if (!this.preferencesReady) {
+            return; // Don't change visibility until preferences have loaded
+        }
+        const prefHides = !this.preferences.get<boolean>('workbench.statusBar.visible', true);
+        this.setHidden(prefHides);
+    }
+
     protected debouncedUpdate = debounce(() => this.update(), 50);
 
     protected get ready(): Promise<void> {

package/src/browser/style/select-component.css

@@ -99,6 +99,22 @@
   background: var(--theia-list-activeSelectionBackground);
 }
 
+.theia-select-component-dropdown .theia-select-component-option.disabled,
+.theia-select-component-dropdown .theia-select-component-option.disabled .theia-select-component-option-detail {
+  color: var(--theia-disabledForeground);
+  cursor: default;
+}
+
+.theia-select-component-dropdown .theia-select-component-option.disabled .theia-select-component-option-value {
+  text-decoration: line-through;
+}
+
+/* Keep a hovered/selected disabled option readable against the active-selection background. */
+.theia-select-component-dropdown .theia-select-component-option.disabled.selected,
+.theia-select-component-dropdown .theia-select-component-option.disabled.selected .theia-select-component-option-detail {
+  color: var(--theia-list-activeSelectionForeground);
+}
+
 .theia-select-component-dropdown .theia-select-component-separator {
   width: 84px;
   height: 1px;

package/src/browser/style/sidepanel.css

@@ -276,6 +276,11 @@
   background: inherit;
 }
 
+/* Ensure the empty bottom panel keeps a top border separating it from the main panel. */
+#theia-bottom-content-panel:not(:has(.lm-TabBar)) {
+  border-top: var(--theia-border-width) solid var(--theia-panel-border);
+}
+
 #theia-bottom-content-panel .lm-TabBar-tab {
   background: inherit;
 }

package/src/browser/style/status-bar.css

@@ -63,7 +63,7 @@ body.theia-no-open-workspace #theia-statusBar {
   padding-inline: var(--theia-ui-padding);
 }
 
-#theia-statusBar .area.left .element.has-background {
+#theia-statusBar .area.left .element.has-background:not(#session-preference-status) {
   margin-left: calc(-1 * var(--theia-ui-padding));
 }
 

package/src/browser/tree/tree-widget.tsx

@@ -64,28 +64,10 @@ export const TREE_NODE_CAPTION_CLASS = 'theia-TreeNodeCaption';
 export const TREE_NODE_INDENT_GUIDE_CLASS = 'theia-tree-node-indent';
 
 /**
- * Threshold in pixels to consider the view as being scrolled to the bottom
+ * Threshold in pixels to consider the view as being scrolled to the bottom.
  */
 export const SCROLL_BOTTOM_THRESHOLD = 30;
 
-/**
- * Tree scroll event data.
- */
-export interface TreeScrollEvent {
-    readonly scrollTop: number;
-    readonly scrollLeft: number;
-}
-
-/**
- * Tree scroll state data.
- */
-export interface TreeScrollState {
-    readonly scrollTop: number;
-    readonly isAtBottom: boolean;
-    readonly scrollHeight?: number;
-    readonly clientHeight?: number;
-}
-
 export const TreeProps = Symbol('TreeProps');
 
 /**
@@ -189,8 +171,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
     protected searchBox: SearchBox;
     protected searchHighlights: Map<string, TreeDecoration.CaptionHighlight>;
 
-    protected readonly onScrollEmitter = new Emitter<TreeScrollEvent>();
-    readonly onScroll: TheiaEvent<TreeScrollEvent> = this.onScrollEmitter.event;
+    protected readonly onAtBottomStateChangeEmitter = new Emitter<boolean>();
+    readonly onAtBottomStateChange: TheiaEvent<boolean> = this.onAtBottomStateChangeEmitter.event;
 
     @inject(TreeDecoratorService)
     protected readonly decoratorService: TreeDecoratorService;
@@ -285,7 +267,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         this.node.addEventListener('mouseup', this.handleMiddleClickEvent.bind(this));
         this.node.addEventListener('auxclick', this.handleMiddleClickEvent.bind(this));
         this.toDispose.pushAll([
-            this.onScrollEmitter,
+            this.onAtBottomStateChangeEmitter,
             this.model,
             this.model.onChanged(() => this.updateRows()),
             this.model.onSelectionChanged(() => this.scheduleUpdateScrollToRow({ resize: false })),
@@ -551,7 +533,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 rows={rows}
                 renderNodeRow={this.renderNodeRow}
                 scrollToRow={this.scrollToRow}
-                onScrollEmitter={this.onScrollEmitter}
+                onAtBottomStateChangeEmitter={this.onAtBottomStateChangeEmitter}
                 {...this.props.viewProps}
             />;
         }
@@ -1201,39 +1183,6 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.node;
     }
 
-    /**
-     * Get the current scroll state from the virtualized view.
-     * This should be used instead of accessing the DOM scroll properties directly
-     * when the tree is virtualized.
-     */
-    protected getVirtualizedScrollState(): TreeScrollState | undefined {
-        return this.view?.getScrollState();
-    }
-
-    /**
-     * Check if the tree is scrolled to the bottom.
-     * Works with both virtualized and non-virtualized trees.
-     */
-    isScrolledToBottom(): boolean {
-        if (this.props.virtualized !== false && this.view) {
-            // Use virtualized scroll state
-            const scrollState = this.getVirtualizedScrollState();
-            return scrollState?.isAtBottom ?? true;
-        } else {
-            // Fallback to DOM-based calculation for non-virtualized trees
-            const scrollContainer = this.node;
-            const scrollHeight = scrollContainer.scrollHeight;
-            const scrollTop = scrollContainer.scrollTop;
-            const clientHeight = scrollContainer.clientHeight;
-
-            if (scrollHeight <= clientHeight) {
-                return true;
-            }
-
-            return scrollHeight - scrollTop - clientHeight <= SCROLL_BOTTOM_THRESHOLD;
-        }
-    }
-
     protected override onAfterAttach(msg: Message): void {
         const up = [
             Key.ARROW_UP,
@@ -1658,11 +1607,14 @@ export namespace TreeWidget {
         /**
          * Optional scroll event emitter.
          */
-        onScrollEmitter?: Emitter<TreeScrollEvent>
+        /**
+         * Optional emitter fired when the at-bottom state changes.
+         */
+        onAtBottomStateChangeEmitter?: Emitter<boolean>
     }
     export class View extends React.Component<ViewProps> {
         list: VirtuosoHandle | undefined;
-        private lastScrollState: TreeScrollState = { scrollTop: 0, isAtBottom: true, scrollHeight: 0, clientHeight: 0 };
+
         /**
          * Ensure the selected row is scrolled into view when virtualization finishes updating.
          */
@@ -1687,28 +1639,14 @@ export namespace TreeWidget {
         }
 
         override render(): React.ReactNode {
-            const { rows, width, height, scrollToRow, renderNodeRow, onScrollEmitter, ...other } = this.props;
+            const { rows, width, height, scrollToRow, renderNodeRow, onAtBottomStateChangeEmitter, ...other } = this.props;
             return <Virtuoso
                 ref={(list: VirtuosoHandle | null) => {
                     this.list = (list || undefined);
                     this.scrollIntoViewIfNeeded();
                 }}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onScroll={(e: any) => {
-                    const scrollTop = e.target.scrollTop;
-                    const scrollHeight = e.target.scrollHeight;
-                    const clientHeight = e.target.clientHeight;
-                    const isAtBottom = scrollHeight - scrollTop - clientHeight <= SCROLL_BOTTOM_THRESHOLD;
-
-                    // Store scroll state before firing the event to prevent jitter during inference and scrolling
-                    this.lastScrollState = { scrollTop, isAtBottom, scrollHeight, clientHeight };
-                    onScrollEmitter?.fire({ scrollTop, scrollLeft: e.target.scrollLeft || 0 });
-                }}
                 atBottomStateChange={(atBottom: boolean) => {
-                    this.lastScrollState = {
-                        ...this.lastScrollState,
-                        isAtBottom: atBottom
-                    };
+                    onAtBottomStateChangeEmitter?.fire(atBottom);
                 }}
                 atBottomThreshold={SCROLL_BOTTOM_THRESHOLD}
                 totalCount={rows.length}
@@ -1721,9 +1659,5 @@ export namespace TreeWidget {
                 {...other}
             />;
         }
-
-        getScrollState(): TreeScrollState {
-            return { ...this.lastScrollState };
-        }
     }
 }

package/src/browser/widgets/index.ts

@@ -15,6 +15,7 @@
 // *****************************************************************************
 
 export * from './widget';
+export * from './tab-bar-tracker';
 export * from './react-renderer';
 export * from './react-widget';
 export * from './extractable-widget';

package/src/browser/widgets/select-component.tsx

@@ -91,7 +91,20 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         return selected;
     }
 
-    override componentDidUpdate(prevProps: SelectComponentProps): void {
+    override componentDidUpdate(prevProps: SelectComponentProps, prevState: SelectComponentState): void {
+        if (prevState.selected !== this.state.selected && this.state.dimensions) {
+            const dropdownContainer = this.dropdownRef?.current;
+            const selectedOption = dropdownContainer?.querySelector(`[data-option-index="${this.state.selected}"]`) as HTMLElement | undefined;
+            if (dropdownContainer && selectedOption) {
+                const optionBottom = selectedOption.offsetTop + selectedOption.offsetHeight;
+                const visibleBottom = dropdownContainer.scrollTop + dropdownContainer.clientHeight;
+                if (optionBottom > visibleBottom) {
+                    dropdownContainer.scrollTop = optionBottom - dropdownContainer.clientHeight;
+                } else if (selectedOption.offsetTop < dropdownContainer.scrollTop) {
+                    dropdownContainer.scrollTop = selectedOption.offsetTop;
+                }
+            }
+        }
         if (prevProps.defaultValue !== this.props.defaultValue || prevProps.options !== this.props.options) {
             const selected = this.getInitialSelectedIndex(this.props);
             this.setState({
@@ -230,13 +243,18 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             selected = this.nextNotSeparator('forwards');
         }
         const selectedItemLabel = options[selected]?.label ?? options[selected]?.value;
+        // Expose when the currently shown option is disabled so consumers can style the field to match
+        // it (e.g. the option previewed while navigating), instead of a fixed committed-value class.
+        const selectionDisabled = !!options[selected]?.disabled;
+        const fieldClassName = `theia-select-component${this.props.className ? ` ${this.props.className}` : ''}`
+            + `${selectionDisabled ? ' theia-select-component-selection-disabled' : ''}`;
         return <>
             <div
                 id={this.props.id}
                 key="select-component"
                 ref={this.fieldRef}
                 tabIndex={0}
-                className={`theia-select-component${this.props.className ? ` ${this.props.className}` : ''}`}
+                className={fieldClassName}
                 onClick={e => this.handleClickEvent(e)}
                 onBlur={
                     () => {
@@ -254,11 +272,11 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
         </>;
     }
 
-    protected nextNotSeparator(direction: 'forwards' | 'backwards'): number {
+    protected nextNotSeparator(direction: 'forwards' | 'backwards', startFrom?: number): number {
         const { options } = this.props;
         const step = direction === 'forwards' ? 1 : -1;
         const length = this.props.options.length;
-        let selected = this.state.selected;
+        let selected = startFrom ?? this.state.selected;
         let count = 0;
         do {
             selected = (selected + step) % length;
@@ -267,7 +285,8 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             }
             count++;
         }
-        while (options[selected]?.separator && count < length);
+        // Skip separators and disabled options so keyboard navigation never lands on a non-selectable entry.
+        while ((options[selected]?.separator || options[selected]?.disabled) && count < length);
         return selected;
     }
 
@@ -276,23 +295,26 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             return;
         }
         if (ev.key === 'ArrowUp') {
-            const selected = this.nextNotSeparator('backwards');
+            const selected = this.nextNotSeparator('backwards', this.state.hover);
             this.setState({
                 selected,
                 hover: selected
             });
         } else if (ev.key === 'ArrowDown') {
             if (this.state.dimensions) {
-                const selected = this.nextNotSeparator('forwards');
+                const selected = this.nextNotSeparator('forwards', this.state.hover);
                 this.setState({
                     selected,
                     hover: selected
                 });
             } else {
                 this.toggleVisibility();
+                // Start on the first selectable option (startFrom -1 evaluates index 0 first), so a
+                // leading separator or disabled option is skipped instead of becoming the active row.
+                const selected = this.nextNotSeparator('forwards', -1);
                 this.setState({
-                    selected: 0,
-                    hover: 0,
+                    selected,
+                    hover: selected,
                 });
             }
         } else if (ev.key === 'Enter') {
@@ -300,7 +322,10 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
                 this.toggleVisibility();
             } else {
                 const selected = this.state.selected;
-                this.selectOption(selected, this.props.options[selected]);
+                const option = this.props.options[selected];
+                if (!option?.disabled) {
+                    this.selectOption(selected, option);
+                }
             }
         } else if (ev.key === 'Escape' || ev.key === 'Tab') {
             this.hide(undefined, true);
@@ -401,17 +426,21 @@ export class SelectComponent extends React.Component<SelectComponentProps, Selec
             return <div key={index} className="theia-select-component-separator" />;
         }
         const selected = this.state.hover;
+        const disabled = !!option.disabled;
         return (
             <div
                 key={index}
-                className={`theia-select-component-option${index === selected ? ' selected' : ''}`}
+                data-option-index={index}
+                className={`theia-select-component-option${index === selected ? ' selected' : ''}${disabled ? ' disabled' : ''}`}
                 onMouseOver={() => {
                     this.setState({
                         hover: index
                     });
                 }}
                 onMouseDown={() => {
-                    this.selectOption(index, option);
+                    if (!disabled) {
+                        this.selectOption(index, option);
+                    }
                 }}
             >
                 <div key="value" className="theia-select-component-option-value">{option.label ?? option.value}</div>