@codingame/monaco-vscode-api 36.2.7 → 37.0.0

package/vscode/src/vs/base/browser/ui/list/listView.js

@@ -9,7 +9,7 @@ import { equals, splice, distinct } from '../../../common/arrays.js';
 import { Delayer, disposableTimeout } from '../../../common/async.js';
 import { memoize } from '../../../common/decorators.js';
 import { Emitter, Event } from '../../../common/event.js';
-import { Disposable, DisposableStore, toDisposable } from '../../../common/lifecycle.js';
+import { Disposable, DisposableStore, MutableDisposable, toDisposable } from '../../../common/lifecycle.js';
 import { Range } from '../../../common/range.js';
 import { ScrollbarVisibility, Scrollable } from '../../../common/scrollable.js';
 import { ListDragOverEffectType, ListDragOverEffectPosition } from './list.js';
@@ -168,9 +168,7 @@ class ListView {
         this._horizontalScrolling = value;
         this.domNode.classList.toggle("horizontal-scrolling", this._horizontalScrolling);
         if (this._horizontalScrolling) {
-            for (const item of this.items) {
-                this.measureItemWidth(item);
-            }
+            this.measureItemWidths(this.items);
             this.updateScrollWidth();
             this.scrollableElement.setScrollDimensions({
                 width: getContentWidth(this.domNode)
@@ -197,11 +195,12 @@ class ListView {
         this.splicing = false;
         this.dragOverAnimationStopDisposable = Disposable.None;
         this.dragOverMouseY = 0;
+        this.disposables = ( new DisposableStore());
         this.canDrop = false;
         this.currentDragFeedbackDisposable = Disposable.None;
         this.onDragLeaveTimeout = Disposable.None;
-        this.currentSelectionDisposable = Disposable.None;
-        this.disposables = ( new DisposableStore());
+        this.currentSelectionDisposable = this.disposables.add(( new MutableDisposable()));
+        this.currentSelectionMovementDisposable = this.disposables.add(( new MutableDisposable()));
         this._onDidChangeContentHeight = this.disposables.add(( new Emitter()));
         this._onDidChangeContentWidth = this.disposables.add(( new Emitter()));
         this.onDidChangeContentHeight = Event.latch(this._onDidChangeContentHeight.event, undefined, this.disposables);
@@ -501,7 +500,9 @@ class ListView {
         const renderedRestRange = shift(previousRenderedRestRange, delta);
         const updateRange = Range.intersect(renderRange, renderedRestRange);
         for (let i = updateRange.start; i < updateRange.end; i++) {
-            this.updateItemInDOM(this.items[i], i);
+            if (this.items[i].row) {
+                this.updateItemInDOM(this.items[i], i);
+            }
         }
         const removeRanges = Range.relativeComplement(renderedRestRange, renderRange);
         for (const range of removeRanges) {
@@ -515,12 +516,14 @@ class ListView {
             end: start + elements.length
         };
         const insertRanges = ( [elementsRange, ...unrenderedRestRanges].map(r => Range.intersect(renderRange, r))).reverse();
+        const insertedItems = [];
         for (const range of insertRanges) {
             for (let i = range.end - 1; i >= range.start; i--) {
                 const item = this.items[i];
                 const rows = rowsToDispose.get(item.templateId);
                 const row = rows?.pop();
                 this.insertItemInDOM(i, row);
+                insertedItems.push(item);
             }
         }
         for (const rows of ( rowsToDispose.values())) {
@@ -528,6 +531,10 @@ class ListView {
                 this.cache.release(row);
             }
         }
+        if (this.horizontalScrolling && insertedItems.length > 0) {
+            this.measureItemWidths(insertedItems);
+            this.eventuallyUpdateScrollWidth();
+        }
         this.eventuallyUpdateScrollDimensions();
         if (this.supportDynamicHeights) {
             this._rerender(this.scrollTop, this.renderHeight);
@@ -575,7 +582,7 @@ class ListView {
             return;
         }
         const item = this.items[index];
-        this.measureItemWidth(item);
+        this.measureItemWidths([item]);
         if (typeof item.width !== "undefined" && item.width > this.scrollWidth) {
             this.scrollWidth = item.width;
             this.scrollableElement.setScrollDimensions({
@@ -686,6 +693,7 @@ class ListView {
                 this.updateItemInDOM(this.items[i], i);
             }
         }
+        const insertedItems = [];
         this.cache.transact(() => {
             for (const range of rangesToRemove) {
                 for (let i = range.start; i < range.end; i++) {
@@ -695,9 +703,14 @@ class ListView {
             for (const range of rangesToInsert) {
                 for (let i = range.end - 1; i >= range.start; i--) {
                     this.insertItemInDOM(i);
+                    insertedItems.push(this.items[i]);
                 }
             }
         });
+        if (this.horizontalScrolling && insertedItems.length > 0) {
+            this.measureItemWidths(insertedItems);
+            this.eventuallyUpdateScrollWidth();
+        }
         if (renderLeft !== undefined) {
             this.rowsContainer.style.left = `-${renderLeft}px`;
         }
@@ -710,7 +723,7 @@ class ListView {
         this.lastRenderTop = renderTop;
         this.lastRenderHeight = renderHeight;
     }
-    insertItemInDOM(index, row) {
+    insertItemInDOM(index, row, alreadyRendered = false) {
         const item = this.items[index];
         if (!item.row) {
             if (row) {
@@ -745,9 +758,11 @@ class ListView {
         if (!renderer) {
             throw ( new Error(`No renderer found for template id ${item.templateId}`));
         }
-        renderer?.renderElement(item.element, index, item.row.templateData, {
-            height: item.size
-        });
+        if (!alreadyRendered) {
+            renderer.renderElement(item.element, index, item.row.templateData, {
+                height: item.size
+            });
+        }
         const uri = this.dnd.getDragURI(item.element);
         item.dragStartDisposable.dispose();
         item.row.domNode.draggable = !!uri;
@@ -758,25 +773,40 @@ class ListView {
                 event => this.onDragStart(item.element, uri, event)
             );
         }
-        if (this.horizontalScrolling) {
-            this.measureItemWidth(item);
-            this.eventuallyUpdateScrollWidth();
-        }
     }
-    measureItemWidth(item) {
-        if (!item.row || !item.row.domNode) {
-            return;
+    measureItemWidths(items) {
+        const itemsWithRows = [];
+        for (const item of items) {
+            if (item.row) {
+                itemsWithRows.push({
+                    item,
+                    domNode: item.row.domNode
+                });
+            }
         }
-        item.row.domNode.style.width = "fit-content";
-        item.width = getContentWidth(item.row.domNode);
-        const style = getWindow(item.row.domNode).getComputedStyle(item.row.domNode);
-        if (style.paddingLeft) {
-            item.width += parseFloat(style.paddingLeft);
+        for (const {
+            domNode
+        } of itemsWithRows) {
+            domNode.style.width = "fit-content";
+        }
+        for (const {
+            item,
+            domNode
+        } of itemsWithRows) {
+            item.width = getContentWidth(domNode);
+            const style = getWindow(domNode).getComputedStyle(domNode);
+            if (style.paddingLeft) {
+                item.width += parseFloat(style.paddingLeft);
+            }
+            if (style.paddingRight) {
+                item.width += parseFloat(style.paddingRight);
+            }
         }
-        if (style.paddingRight) {
-            item.width += parseFloat(style.paddingRight);
+        for (const {
+            domNode
+        } of itemsWithRows) {
+            domNode.style.width = "";
         }
-        item.row.domNode.style.width = "";
     }
     updateItemInDOM(item, index) {
         item.row.domNode.style.top = `${this.elementTop(index)}px`;
@@ -987,55 +1017,66 @@ class ListView {
         this.dnd.onDragStart?.(this.currentDragData, event);
     }
     onPotentialSelectionStart(e) {
-        this.currentSelectionDisposable.dispose();
         const doc = getDocument(this.domNode);
-        const selectionStore = this.currentSelectionDisposable = ( new DisposableStore());
-        const movementStore = selectionStore.add(( new DisposableStore()));
+        this.currentSelectionMovementDisposable.clear();
+        if (e.shiftKey && this.currentSelectionBounds && doc.getSelection()?.isCollapsed === false) {
+            this.currentSelectionMovementDisposable.value = this.createSelectionMovementStore(doc);
+            return;
+        }
+        this.currentSelectionDisposable.clear();
+        const selectionStore = ( new DisposableStore());
+        this.currentSelectionDisposable.value = selectionStore;
+        this.currentSelectionMovementDisposable.value = this.createSelectionMovementStore(doc);
+        selectionStore.add(toDisposable(() => {
+            this.currentSelectionMovementDisposable.clear();
+            const previousRenderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
+            this.currentSelectionBounds = undefined;
+            this.render(
+                previousRenderRange,
+                this.lastRenderTop,
+                this.lastRenderHeight,
+                undefined,
+                undefined
+            );
+        }));
+        selectionStore.add(addDisposableListener(doc, "selectionchange", () => {
+            const selection = doc.getSelection();
+            if (!selection || selection.isCollapsed) {
+                if (!this.currentSelectionMovementDisposable.value) {
+                    this.currentSelectionDisposable.clear();
+                }
+                return;
+            }
+            let start = this.getIndexOfListElement(selection.anchorNode);
+            let end = this.getIndexOfListElement(selection.focusNode);
+            if (start !== undefined && end !== undefined) {
+                if (end < start) {
+                    [start, end] = [end, start];
+                }
+                this.currentSelectionBounds = {
+                    start,
+                    end
+                };
+            }
+        }));
+    }
+    createSelectionMovementStore(doc) {
+        const movementStore = ( new DisposableStore());
         movementStore.add(addDisposableListener(this.domNode, "selectstart", () => {
             movementStore.add(addDisposableListener(doc, "mousemove", e => {
                 if (doc.getSelection()?.isCollapsed === false) {
                     this.setupDragAndDropScrollTopAnimation(e);
                 }
             }));
-            selectionStore.add(toDisposable(() => {
-                const previousRenderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
-                this.currentSelectionBounds = undefined;
-                this.render(
-                    previousRenderRange,
-                    this.lastRenderTop,
-                    this.lastRenderHeight,
-                    undefined,
-                    undefined
-                );
-            }));
-            selectionStore.add(addDisposableListener(doc, "selectionchange", () => {
-                const selection = doc.getSelection();
-                if (!selection || selection.isCollapsed) {
-                    if (movementStore.isDisposed) {
-                        selectionStore.dispose();
-                    }
-                    return;
-                }
-                let start = this.getIndexOfListElement(selection.anchorNode);
-                let end = this.getIndexOfListElement(selection.focusNode);
-                if (start !== undefined && end !== undefined) {
-                    if (end < start) {
-                        [start, end] = [end, start];
-                    }
-                    this.currentSelectionBounds = {
-                        start,
-                        end
-                    };
-                }
-            }));
         }));
         movementStore.add(addDisposableListener(doc, "mouseup", () => {
-            movementStore.dispose();
+            this.currentSelectionMovementDisposable.clear();
             this.teardownDragAndDropScrollTopAnimation();
             if (doc.getSelection()?.isCollapsed !== false) {
-                selectionStore.dispose();
+                this.currentSelectionDisposable.clear();
             }
         }));
+        return movementStore;
     }
     getIndexOfListElement(element) {
         if (!element || !this.domNode.contains(element)) {
@@ -1233,9 +1274,10 @@ class ListView {
         return undefined;
     }
     getVisibleRange(renderTop, renderHeight) {
+        const start = this.rangeMap.indexAt(renderTop);
         return {
-            start: this.rangeMap.indexAt(renderTop),
-            end: this.rangeMap.indexAfter(renderTop + renderHeight - 1)
+            start,
+            end: Math.max(start, this.rangeMap.indexAfter(renderTop + renderHeight - 1))
         };
     }
     getRenderRange(renderTop, renderHeight) {
@@ -1248,59 +1290,102 @@ class ListView {
         return range;
     }
     _rerender(renderTop, renderHeight, inSmoothScrolling) {
-        const previousRenderRange = this.getRenderRange(renderTop, renderHeight);
+        let previousRenderRange = this.getRenderRange(renderTop, renderHeight);
+        const retainedMeasurements = ( new Map());
         let anchorElementIndex;
         let anchorElementTopDelta;
-        if (renderTop === this.elementTop(previousRenderRange.start)) {
-            anchorElementIndex = previousRenderRange.start;
-            anchorElementTopDelta = 0;
-        } else if (previousRenderRange.end - previousRenderRange.start > 1) {
-            anchorElementIndex = previousRenderRange.start + 1;
-            anchorElementTopDelta = this.elementTop(anchorElementIndex) - renderTop;
-        }
-        let heightDiff = 0;
-        while (true) {
-            const renderRange = this.getRenderRange(renderTop, renderHeight);
-            let didChange = false;
-            for (let i = renderRange.start; i < renderRange.end; i++) {
-                const diff = this.probeDynamicHeight(i);
-                if (diff !== 0) {
-                    this.rangeMap.splice(i, 1, [this.items[i]]);
-                }
-                heightDiff += diff;
-                didChange = didChange || diff !== 0;
+        const updateAnchorElement = () => {
+            anchorElementIndex = undefined;
+            anchorElementTopDelta = undefined;
+            if (renderTop === this.elementTop(previousRenderRange.start)) {
+                anchorElementIndex = previousRenderRange.start;
+                anchorElementTopDelta = 0;
+            } else if (previousRenderRange.end - previousRenderRange.start > 1) {
+                anchorElementIndex = previousRenderRange.start + 1;
+                anchorElementTopDelta = this.elementTop(anchorElementIndex) - renderTop;
             }
-            if (!didChange) {
-                if (heightDiff !== 0) {
-                    this.eventuallyUpdateScrollDimensions();
-                }
-                const unrenderRanges = Range.relativeComplement(previousRenderRange, renderRange);
-                for (const range of unrenderRanges) {
-                    for (let i = range.start; i < range.end; i++) {
-                        if (this.items[i].row) {
-                            this.removeItemFromDOM(i);
+        };
+        updateAnchorElement();
+        let heightDiff = 0;
+        try {
+            while (true) {
+                const renderRange = this.getRenderRange(renderTop, renderHeight);
+                let didChange = false;
+                const probedItems = this.items.slice(renderRange.start, renderRange.end);
+                const dynamicHeightDiffs = this.probeDynamicHeights(renderRange, retainedMeasurements);
+                const modelDidChange = this.items.length < renderRange.end || ( probedItems.some((item, index) => item !== this.items[renderRange.start + index]));
+                if (modelDidChange) {
+                    for (let index = 0; index < probedItems.length; index++) {
+                        const diff = dynamicHeightDiffs[index];
+                        const currentIndex = this.items.indexOf(probedItems[index]);
+                        if (diff !== 0 && currentIndex !== -1) {
+                            this.rangeMap.splice(currentIndex, 1, [probedItems[index]]);
+                            heightDiff += diff;
                         }
                     }
-                }
-                const renderRanges = Range.relativeComplement(renderRange, previousRenderRange).reverse();
-                for (const range of renderRanges) {
-                    for (let i = range.end - 1; i >= range.start; i--) {
-                        this.insertItemInDOM(i);
-                    }
+                    this.disposeDynamicHeightMeasurements(retainedMeasurements);
+                    previousRenderRange = this.getRenderRange(renderTop, renderHeight);
+                    updateAnchorElement();
+                    continue;
                 }
                 for (let i = renderRange.start; i < renderRange.end; i++) {
-                    if (this.items[i].row) {
-                        this.updateItemInDOM(this.items[i], i);
+                    const diff = dynamicHeightDiffs[i - renderRange.start];
+                    if (diff !== 0) {
+                        this.rangeMap.splice(i, 1, [this.items[i]]);
                     }
+                    heightDiff += diff;
+                    didChange = didChange || diff !== 0;
                 }
-                if (typeof anchorElementIndex === "number") {
-                    const deltaScrollTop = this.scrollable.getFutureScrollPosition().scrollTop - renderTop;
-                    const newScrollTop = this.elementTop(anchorElementIndex) - anchorElementTopDelta + deltaScrollTop;
-                    this.setScrollTop(newScrollTop, inSmoothScrolling);
+                if (!didChange) {
+                    if (heightDiff !== 0) {
+                        this.eventuallyUpdateScrollDimensions();
+                    }
+                    const unrenderRanges = Range.relativeComplement(previousRenderRange, renderRange);
+                    for (const range of unrenderRanges) {
+                        for (let i = range.start; i < range.end; i++) {
+                            if (this.items[i].row) {
+                                this.removeItemFromDOM(i);
+                            }
+                        }
+                    }
+                    const insertedItems = [];
+                    for (let i = renderRange.end - 1; i >= renderRange.start; i--) {
+                        const item = this.items[i];
+                        if (!item.row) {
+                            const measurement = retainedMeasurements.get(i);
+                            const canPromoteMeasurement = measurement?.item === item && measurement.item.templateId === item.templateId;
+                            if (canPromoteMeasurement) {
+                                retainedMeasurements.delete(i);
+                            }
+                            this.insertItemInDOM(
+                                i,
+                                canPromoteMeasurement ? measurement.row : undefined,
+                                canPromoteMeasurement
+                            );
+                            insertedItems.push(item);
+                        }
+                    }
+                    this.disposeDynamicHeightMeasurements(retainedMeasurements);
+                    if (this.horizontalScrolling && insertedItems.length > 0) {
+                        this.measureItemWidths(insertedItems);
+                        this.eventuallyUpdateScrollWidth();
+                    }
+                    for (let i = renderRange.start; i < renderRange.end; i++) {
+                        if (this.items[i].row) {
+                            this.updateItemInDOM(this.items[i], i);
+                        }
+                    }
+                    if (typeof anchorElementIndex === "number") {
+                        const deltaScrollTop = this.scrollable.getFutureScrollPosition().scrollTop - renderTop;
+                        const newScrollTop = this.elementTop(anchorElementIndex) - anchorElementTopDelta + deltaScrollTop;
+                        this.setScrollTop(newScrollTop, inSmoothScrolling);
+                    }
+                    this._onDidChangeContentHeight.fire(this.contentHeight);
+                    return;
                 }
-                this._onDidChangeContentHeight.fire(this.contentHeight);
-                return;
             }
+        } finally {
+            this.disposeDynamicHeightMeasurements(retainedMeasurements);
         }
     }
     probeDynamicHeight(index) {
@@ -1308,20 +1393,11 @@ class ListView {
         return this.probeDynamicHeightForItem(item, index);
     }
     probeDynamicHeightForItem(item, index) {
-        if (!!this.virtualDelegate.getDynamicHeight) {
-            const newSize = this.virtualDelegate.getDynamicHeight(item.element);
-            if (newSize !== null) {
-                const size = item.size;
-                item.size = newSize;
-                item.lastDynamicHeightWidth = this.renderWidth;
-                this.publishDynamicHeight(item);
-                return newSize - size;
-            }
+        const delegateHeightDiff = this.probeDynamicHeightFromDelegate(item);
+        if (delegateHeightDiff !== undefined) {
+            return delegateHeightDiff;
         }
-        if (!item.hasDynamicHeight || item.lastDynamicHeightWidth === this.renderWidth) {
-            return 0;
-        }
-        if (!!this.virtualDelegate.hasDynamicHeight && !this.virtualDelegate.hasDynamicHeight(item.element)) {
+        if (!this.shouldProbeDynamicHeight(item)) {
             return 0;
         }
         const size = item.size;
@@ -1363,6 +1439,119 @@ class ListView {
         this.cache.release(row);
         return item.size - size;
     }
+    probeDynamicHeights(range, retainedMeasurements) {
+        const diffs = ( new Array(range.end - range.start)).fill(0);
+        const measurements = [];
+        for (let index = range.start; index < range.end; index++) {
+            const item = this.items[index];
+            const delegateHeightDiff = this.probeDynamicHeightFromDelegate(item);
+            if (delegateHeightDiff !== undefined) {
+                diffs[index - range.start] = delegateHeightDiff;
+                continue;
+            }
+            if (!this.shouldProbeDynamicHeight(item) || ( retainedMeasurements.has(index))) {
+                continue;
+            }
+            if (item.row) {
+                item.row.domNode.style.height = "";
+                measurements.push({
+                    item,
+                    index,
+                    previousSize: item.size,
+                    row: item.row,
+                    rendered: true
+                });
+                continue;
+            }
+            const {
+                row
+            } = this.cache.alloc(item.templateId);
+            const measurement = {
+                item,
+                index,
+                previousSize: item.size,
+                row,
+                rendered: false
+            };
+            retainedMeasurements.set(index, measurement);
+            measurements.push(measurement);
+            row.domNode.style.height = "";
+            this.rowsContainer.appendChild(row.domNode);
+            const renderer = this.renderers.get(item.templateId);
+            if (!renderer) {
+                throw ( new BugIndicatingError("Missing renderer for templateId: " + item.templateId));
+            }
+            measurement.rendered = true;
+            renderer.renderElement(item.element, index, row.templateData, {
+                height: item.size
+            });
+        }
+        for (const measurement of measurements) {
+            measurement.item.size = measurement.row.domNode.offsetHeight;
+        }
+        for (const measurement of measurements) {
+            const {
+                item,
+                index,
+                previousSize,
+                row
+            } = measurement;
+            if (item.size === 0) {
+                if (!isAncestor(row.domNode, getWindow(row.domNode).document.body)) {
+                    console.warn(
+                        "Measuring item node that is not in DOM! Add ListView to the DOM before measuring row height!",
+                        ( new Error()).stack
+                    );
+                } else {
+                    console.warn(
+                        "Measured item node at 0px- ensure that ListView is not display:none before measuring row height!",
+                        ( new Error()).stack
+                    );
+                }
+            }
+            item.lastDynamicHeightWidth = this.renderWidth;
+            this.publishDynamicHeight(item);
+            diffs[index - range.start] = item.size - previousSize;
+        }
+        return diffs;
+    }
+    disposeDynamicHeightMeasurements(measurements) {
+        for (const [measurementIndex, {
+            item,
+            index,
+            row,
+            rendered
+        }] of measurements) {
+            measurements.delete(measurementIndex);
+            try {
+                if (rendered) {
+                    this.renderers.get(item.templateId)?.disposeElement?.(item.element, index, row.templateData, {
+                        height: item.size
+                    });
+                }
+            } finally {
+                row.domNode.remove();
+                this.cache.release(row);
+            }
+        }
+    }
+    probeDynamicHeightFromDelegate(item) {
+        const newSize = this.virtualDelegate.getDynamicHeight?.(item.element);
+        if (newSize === undefined || newSize === null) {
+            return undefined;
+        }
+        const size = item.size;
+        item.size = newSize;
+        item.lastDynamicHeightWidth = this.renderWidth;
+        this.publishDynamicHeight(item);
+        return newSize - size;
+    }
+    shouldProbeDynamicHeight(item) {
+        if (!item.hasDynamicHeight || item.lastDynamicHeightWidth === this.renderWidth) {
+            return false;
+        }
+        return !this.virtualDelegate.hasDynamicHeight || this.virtualDelegate.hasDynamicHeight(item.element);
+    }
     publishDynamicHeight(item) {
         if (item.size > 0) {
             this.virtualDelegate.setDynamicHeight?.(item.element, item.size);
@@ -1372,6 +1561,7 @@ class ListView {
         return `${this.domId}_${index}`;
     }
     dispose() {
+        this.currentSelectionDisposable.clear();
         for (const item of this.items) {
             item.dragStartDisposable.dispose();
             item.checkedDisposable.dispose();

package/vscode/src/vs/base/browser/ui/list/listWidget.d.ts

@@ -265,6 +265,7 @@ export declare class List<T> implements ISpliceable<T>, IDisposable {
     getScrollableElement(): HTMLElement;
     getElementID(index: number): string;
     getElementTop(index: number): number;
+    getElementHeight(index: number): number;
     style(styles: IListStyles): void;
     delegateScrollFromMouseWheelEvent(browserEvent: IMouseWheelEvent): void;
     private toListEvent;

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -1245,6 +1245,7 @@ class List {
         this.disposables.add(this.mouseController);
         this.onDidChangeFocus(this._onFocusChange, this, this.disposables);
         this.onDidChangeSelection(this._onSelectionChange, this, this.disposables);
+        this.view.onDidScroll(this.onDidChangeActiveDescendant, this, this.disposables);
         if (this.accessibilityProvider) {
             const ariaLabel = this.accessibilityProvider.getWidgetAriaLabel();
             const observable = (ariaLabel && typeof ariaLabel !== "string") ? ariaLabel : constObservable(ariaLabel);
@@ -1608,6 +1609,9 @@ class List {
     getElementTop(index) {
         return this.view.elementTop(index);
     }
+    getElementHeight(index) {
+        return this.view.elementHeight(index);
+    }
     style(styles) {
         this.styleController.style(styles);
     }
@@ -1634,11 +1638,19 @@ class List {
     onDidChangeActiveDescendant() {
         const focus = this.focus.get();
         if (focus.length > 0) {
+            const index = focus[0];
             let id;
             if (this.accessibilityProvider?.getActiveDescendantId) {
-                id = this.accessibilityProvider.getActiveDescendantId(this.view.element(focus[0]));
+                id = this.accessibilityProvider.getActiveDescendantId(this.view.element(index));
+            }
+            if (!id && this.view.domElement(index)) {
+                id = this.view.getElementDomId(index);
+            }
+            if (id) {
+                this.view.domNode.setAttribute("aria-activedescendant", id);
+            } else {
+                this.view.domNode.removeAttribute("aria-activedescendant");
             }
-            this.view.domNode.setAttribute("aria-activedescendant", id || this.view.getElementDomId(focus[0]));
         } else {
             this.view.domNode.removeAttribute("aria-activedescendant");
         }