chore(compass-components): expose v-list listRef prop COMPASS-7567 (#6576)

expose listRef and itemIndex

Author: mabaasit

packages/compass-components/src/components/virtual-list.tsx

@@ -45,7 +45,7 @@ export type VirtualListProps<T> = {
    * 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<T> = {
   __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<T>({
   itemDataTestId,
   initialScrollTop,
   scrollableContainerRef,
+  listRef: _listRef,
   __TEST_LIST_WIDTH = 1024,
   __TEST_LIST_HEIGHT = 768,
-  __TEST_LIST_REF,
 }: VirtualListProps<T>) {
   const listRef = useRef<List | null>(null);
-  const inUseListRef = __TEST_LIST_REF ?? listRef;
+  const inUseListRef = _listRef ?? listRef;
   const { observer, estimatedItemSize, getItemSize } =
     useVirtualListItemObserver({
       listRef: inUseListRef,

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<T> = {
+export type VirtualListItemObserverParams<T> = Pick<
+  VirtualListProps<T>,
+  'items' | 'rowGap' | 'estimateItemInitialHeight'
+> & {
   listRef: React.RefObject<VariableSizeList>;
-  items: T[];
-  rowGap?: number;
-  estimateItemInitialHeight(item: T): number;
 };
 
 export type ListItemObserver = {
@@ -103,7 +104,7 @@ export const useVirtualListItemObserver = <T>({
       // 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;
       }

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}
       />
     );
 

packages/compass-crud/src/components/virtualized-document-json-view.tsx

@@ -42,9 +42,9 @@ export type VirtualizedDocumentJsonViewProps = {
   initialScrollTop?: number;
   scrollTriggerRef?: React.Ref<HTMLDivElement>;
   scrollableContainerRef?: React.Ref<HTMLDivElement>;
+  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<HadronDocument> = 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}
     ></VirtualList>
   );
 };

packages/compass-crud/src/components/virtualized-document-list-view.spec.tsx

@@ -95,9 +95,9 @@ describe('VirtualizedDocumentListView', function () {
       <VirtualizedDocumentListView
         docs={bigDocuments}
         isEditable={true}
+        listRef={listRef}
         __TEST_OVERSCAN_COUNT={0}
         __TEST_LIST_HEIGHT={178}
-        __TEST_LIST_REF={listRef}
       />
     );
 

packages/compass-crud/src/components/virtualized-document-list-view.tsx

@@ -47,9 +47,9 @@ type VirtualizedDocumentListViewProps = {
   initialScrollTop?: number;
   scrollTriggerRef?: React.Ref<HTMLDivElement>;
   scrollableContainerRef?: React.Ref<HTMLDivElement>;
+  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}
     ></VirtualList>
   );
 };