diff --git a/packages/compass-components/src/components/virtual-list.tsx b/packages/compass-components/src/components/virtual-list.tsx index e2f4be633d5..cd86fffcdce 100644 --- a/packages/compass-components/src/components/virtual-list.tsx +++ b/packages/compass-components/src/components/virtual-list.tsx @@ -45,7 +45,7 @@ export type VirtualListProps = { * after first render, starts monitoring the actual height but it is still * super useful to avoid a huge flicker during the initial rendering phase */ - estimateItemInitialHeight(item: T): number; + estimateItemInitialHeight(item: T, index: number): number; /** * How many items to keep rendered outside of the visible viewport. Keeping @@ -116,11 +116,9 @@ export type VirtualListProps = { __TEST_LIST_HEIGHT?: number; /** - * WARNING: Use only when testing - * * Mutable Ref object to hold the reference to the VariableSizeList */ - __TEST_LIST_REF?: VirtualListRef; + listRef?: VirtualListRef; }; const flexContainerStyles = css({ @@ -147,12 +145,12 @@ export function VirtualList({ itemDataTestId, initialScrollTop, scrollableContainerRef, + listRef: _listRef, __TEST_LIST_WIDTH = 1024, __TEST_LIST_HEIGHT = 768, - __TEST_LIST_REF, }: VirtualListProps) { const listRef = useRef(null); - const inUseListRef = __TEST_LIST_REF ?? listRef; + const inUseListRef = _listRef ?? listRef; const { observer, estimatedItemSize, getItemSize } = useVirtualListItemObserver({ listRef: inUseListRef, diff --git a/packages/compass-components/src/hooks/use-virtual-list-item-observer.ts b/packages/compass-components/src/hooks/use-virtual-list-item-observer.ts index 105aca550c3..be16d1150c1 100644 --- a/packages/compass-components/src/hooks/use-virtual-list-item-observer.ts +++ b/packages/compass-components/src/hooks/use-virtual-list-item-observer.ts @@ -1,12 +1,13 @@ import { isEqual } from 'lodash'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { type VariableSizeList } from 'react-window'; +import type { VirtualListProps } from '../components/virtual-list'; -export type VirtualListItemObserverParams = { +export type VirtualListItemObserverParams = Pick< + VirtualListProps, + 'items' | 'rowGap' | 'estimateItemInitialHeight' +> & { listRef: React.RefObject; - items: T[]; - rowGap?: number; - estimateItemInitialHeight(item: T): number; }; export type ListItemObserver = { @@ -103,7 +104,7 @@ export const useVirtualListItemObserver = ({ // page changes) in which case we won't have their heights in our state // hence we fallback to estimating initial document heights. const itemHeight = - itemsHeights[idx] ?? estimateItemInitialHeight(items[idx]); + itemsHeights[idx] ?? estimateItemInitialHeight(items[idx], idx); if (rowGap !== undefined && idx !== items.length - 1) { return itemHeight + rowGap; } diff --git a/packages/compass-crud/src/components/virtualized-document-json-view.spec.tsx b/packages/compass-crud/src/components/virtualized-document-json-view.spec.tsx index 37672979171..9758998965c 100644 --- a/packages/compass-crud/src/components/virtualized-document-json-view.spec.tsx +++ b/packages/compass-crud/src/components/virtualized-document-json-view.spec.tsx @@ -90,9 +90,9 @@ describe('VirtualizedDocumentJsonView', function () { namespace="x.y" docs={bigDocuments} isEditable={true} + listRef={listRef} __TEST_OVERSCAN_COUNT={0} __TEST_LIST_HEIGHT={178} - __TEST_LIST_REF={listRef} /> ); @@ -183,9 +183,9 @@ describe('VirtualizedDocumentJsonView', function () { namespace="x.y" docs={bigDocuments} isEditable={true} + listRef={listRef} __TEST_OVERSCAN_COUNT={0} __TEST_LIST_HEIGHT={178} - __TEST_LIST_REF={listRef} /> ); diff --git a/packages/compass-crud/src/components/virtualized-document-json-view.tsx b/packages/compass-crud/src/components/virtualized-document-json-view.tsx index 2d0f104b06f..8cffcf8f26f 100644 --- a/packages/compass-crud/src/components/virtualized-document-json-view.tsx +++ b/packages/compass-crud/src/components/virtualized-document-json-view.tsx @@ -42,9 +42,9 @@ export type VirtualizedDocumentJsonViewProps = { initialScrollTop?: number; scrollTriggerRef?: React.Ref; scrollableContainerRef?: React.Ref; + listRef?: VirtualListRef; __TEST_OVERSCAN_COUNT?: number; __TEST_LIST_HEIGHT?: number; - __TEST_LIST_REF?: VirtualListRef; } & Pick< JSONEditorProps, | 'isTimeSeries' @@ -72,7 +72,7 @@ const VirtualizedDocumentJsonView: React.FC< openInsertDocumentDialog, __TEST_OVERSCAN_COUNT, __TEST_LIST_HEIGHT, - __TEST_LIST_REF, + listRef, }) => { const renderItem: VirtualListItemRenderer = useCallback( (doc, docRef, docIndex) => { @@ -120,8 +120,8 @@ const VirtualizedDocumentJsonView: React.FC< listOuterContainerClassName={spacingStyles} initialScrollTop={initialScrollTop} scrollableContainerRef={scrollableContainerRef} + listRef={listRef} __TEST_LIST_HEIGHT={__TEST_LIST_HEIGHT} - __TEST_LIST_REF={__TEST_LIST_REF} > ); }; diff --git a/packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx b/packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx index cdbb368efc1..a9d291f6479 100644 --- a/packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx +++ b/packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx @@ -95,9 +95,9 @@ describe('VirtualizedDocumentListView', function () { ); diff --git a/packages/compass-crud/src/components/virtualized-document-list-view.tsx b/packages/compass-crud/src/components/virtualized-document-list-view.tsx index 603ee192f78..5ddfa237fb4 100644 --- a/packages/compass-crud/src/components/virtualized-document-list-view.tsx +++ b/packages/compass-crud/src/components/virtualized-document-list-view.tsx @@ -47,9 +47,9 @@ type VirtualizedDocumentListViewProps = { initialScrollTop?: number; scrollTriggerRef?: React.Ref; scrollableContainerRef?: React.Ref; + listRef?: VirtualListRef; __TEST_OVERSCAN_COUNT?: number; __TEST_LIST_HEIGHT?: number; - __TEST_LIST_REF?: VirtualListRef; } & Pick< DocumentProps, | 'isTimeSeries' @@ -74,9 +74,9 @@ const VirtualizedDocumentListView: React.FC< replaceDocument, updateDocument, openInsertDocumentDialog, + listRef, __TEST_OVERSCAN_COUNT, __TEST_LIST_HEIGHT, - __TEST_LIST_REF, }) => { const docs = useMemo(() => { return _docs.map((_doc) => { @@ -131,9 +131,9 @@ const VirtualizedDocumentListView: React.FC< listOuterContainerClassName={spacingStyles} initialScrollTop={initialScrollTop} scrollableContainerRef={scrollableContainerRef} + listRef={listRef} overScanCount={__TEST_OVERSCAN_COUNT} __TEST_LIST_HEIGHT={__TEST_LIST_HEIGHT} - __TEST_LIST_REF={__TEST_LIST_REF} > ); };