@theia/core 1.74.0-next.6 → 1.74.0-next.60

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/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>