@react-spectrum/list 3.0.0-beta.0 → 3.0.0-nightly-4980928d3-240906

package/src/ListView.tsx

@@ -9,42 +9,70 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+
+import {AriaGridListProps, useGridList} from '@react-aria/gridlist';
+import {AsyncLoadable, DOMRef, Key, LoadingState, Node, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, LoadingState} from '@react-types/shared';
+import type {DragAndDropHooks} from '@react-spectrum/dnd';
 import type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd';
-import {DragHooks, DropHooks} from '@react-spectrum/dnd';
 import type {DroppableCollectionResult} from '@react-aria/dnd';
-import {filterDOMProps, useLayoutEffect} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {FocusRing, FocusScope} from '@react-aria/focus';
 import InsertionIndicator from './InsertionIndicator';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {ListLayout} from '@react-stately/layout';
+import {ListKeyboardDelegate} from '@react-aria/selection';
 import {ListState, useListState} from '@react-stately/list';
 import listStyles from './styles.css';
 import {ListViewItem} from './ListViewItem';
-import {mergeProps} from '@react-aria/utils';
+import {ListViewLayout} from './ListViewLayout';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {Key, ReactElement, useContext, useMemo, useRef, useState} from 'react';
-import {Rect} from '@react-stately/virtualizer';
+import React, {JSX, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import RootDropIndicator from './RootDropIndicator';
 import {DragPreview as SpectrumDragPreview} from './DragPreview';
-import {SpectrumListProps} from '@react-types/list';
-import {useCollator, useMessageFormatter} from '@react-aria/i18n';
-import {useList} from '@react-aria/list';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProvider} from '@react-spectrum/provider';
 import {Virtualizer} from '@react-aria/virtualizer';
 
+export interface SpectrumListViewProps<T> extends Omit<AriaGridListProps<T>, 'keyboardNavigationBehavior'>, StyleProps, SpectrumSelectionProps, Omit<AsyncLoadable, 'isLoading'> {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * @default 'regular'
+   */
+  density?: 'compact' | 'regular' | 'spacious',
+  /** Whether the ListView should be displayed with a quiet style. */
+  isQuiet?: boolean,
+  /** The current loading state of the ListView. Determines whether or not the progress circle should be shown. */
+  loadingState?: LoadingState,
+  /**
+   * Sets the text behavior for the row contents.
+   * @default 'truncate'
+   */
+  overflowMode?: 'truncate' | 'wrap',
+  /** Sets what the ListView should render when there is no content to display. */
+  renderEmptyState?: () => JSX.Element,
+  /**
+   * Handler that is called when a user performs an action on an item. The exact user event depends on
+   * the collection's `selectionStyle` prop and the interaction modality.
+   */
+  onAction?: (key: Key) => void,
+  /**
+   * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListView.
+   */
+  dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
+}
+
 interface ListViewContextValue<T> {
   state: ListState<T>,
   dragState: DraggableCollectionState,
   dropState: DroppableCollectionState,
-  dragHooks: DragHooks,
-  dropHooks: DropHooks,
+  dragAndDropHooks: DragAndDropHooks['dragAndDropHooks'],
   onAction:(key: Key) => void,
   isListDraggable: boolean,
   isListDroppable: boolean,
-  layout: ListLayout<T>,
-  loadingState: LoadingState
+  layout: ListViewLayout<T>,
+  loadingState: LoadingState,
+  renderEmptyState?: () => JSX.Element
 }
 
 export const ListViewContext = React.createContext<ListViewContextValue<unknown>>(null);
@@ -64,156 +92,115 @@ const ROW_HEIGHTS = {
   }
 };
 
-function useListLayout<T>(state: ListState<T>, density: SpectrumListProps<T>['density'], overflowMode: SpectrumListProps<T>['overflowMode']) {
+function useListLayout<T>(state: ListState<T>, density: SpectrumListViewProps<T>['density'], overflowMode: SpectrumListViewProps<T>['overflowMode']) {
   let {scale} = useProvider();
-  let collator = useCollator({usage: 'search', sensitivity: 'base'});
-  let isEmpty = state.collection.size === 0;
   let layout = useMemo(() =>
-    new ListLayout<T>({
-      estimatedRowHeight: ROW_HEIGHTS[density][scale],
-      padding: 0,
-      collator,
-      loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale]
+    new ListViewLayout<T>({
+      estimatedRowHeight: ROW_HEIGHTS[density][scale]
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    , [collator, scale, density, isEmpty, overflowMode]);
+    , [scale, density, overflowMode]);
 
-  layout.collection = state.collection;
-  layout.disabledKeys = state.disabledKeys;
   return layout;
 }
 
-function ListView<T extends object>(props: SpectrumListProps<T>, ref: DOMRef<HTMLDivElement>) {
+function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {
     density = 'regular',
-    onLoadMore,
     loadingState,
+    onLoadMore,
     isQuiet,
     overflowMode = 'truncate',
     onAction,
-    dragHooks,
-    dropHooks,
+    dragAndDropHooks,
+    renderEmptyState,
     ...otherProps
   } = props;
-  let isListDraggable = !!dragHooks;
-  let isListDroppable = !!dropHooks;
+  let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
+  let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
   let dragHooksProvided = useRef(isListDraggable);
   let dropHooksProvided = useRef(isListDroppable);
-  if (dragHooksProvided.current !== isListDraggable) {
-    console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
-  }
-  if (dropHooksProvided.current !== isListDroppable) {
-    console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
-  }
+  useEffect(() => {
+    if (dragHooksProvided.current !== isListDraggable) {
+      console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
+    }
+    if (dropHooksProvided.current !== isListDroppable) {
+      console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
+    }
+  }, [isListDraggable, isListDroppable]);
+
   let domRef = useDOMRef(ref);
   let state = useListState({
     ...props,
     selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
   });
   let {collection, selectionManager} = state;
-  let formatMessage = useMessageFormatter(intlMessages);
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
 
   let {styleProps} = useStyleProps(props);
   let dragState: DraggableCollectionState;
   let preview = useRef(null);
   if (isListDraggable) {
-    dragState = dragHooks.useDraggableCollectionState({
+    dragState = dragAndDropHooks.useDraggableCollectionState({
       collection,
       selectionManager,
       preview
     });
+    dragAndDropHooks.useDraggableCollection({}, dragState, domRef);
   }
   let layout = useListLayout(
     state,
     props.density || 'regular',
     overflowMode
   );
-  // !!0 is false, so we can cast size or undefined and they'll be falsy
-  layout.allowDisabledKeyFocus = state.selectionManager.disabledBehavior === 'selection' || !!dragState?.draggingKeys.size;
-
 
-  let DragPreview = dragHooks?.DragPreview;
+  let DragPreview = dragAndDropHooks?.DragPreview;
   let dropState: DroppableCollectionState;
   let droppableCollection: DroppableCollectionResult;
   let isRootDropTarget: boolean;
   if (isListDroppable) {
-    dropState = dropHooks.useDroppableCollectionState({
+    dropState = dragAndDropHooks.useDroppableCollectionState({
       collection,
       selectionManager
     });
-    droppableCollection = dropHooks.useDroppableCollection({
-      keyboardDelegate: layout,
-      getDropTargetFromPoint(x, y) {
-        let closest = null;
-        let closestDistance = Infinity;
-        let closestDir = null;
-
-        x += domRef.current.scrollLeft;
-        y += domRef.current.scrollTop;
-
-        let visible = layout.getVisibleLayoutInfos(new Rect(x - 50, y - 50, x + 50, y + 50));
-
-        for (let layoutInfo of visible) {
-          let r = layoutInfo.rect;
-          let points: [number, number, string][] = [
-            [r.x, r.y + 4, 'before'],
-            [r.maxX, r.y + 4, 'before'],
-            [r.x, r.maxY - 8, 'after'],
-            [r.maxX, r.maxY - 8, 'after']
-          ];
-
-          for (let [px, py, dir] of points) {
-            let dx = px - x;
-            let dy = py - y;
-            let d = dx * dx + dy * dy;
-            if (d < closestDistance) {
-              closestDistance = d;
-              closest = layoutInfo;
-              closestDir = dir;
-            }
-          }
-
-          // TODO: Best way to implement only for when closest can be dropped on
-          // TODO: Figure out the typescript for this
-          // @ts-ignore
-          if (y >= r.y + 10 && y <= r.maxY - 10 && collection.getItem(closest.key).value.type === 'folder') {
-            closestDir = 'on';
-          }
-        }
-
-        let key = closest?.key;
-        if (key) {
-          return {
-            type: 'item',
-            key,
-            dropPosition: closestDir
-          };
-        }
-      }
+    droppableCollection = dragAndDropHooks.useDroppableCollection({
+      keyboardDelegate: new ListKeyboardDelegate({
+        collection,
+        disabledKeys: dragState?.draggingKeys.size ? null : selectionManager.disabledKeys,
+        ref: domRef,
+        layoutDelegate: layout
+      }),
+      dropTargetDelegate: layout
     }, dropState, domRef);
 
     isRootDropTarget = dropState.isDropTarget({type: 'root'});
   }
 
-  let {gridProps} = useList({
+  let {gridProps} = useGridList({
     ...props,
     isVirtualized: true,
-    keyboardDelegate: layout,
+    layoutDelegate: layout,
     onAction
   }, state, domRef);
 
-  // Sync loading state into the layout.
-  layout.isLoading = isLoading;
-
   let focusedKey = selectionManager.focusedKey;
+  let dropTargetKey: Key | null = null;
   if (dropState?.target?.type === 'item') {
-    focusedKey = dropState.target.key;
+    dropTargetKey = dropState.target.key;
+    if (dropState.target.dropPosition === 'after') {
+      // Normalize to the "before" drop position since we only render those in the DOM.
+      dropTargetKey = state.collection.getKeyAfter(dropTargetKey) ?? dropTargetKey;
+    }
   }
 
+  let persistedKeys = useMemo(() => {
+    return new Set([focusedKey, dropTargetKey].filter(k => k !== null));
+  }, [focusedKey, dropTargetKey]);
+
   // wait for layout to get accurate measurements
   let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);
   let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(() => {
     if (domRef.current) {
       // 2 is the width of the border which is not part of the box size
@@ -225,90 +212,63 @@ function ListView<T extends object>(props: SpectrumListProps<T>, ref: DOMRef<HTM
   let hasAnyChildren = useMemo(() => [...collection].some(item => item.hasChildNodes), [collection]);
 
   return (
-    <ListViewContext.Provider value={{state, dragState, dropState, dragHooks, dropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState}}>
-      <Virtualizer
-        {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}
-        {...filterDOMProps(otherProps)}
-        {...gridProps}
-        {...styleProps}
-        isLoading={isLoading}
-        onLoadMore={onLoadMore}
-        ref={domRef}
-        focusedKey={focusedKey}
-        scrollDirection="vertical"
-        className={
-          classNames(
-            listStyles,
-            'react-spectrum-ListView',
-            `react-spectrum-ListView--${density}`,
-            'react-spectrum-ListView--emphasized',
-            {
-              'react-spectrum-ListView--quiet': isQuiet,
-              'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',
-              'react-spectrum-ListView--draggable': !!isListDraggable,
-              'react-spectrum-ListView--dropTarget': !!isRootDropTarget,
-              'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
-              'react-spectrum-ListView--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible,
-              'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,
-              'react-spectrum-ListView--wrap': overflowMode === 'wrap'
-            },
-            styleProps.className
-          )
-        }
-        layout={layout}
-        collection={collection}
-        transitionDuration={isLoading ? 160 : 220}>
-        {(type, item) => {
-          if (type === 'item') {
-            return (
-              <>
-                {isListDroppable && collection.getKeyBefore(item.key) == null &&
-                  <RootDropIndicator key="root" />
-                }
-                {isListDroppable &&
-                  <InsertionIndicator
-                    key={`${item.key}-before`}
-                    target={{key: item.key, type: 'item', dropPosition: 'before'}} />
-                }
-                <ListViewItem item={item} isEmphasized hasActions={!!onAction} />
-                {isListDroppable &&
-                  <InsertionIndicator
-                    key={`${item.key}-after`}
-                    target={{key: item.key, type: 'item', dropPosition: 'after'}}
-                    isPresentationOnly={collection.getKeyAfter(item.key) != null} />
-                  }
-              </>
-            );
-          } else if (type === 'loader') {
-            return (
-              <CenteredWrapper>
-                <ProgressCircle
-                  isIndeterminate
-                  aria-label={collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />
-              </CenteredWrapper>
-            );
-          } else if (type === 'placeholder') {
-            let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-            if (emptyState == null) {
-              return null;
+    <ListViewContext.Provider value={{state, dragState, dropState, dragAndDropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState, renderEmptyState}}>
+      <FocusScope>
+        <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
+          <Virtualizer
+            {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}
+            {...filterDOMProps(otherProps)}
+            {...gridProps}
+            {...styleProps}
+            isLoading={isLoading}
+            onLoadMore={onLoadMore}
+            ref={domRef}
+            persistedKeys={persistedKeys}
+            scrollDirection="vertical"
+            className={
+              classNames(
+                listStyles,
+                'react-spectrum-ListView',
+                `react-spectrum-ListView--${density}`,
+                'react-spectrum-ListView--emphasized',
+                {
+                  'react-spectrum-ListView--quiet': isQuiet,
+                  'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',
+                  'react-spectrum-ListView--draggable': !!isListDraggable,
+                  'react-spectrum-ListView--dropTarget': !!isRootDropTarget,
+                  'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
+                  'react-spectrum-ListView--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible,
+                  'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,
+                  'react-spectrum-ListView--wrap': overflowMode === 'wrap'
+                },
+                styleProps.className
+              )
             }
-
-            return (
-              <CenteredWrapper>
-                {emptyState}
-              </CenteredWrapper>
-            );
-          }
-
-        }}
-      </Virtualizer>
+            layout={layout}
+            layoutOptions={useMemo(() => ({isLoading}), [isLoading])}
+            collection={collection}>
+            {useCallback((type, item) => {
+              if (type === 'item') {
+                return <Item item={item} />;
+              } else if (type === 'loader') {
+                return <LoadingView />;
+              } else if (type === 'placeholder') {
+                return <EmptyState />;
+              }
+            }, [])}
+          </Virtualizer>
+        </FocusRing>
+      </FocusScope>
       {DragPreview && isListDraggable &&
         <DragPreview ref={preview}>
           {() => {
+            if (dragAndDropHooks.renderPreview) {
+              return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
+            }
             let item = state.collection.getItem(dragState.draggedKey);
             let itemCount = dragState.draggingKeys.size;
             let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
-            return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight}  />;
+            return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density}  />;
           }}
         </DragPreview>
       }
@@ -316,6 +276,55 @@ function ListView<T extends object>(props: SpectrumListProps<T>, ref: DOMRef<HTM
   );
 }
 
+function Item({item}: {item: Node<unknown>}) {
+  let {isListDroppable, state, onAction} = useContext(ListViewContext);
+  return (
+    <>
+      {isListDroppable && state.collection.getKeyBefore(item.key) == null &&
+        <RootDropIndicator key="root" />
+      }
+      {isListDroppable &&
+        <InsertionIndicator
+          key={`${item.key}-before`}
+          target={{key: item.key, type: 'item', dropPosition: 'before'}} />
+      }
+      <ListViewItem item={item} isEmphasized hasActions={!!onAction} />
+      {isListDroppable &&
+        <InsertionIndicator
+          key={`${item.key}-after`}
+          target={{key: item.key, type: 'item', dropPosition: 'after'}}
+          isPresentationOnly={state.collection.getKeyAfter(item.key) != null} />
+      }
+    </>
+  );
+}
+
+function LoadingView() {
+  let {state} = useContext(ListViewContext);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/list');
+  return (
+    <CenteredWrapper>
+      <ProgressCircle
+        isIndeterminate
+        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
+    </CenteredWrapper>
+  );
+}
+
+function EmptyState() {
+  let {renderEmptyState} = useContext(ListViewContext);
+  let emptyState = renderEmptyState ? renderEmptyState() : null;
+  if (emptyState == null) {
+    return null;
+  }
+
+  return (
+    <CenteredWrapper>
+      {emptyState}
+    </CenteredWrapper>
+  );
+}
+
 function CenteredWrapper({children}) {
   let {state} = useContext(ListViewContext);
   return (
@@ -338,7 +347,7 @@ function CenteredWrapper({children}) {
 }
 
 /**
- * Lists display a linear collection of data. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+ * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
  */
-const _ListView = React.forwardRef(ListView) as <T>(props: SpectrumListProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+const _ListView = React.forwardRef(ListView) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 export {_ListView as ListView};

package/src/ListViewItem.tsx

@@ -27,7 +27,7 @@ import {Provider} from '@react-spectrum/provider';
 import React, {useContext, useRef} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useButton} from '@react-aria/button';
-import {useListItem, useListSelectionCheckbox} from '@react-aria/list';
+import {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';
 import {useLocale} from '@react-aria/i18n';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -42,9 +42,19 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     item,
     isEmphasized
   } = props;
-  let {state, dragState, dropState, isListDraggable, isListDroppable, layout, dragHooks, dropHooks, loadingState} = useContext(ListViewContext);
+  let {
+    state,
+    dragState,
+    dropState,
+    isListDraggable,
+    isListDroppable,
+    layout,
+    dragAndDropHooks,
+    loadingState
+  } = useContext(ListViewContext);
   let {direction} = useLocale();
-  let rowRef = useRef<HTMLDivElement>();
+  let rowRef = useRef<HTMLDivElement>(undefined);
+  let checkboxWrapperRef = useRef<HTMLDivElement>(undefined);
   let {
     isFocusVisible: isFocusVisibleWithin,
     focusProps: focusWithinProps
@@ -59,7 +69,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     isDisabled,
     allowsSelection,
     hasAction
-  } = useListItem({
+  } = useGridListItem({
     node: item,
     isVirtualized: true,
     shouldSelectOnPressUp: isListDraggable
@@ -67,13 +77,13 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   let isDroppable = isListDroppable && !isDisabled;
   let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});
 
-  let {checkboxProps} = useListSelectionCheckbox({key: item.key}, state);
+  let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);
   let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);
 
   let draggableItem: DraggableItemResult;
   if (isListDraggable) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    draggableItem = dragHooks.useDraggableItem({key: item.key}, dragState);
+    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
     if (isDisabled) {
       draggableItem = null;
     }
@@ -81,16 +91,15 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   let droppableItem: DroppableItemResult;
   let isDropTarget: boolean;
   let dropIndicator: DropIndicatorAria;
-  let dropIndicatorRef = useRef();
+  let dropIndicatorRef = useRef(undefined);
   if (isListDroppable) {
     let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;
     isDropTarget = dropState.isDropTarget(target);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    droppableItem = dropHooks.useDroppableItem({target}, dropState, rowRef);
-    dropIndicator = dropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
+    dropIndicator = dragAndDropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
   }
 
-  let dragButtonRef = React.useRef();
+  let dragButtonRef = React.useRef(undefined);
   let {buttonProps} = useButton({
     ...draggableItem?.dragButtonProps,
     elementType: 'div'
@@ -136,7 +145,10 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     dropProps,
     hoverProps,
     focusWithinProps,
-    focusProps
+    focusProps,
+    // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
+    // allowing for single swipe navigation between row drop indicator
+    dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}
   );
 
   let isFirstRow = item.prevKey == null;
@@ -146,7 +158,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   // with bottom border
   let isFlushWithContainerBottom = false;
   if (isLastRow && loadingState !== 'loadingMore') {
-    if (layout.getContentSize()?.height >= layout.virtualizer?.getVisibleRect().height) {
+    if (layout.getContentSize()?.height >= layout.virtualizer?.visibleRect.height) {
       isFlushWithContainerBottom = true;
     }
   }
@@ -226,7 +238,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
               }
             </div>
           }
-          {isDropTarget && !dropIndicator?.dropIndicatorProps['aria-hidden'] &&
+          {isListDroppable && !dropIndicator?.isHidden &&
             <div role="button" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />
           }
           <CSSTransition
@@ -238,8 +250,9 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
               exit: listStyles['react-spectrum-ListViewItem-checkbox--exit'],
               exitActive: listStyles['react-spectrum-ListViewItem-checkbox--exitActive']
             }}
-            timeout={160} >
-            <div className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>
+            timeout={160}
+            nodeRef={checkboxWrapperRef} >
+            <div ref={checkboxWrapperRef} className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>
               <Checkbox
                 {...checkboxProps}
                 UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
@@ -250,8 +263,8 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
             slots={{
               text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
               description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},
-              icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},
-              image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
+              illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},
+              image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},
               actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
               actionGroup: {
                 UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],