@react-spectrum/list 3.0.0-rc.0 → 3.0.0

package/src/ListView.tsx

@@ -15,6 +15,7 @@ import type {DraggableCollectionState, DroppableCollectionState} from '@react-st
 import {DragHooks, DropHooks} from '@react-spectrum/dnd';
 import type {DroppableCollectionResult} from '@react-aria/dnd';
 import {filterDOMProps, useLayoutEffect} from '@react-aria/utils';
+import {FocusRing} from '@react-aria/focus';
 import InsertionIndicator from './InsertionIndicator';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -25,7 +26,6 @@ import {ListViewItem} from './ListViewItem';
 import {mergeProps} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
 import React, {Key, ReactElement, useContext, useMemo, useRef, useState} from 'react';
-import {Rect} from '@react-stately/virtualizer';
 import RootDropIndicator from './RootDropIndicator';
 import {DragPreview as SpectrumDragPreview} from './DragPreview';
 import {SpectrumListViewProps} from '@react-types/list';
@@ -144,53 +144,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
     });
     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
-          };
-        }
-      }
+      dropTargetDelegate: layout
     }, dropState, domRef);
 
     isRootDropTarget = dropState.isDropTarget({type: 'root'});
@@ -226,82 +180,84 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
 
   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} />
+      <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
+        <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" />
                   }
-              </>
-            );
-          } else if (type === 'loader') {
-            return (
-              <CenteredWrapper>
-                <ProgressCircle
-                  isIndeterminate
-                  aria-label={collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
-              </CenteredWrapper>
-            );
-          } else if (type === 'placeholder') {
-            let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-            if (emptyState == null) {
-              return null;
-            }
+                  {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 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
+                </CenteredWrapper>
+              );
+            } else if (type === 'placeholder') {
+              let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
+              if (emptyState == null) {
+                return null;
+              }
 
-            return (
-              <CenteredWrapper>
-                {emptyState}
-              </CenteredWrapper>
-            );
-          }
+              return (
+                <CenteredWrapper>
+                  {emptyState}
+                </CenteredWrapper>
+              );
+            }
 
-        }}
-      </Virtualizer>
+          }}
+        </Virtualizer>
+      </FocusRing>
       {DragPreview && isListDraggable &&
         <DragPreview ref={preview}>
           {() => {
@@ -338,7 +294,7 @@ function CenteredWrapper({children}) {
 }
 
 /**
- * Lists are containers for displaying information. 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: SpectrumListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 export {_ListView as ListView};

package/src/styles.css

@@ -337,7 +337,7 @@
     align-items: center;
     justify-content: center;
 
-    > img, > svg {
+    > img {
       width: unset;
       height: 100%;
     }
@@ -403,7 +403,7 @@
       grid-template-areas:
         "thumbnail content     . badge"
         "thumbnail description . badge";
-      grid-template-columns: auto auto auto 1fr;
+      grid-template-columns: auto auto 1fr auto;
     }
 
     .react-spectrum-ListViewItem-badge {
@@ -586,3 +586,10 @@
   opacity: 0.01;
   max-width: 0px;
 }
+
+.react-spectrum-ListView {
+  &:focus-ring {
+    border-color: var(--spectrum-global-color-blue-500);
+    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+  }
+}