@react-spectrum/list 3.10.11 → 3.11.0

package/src/InsertionIndicator.tsx

@@ -1,46 +0,0 @@
-import {classNames} from '@react-spectrum/utils';
-import {ItemDropTarget} from '@react-types/shared';
-import listStyles from './styles.css';
-import {ListViewContext} from './ListView';
-import React, {JSX, useContext, useRef} from 'react';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-interface InsertionIndicatorProps {
-  target: ItemDropTarget,
-  isPresentationOnly?: boolean
-}
-
-export default function InsertionIndicator(props: InsertionIndicatorProps): JSX.Element | null {
-  let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;
-  const {target, isPresentationOnly} = props;
-
-  let ref = useRef<HTMLDivElement | null>(null);
-  let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(props, dropState!, ref);
-  let {visuallyHiddenProps} = useVisuallyHidden();
-
-  let isDropTarget = dropState!.isDropTarget(target);
-
-  if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
-    return null;
-  }
-
-  return (
-    <div role="row" aria-hidden={dropIndicatorProps['aria-hidden']}>
-      <div
-        role="gridcell"
-        aria-selected="false"
-        className={
-          classNames(
-            listStyles,
-            'react-spectrum-ListViewInsertionIndicator',
-            {
-              'react-spectrum-ListViewInsertionIndicator--dropTarget': isDropTarget
-            }
-          )}>
-        {!isPresentationOnly &&
-          <div {...visuallyHiddenProps} role="button" {...dropIndicatorProps} ref={ref} />
-        }
-      </div>
-    </div>
-  );
-}

package/src/ListView.tsx

@@ -1,356 +0,0 @@
-/*
- * Copyright 2021 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * 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 type {DragAndDropHooks} from '@react-spectrum/dnd';
-import type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd';
-import type {DroppableCollectionResult} from '@react-aria/dnd';
-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 {ListKeyboardDelegate} from '@react-aria/selection';
-import {ListState, useListState} from '@react-stately/list';
-import listStyles from './styles.css';
-import {ListViewItem} from './ListViewItem';
-import {ListViewLayout} from './ListViewLayout';
-import {ProgressCircle} from '@react-spectrum/progress';
-import React, {JSX, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import RootDropIndicator from './RootDropIndicator';
-import {DragPreview as SpectrumDragPreview} from './DragPreview';
-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<NoInfer<T>>['dragAndDropHooks']
-}
-
-interface ListViewContextValue<T> {
-  state: ListState<T>,
-  dragState: DraggableCollectionState | null,
-  dropState: DroppableCollectionState | null,
-  dragAndDropHooks?: DragAndDropHooks<T>['dragAndDropHooks'],
-  onAction?: (key: Key) => void,
-  isListDraggable: boolean,
-  isListDroppable: boolean,
-  layout: ListViewLayout<T>,
-  loadingState?: LoadingState,
-  renderEmptyState?: () => JSX.Element
-}
-
-export const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);
-
-const ROW_HEIGHTS = {
-  compact: {
-    medium: 32,
-    large: 40
-  },
-  regular: {
-    medium: 40,
-    large: 50
-  },
-  spacious: {
-    medium: 48,
-    large: 60
-  }
-};
-
-function useListLayout<T>(state: ListState<T>, density: SpectrumListViewProps<T>['density'], overflowMode: SpectrumListViewProps<T>['overflowMode']) {
-  let {scale} = useProvider();
-  let layout = useMemo(() =>
-    new ListViewLayout<T>({
-      estimatedRowHeight: ROW_HEIGHTS[density || 'regular'][scale]
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    , [scale, density, overflowMode]);
-
-  return layout;
-}
-
-/**
- * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
- */
-export const ListView = React.forwardRef(function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {
-    density = 'regular',
-    loadingState,
-    onLoadMore,
-    isQuiet,
-    overflowMode = 'truncate',
-    onAction,
-    dragAndDropHooks,
-    renderEmptyState,
-    ...otherProps
-  } = props;
-  let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
-  let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
-  let dragHooksProvided = useRef(isListDraggable);
-  let dropHooksProvided = useRef(isListDroppable);
-  useEffect(() => {
-    if (dragHooksProvided.current !== isListDraggable && process.env.NODE_ENV !== 'production') {
-      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 && process.env.NODE_ENV !== 'production') {
-      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 isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-
-  let {styleProps} = useStyleProps(props);
-  let dragState: DraggableCollectionState | null = null;
-  let preview = useRef(null);
-  if (isListDraggable && dragAndDropHooks) {
-    dragState = dragAndDropHooks.useDraggableCollectionState!({
-      collection,
-      selectionManager,
-      preview
-    });
-    dragAndDropHooks.useDraggableCollection!({}, dragState, domRef);
-  }
-  let layout = useListLayout(
-    state,
-    props.density || 'regular',
-    overflowMode
-  );
-
-  let DragPreview = dragAndDropHooks?.DragPreview;
-  let dropState: DroppableCollectionState | null = null;
-  let droppableCollection: DroppableCollectionResult | null = null;
-  let isRootDropTarget = false;
-  if (isListDroppable && dragAndDropHooks) {
-    dropState = dragAndDropHooks.useDroppableCollectionState!({
-      collection,
-      selectionManager
-    });
-    droppableCollection = dragAndDropHooks.useDroppableCollection!({
-      keyboardDelegate: new ListKeyboardDelegate({
-        collection,
-        disabledKeys: dragState?.draggingKeys.size ? undefined : selectionManager.disabledKeys,
-        ref: domRef,
-        layoutDelegate: layout
-      }),
-      dropTargetDelegate: layout
-    }, dropState, domRef);
-
-    isRootDropTarget = dropState.isDropTarget({type: 'root'});
-  }
-
-  let {gridProps} = useGridList({
-    ...props,
-    isVirtualized: true,
-    layoutDelegate: layout,
-    onAction
-  }, state, domRef);
-
-  let focusedKey = selectionManager.focusedKey;
-  let dropTargetKey: Key | null = null;
-  if (dropState?.target?.type === 'item') {
-    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
-      setVerticalScollbarVisible(domRef.current.clientWidth + 2 < domRef.current.offsetWidth);
-      setHorizontalScollbarVisible(domRef.current.clientHeight + 2 < domRef.current.offsetHeight);
-    }
-  });
-
-  let hasAnyChildren = useMemo(() => [...collection].some(item => item.hasChildNodes), [collection]);
-
-  return (
-    <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 : null, 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
-              )
-            }
-            layout={layout}
-            layoutOptions={useMemo(() => ({isLoading}), [isLoading])}
-            collection={collection}>
-            {useCallback((type, item: Node<T>) => {
-              if (type === 'item') {
-                return <Item item={item} />;
-              } else if (type === 'loader') {
-                return <LoadingView />;
-              } else if (type === 'placeholder') {
-                return <EmptyState />;
-              }
-            }, [])}
-          </Virtualizer>
-        </FocusRing>
-      </FocusScope>
-      {DragPreview && isListDraggable && dragAndDropHooks && dragState &&
-        <DragPreview ref={preview}>
-          {() => {
-            if (dragState.draggedKey == null) {
-              return null;
-            }
-            if (dragAndDropHooks.renderPreview) {
-              return dragAndDropHooks.renderPreview(dragState.draggingKeys, dragState.draggedKey);
-            }
-            let item = state.collection.getItem(dragState.draggedKey);
-            if (!item) {
-              return null;
-            }
-            let itemCount = dragState.draggingKeys.size;
-            let itemHeight = layout.getLayoutInfo(dragState.draggedKey)?.rect.height ?? 0;
-            return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density}  />;
-          }}
-        </DragPreview>
-      }
-    </ListViewContext.Provider>
-  );
-}) as <T>(props: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-
-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 (
-    <div
-      role="row"
-      aria-rowindex={state.collection.size + 1}
-      className={
-        classNames(
-          listStyles,
-          'react-spectrum-ListView-centeredWrapper',
-          {
-            'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0
-          }
-        )}>
-      <div role="gridcell">
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/ListViewItem.tsx

@@ -1,284 +0,0 @@
-/*
- * Copyright 2021 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-import {Checkbox} from '@react-spectrum/checkbox';
-import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
-import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
-import {classNames, ClearSlots, SlotProvider, useHasChild} from '@react-spectrum/utils';
-import {CSSTransition} from 'react-transition-group';
-import type {DraggableItemResult, DropIndicatorAria} from '@react-aria/dnd';
-import {DropTarget, Node} from '@react-types/shared';
-import {FocusRing, useFocusRing} from '@react-aria/focus';
-import {Grid} from '@react-spectrum/layout';
-import {isFocusVisible as isGlobalFocusVisible, useHover} from '@react-aria/interactions';
-import ListGripper from '@spectrum-icons/ui/ListGripper';
-import listStyles from './styles.css';
-import {ListViewContext} from './ListView';
-import {mergeProps} from '@react-aria/utils';
-import {Provider} from '@react-spectrum/provider';
-import React, {JSX, useContext, useRef} from 'react';
-import {Text} from '@react-spectrum/text';
-import {useButton} from '@react-aria/button';
-import {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';
-import {useLocale} from '@react-aria/i18n';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-interface ListViewItemProps<T> {
-  item: Node<T>,
-  isEmphasized: boolean,
-  hasActions: boolean
-}
-
-export function ListViewItem<T>(props: ListViewItemProps<T>): JSX.Element {
-  let {
-    item,
-    isEmphasized
-  } = props;
-  let {
-    state,
-    dragState,
-    dropState,
-    isListDraggable,
-    isListDroppable,
-    layout,
-    dragAndDropHooks,
-    loadingState
-  } = useContext(ListViewContext)!;
-  let {direction} = useLocale();
-  let rowRef = useRef<HTMLDivElement | null>(null);
-  let checkboxWrapperRef = useRef<HTMLDivElement | null>(null);
-  let {
-    isFocusVisible: isFocusVisibleWithin,
-    focusProps: focusWithinProps
-  } = useFocusRing({within: true});
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let {
-    rowProps,
-    gridCellProps,
-    isPressed,
-    descriptionProps,
-    isSelected,
-    isDisabled,
-    allowsSelection,
-    hasAction
-  } = useGridListItem({
-    node: item,
-    isVirtualized: true,
-    shouldSelectOnPressUp: isListDraggable
-  }, state, rowRef);
-  let {hoverProps, isHovered} = useHover({isDisabled: !allowsSelection && !hasAction});
-
-  let {checkboxProps} = useGridListSelectionCheckbox({key: item.key}, state);
-  let hasDescription = useHasChild(`.${listStyles['react-spectrum-ListViewItem-description']}`, rowRef);
-
-  let draggableItem: DraggableItemResult | null = null;
-  if (isListDraggable && dragAndDropHooks && dragState) {
-
-    draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
-    if (isDisabled) {
-      draggableItem = null;
-    }
-  }
-  let isDropTarget = false;
-  let dropIndicator: DropIndicatorAria | null = null;
-  let dropIndicatorRef = useRef<HTMLDivElement | null>(null);
-  if (isListDroppable && dragAndDropHooks && dropState) {
-    let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;
-    isDropTarget = dropState.isDropTarget(target);
-
-    dropIndicator = dragAndDropHooks.useDropIndicator!({target}, dropState, dropIndicatorRef);
-  }
-
-  let dragButtonRef = React.useRef<HTMLDivElement | null>(null);
-  let {buttonProps} = useButton({
-    ...draggableItem?.dragButtonProps,
-    elementType: 'div'
-  }, dragButtonRef);
-
-  let chevron = direction === 'ltr'
-    ? (
-      <ChevronRightMedium
-        aria-hidden="true"
-        UNSAFE_className={
-          classNames(
-            listStyles,
-            'react-spectrum-ListViewItem-parentIndicator',
-            {
-              'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
-              'is-disabled': !hasAction
-            }
-          )
-        } />
-    )
-    : (
-      <ChevronLeftMedium
-        aria-hidden="true"
-        UNSAFE_className={
-          classNames(
-            listStyles,
-            'react-spectrum-ListViewItem-parentIndicator',
-            {
-              'react-spectrum-ListViewItem-parentIndicator--hasChildItems': item.props.hasChildItems,
-              'is-disabled': !hasAction
-            }
-          )
-        } />
-    );
-
-  let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
-  let {visuallyHiddenProps} = useVisuallyHidden();
-
-  const mergedProps = mergeProps(
-    rowProps,
-    draggableItem?.dragProps,
-    hoverProps,
-    focusWithinProps,
-    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
-  if (dragAndDropHooks?.isVirtualDragging?.()) {
-    mergedProps.tabIndex = undefined;
-  }
-
-  let isFirstRow = item.prevKey == null;
-  let isLastRow = item.nextKey == null;
-  // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom
-  // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap
-  // with bottom border
-  let isFlushWithContainerBottom = false;
-  if (isLastRow && loadingState !== 'loadingMore') {
-    if (layout.getContentSize()?.height >= (layout.virtualizer?.visibleRect.height ?? 0)) {
-      isFlushWithContainerBottom = true;
-    }
-  }
-  // previous item isn't selected
-  // and the previous item isn't focused or, if it is focused, then if focus globally isn't visible or just focus isn't in the listview
-  let roundTops = (!(item.prevKey != null && state.selectionManager.isSelected(item.prevKey))
-    && (state.selectionManager.focusedKey !== item.prevKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));
-  let roundBottoms = (!(item.nextKey != null && state.selectionManager.isSelected(item.nextKey))
-    && (state.selectionManager.focusedKey !== item.nextKey || !(isGlobalFocusVisible() && state.selectionManager.isFocused)));
-
-  let content = typeof item.rendered === 'string' ? <Text>{item.rendered}</Text> : item.rendered;
-  if (isDisabled) {
-    content = <Provider isDisabled>{content}</Provider>;
-  }
-
-  return (
-    <div
-      {...mergedProps}
-      className={
-        classNames(
-          listStyles,
-          'react-spectrum-ListView-row',
-          {
-            'focus-ring': isFocusVisible,
-            'round-tops':
-              roundTops || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key),
-            'round-bottoms':
-              roundBottoms || (isHovered && !isSelected && state.selectionManager.focusedKey !== item.key)
-          }
-        )
-      }
-      ref={rowRef}>
-      <div
-        // TODO: refactor the css here now that we are focusing the row?
-        className={
-          classNames(
-            listStyles,
-            'react-spectrum-ListViewItem',
-            {
-              'is-active': isPressed,
-              'is-focused': isFocusVisibleWithin,
-              'focus-ring': isFocusVisible,
-              'is-hovered': isHovered,
-              'is-selected': isSelected,
-              'is-disabled': isDisabled,
-              'is-prev-selected': item.prevKey != null && state.selectionManager.isSelected(item.prevKey),
-              'is-next-selected': item.nextKey != null && state.selectionManager.isSelected(item.nextKey),
-              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || (item.nextKey != null && state.selectionManager.isSelected(item.nextKey))),
-              'react-spectrum-ListViewItem--dropTarget': !!isDropTarget,
-              'react-spectrum-ListViewItem--firstRow': isFirstRow,
-              'react-spectrum-ListViewItem--lastRow': isLastRow,
-              'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom,
-              'react-spectrum-ListViewItem--hasDescription': hasDescription
-            }
-          )
-        }
-        {...gridCellProps}>
-        <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>
-          {isListDraggable &&
-            <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>
-              {!isDisabled &&
-                <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
-                  <div
-                    {...buttonProps as React.HTMLAttributes<HTMLElement>}
-                    className={
-                      classNames(
-                        listStyles,
-                        'react-spectrum-ListViewItem-draghandle-button'
-                      )
-                    }
-                    style={!isFocusVisibleWithin ? {...visuallyHiddenProps.style} : {}}
-                    ref={dragButtonRef}
-                    draggable="true">
-                    <ListGripper />
-                  </div>
-                </FocusRing>
-              }
-            </div>
-          }
-          {isListDroppable && !dropIndicator?.isHidden &&
-            <div role="button" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />
-          }
-          <CSSTransition
-            in={showCheckbox}
-            unmountOnExit
-            classNames={{
-              enter: listStyles['react-spectrum-ListViewItem-checkbox--enter'],
-              enterActive: listStyles['react-spectrum-ListViewItem-checkbox--enterActive'],
-              exit: listStyles['react-spectrum-ListViewItem-checkbox--exit'],
-              exitActive: listStyles['react-spectrum-ListViewItem-checkbox--exitActive']
-            }}
-            timeout={160}
-            nodeRef={checkboxWrapperRef} >
-            <div ref={checkboxWrapperRef} className={listStyles['react-spectrum-ListViewItem-checkboxWrapper']}>
-              <Checkbox
-                {...checkboxProps}
-                UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
-                isEmphasized={isEmphasized} />
-            </div>
-          </CSSTransition>
-          <SlotProvider
-            slots={{
-              text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
-              description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},
-              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'],
-                isQuiet: true,
-                density: 'compact'
-              },
-              actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}
-            }}>
-            {content}
-            <ClearSlots>
-              {chevron}
-            </ClearSlots>
-          </SlotProvider>
-        </Grid>
-      </div>
-    </div>
-  );
-}