ListView UI bug fixes and updates

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -16,6 +16,8 @@ governing permissions and limitations under the License.
   --spectrum-table-cell-compact-padding-y: var(--spectrum-global-dimension-size-75);
   --spectrum-table-cell-regular-padding-y: var(--spectrum-global-dimension-size-125);
   --spectrum-table-cell-spacious-padding-y: var(--spectrum-global-dimension-size-175);
+  --spectrum-table-row-border-radius: calc(var(--spectrum-table-border-radius) - 1px);
+  --spectrum-table-row-sticky-focus-indicator-width: 3px;
 }
 
 .spectrum-Table {
@@ -104,7 +106,7 @@ svg.spectrum-Table-sortedIcon {
   block-size: 100%;
   cursor: col-resize;
   user-select: none;
-  
+
   &::after {
     content: "";
     position: absolute;
@@ -114,7 +116,7 @@ svg.spectrum-Table-sortedIcon {
     block-size: 100%;
     background-color: var(--spectrum-table-divider-border-color);
   }
-  
+
   &:active,
   &:focus {
     &::after {
@@ -291,16 +293,22 @@ svg.spectrum-Table-sortedIcon {
     outline: 0;
   }
 
-  /* The focus ring must be on top of the first cell, so needs to be absolutely positioned. */
+  /* The focus ring should be sticky so it is visible at all horizontal scroll positions. */
   &:focus-ring {
     &:before {
+      display: inline-block;
       content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: var(--spectrum-selectlist-border-size-key-focus);
-      z-index: 3;
+      position: sticky;
+      inset-inline-start: 0;
+      height: 100%;
+      width: var(--spectrum-table-row-sticky-focus-indicator-width);
+      z-index: 4;
+      margin-inline-end: calc(var(--spectrum-table-row-sticky-focus-indicator-width) * -1);
+    }
+
+    .spectrum-Table-cellWrapper:first-of-type {
+      display: inline-block;
+      vertical-align: top;
     }
   }
 
@@ -309,6 +317,28 @@ svg.spectrum-Table-sortedIcon {
   }
 }
 
+.spectrum-Table:not(.spectrum-Table--loadingMore):not(.spectrum-Table--quiet) {
+  .spectrum-Table-row {
+    &.spectrum-Table-row--lastRow.spectrum-Table-row--isFlushBottom.is-selected {
+      &:after {
+        border-end-start-radius: var(--spectrum-table-row-border-radius);
+        border-end-end-radius: var(--spectrum-table-row-border-radius);
+      }
+    }
+  }
+}
+
+.spectrum-Table:not(.spectrum-Table--quiet) {
+  .spectrum-Table-row {
+    &.spectrum-Table-row--firstRow.is-selected {
+      &:after {
+        border-start-start-radius: var(--spectrum-table-row-border-radius);
+        border-start-end-radius: var(--spectrum-table-row-border-radius);
+      }
+    }
+  }
+}
+
 /* the CSS logical properties postcss plugin doesn't seem to work with :focus-ring. */
 [dir="rtl"] .spectrum-Table-row:focus-ring:before {
   right: 0;

packages/@adobe/spectrum-css-temp/components/table/skin.css

@@ -119,7 +119,6 @@ tbody.spectrum-Table-body {
 }
 
 .spectrum-Table-row {
-  border-bottom: 1px solid var(--spectrum-table-cell-border-color);
   box-sizing: border-box;
 
   .spectrum-Table-cellWrapper {
@@ -149,6 +148,32 @@ tbody.spectrum-Table-body {
     background-color: var(--spectrum-table-row-background-color-down);
   }
 
+  /* Alternative to border on rows. Using box shadow since they don't take room unlike border which would cause wiggles
+   * in the hightlight case and displace the sticky indicator. Also allows for a nicer bottom curved border to match the container,
+   * the bottom border curved corners were cut off when using borders.
+   */
+
+  /* Box shadow for bottom border for non-selected rows that aren't immediatly above a selected row. */
+  &:after {
+    box-shadow: inset 0 -1px 0 0 var(--spectrum-table-cell-border-color);
+    content: '';
+    display: block;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-block-start: 0;
+    z-index: 3;
+    pointer-events: none;
+  }
+
+  /* Box shadow for bottom border for non-selected row that is immediatly above a selected row. */
+  &.is-next-selected {
+    &:after {
+      box-shadow: inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
+    }
+  }
+
   &.is-selected {
     .spectrum-Table-cell {
       background-color: var(--spectrum-table-row-background-color-selected);
@@ -163,10 +188,22 @@ tbody.spectrum-Table-body {
     &.is-focused .spectrum-Table-cell {
       background-color: var(--spectrum-table-row-background-color-selected-key-focus);
     }
+
+    /* Box shadow for bottom, left, and right border for selected rows. */
+    &:after {
+      box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
+    }
   }
 
-  &.spectrum-Table-row--highlightSelection {
-    border-bottom-color: var(--spectrum-global-color-blue-500);
+  /* Box shadow for bottom, left, right, and top border for first row when selected. When the row isn't selected, it doesn't need
+   * a top border.
+   */
+   &.spectrum-Table-row--firstRow {
+    &.is-selected {
+      &:after {
+        box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 1px 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
+      }
+    }
   }
 
   &.is-drop-target {

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

@@ -69,7 +69,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     opacity: layoutInfo.opacity,
     zIndex: layoutInfo.zIndex,
     transform: layoutInfo.transform,
-    contain: layoutInfo.allowOverflow ? 'size layout style' : 'size layout style paint'
+    contain: 'size layout style'
   };
 
   cache.set(layoutInfo, style);

packages/@react-spectrum/list/src/ListView.tsx

@@ -39,15 +39,16 @@ import React, {ReactElement, useContext, useMemo, useRef} from 'react';
 import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
 import {Virtualizer} from '@react-aria/virtualizer';
 
-interface ListViewContextValue {
-  state: GridState<object, GridCollection<any>>,
-  keyboardDelegate: GridKeyboardDelegate<unknown, GridCollection<any>>,
+interface ListViewContextValue<T> {
+  state: GridState<T, GridCollection<any>>,
+  keyboardDelegate: GridKeyboardDelegate<T, GridCollection<any>>,
   dragState: DraggableCollectionState,
   onAction:(key: string) => void,
-  isListDraggable: boolean
+  isListDraggable: boolean,
+  layout: ListLayout<T>
 }
 
-export const ListViewContext = React.createContext<ListViewContextValue>(null);
+export const ListViewContext = React.createContext<ListViewContextValue<unknown>>(null);
 
 const ROW_HEIGHTS = {
   compact: {
@@ -237,7 +238,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   }
 
   return (
-    <ListViewContext.Provider value={{state, keyboardDelegate, dragState, onAction, isListDraggable}}>
+    <ListViewContext.Provider value={{state, keyboardDelegate, dragState, onAction, isListDraggable, layout}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
@@ -254,7 +255,8 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
             'react-spectrum-ListView--emphasized',
             {
               'react-spectrum-ListView--quiet': isQuiet,
-              'react-spectrum-ListView--draggable': isListDraggable
+              'react-spectrum-ListView--draggable': isListDraggable,
+              'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore'
             },
             styleProps.className
           )

packages/@react-spectrum/list/src/ListViewItem.tsx

@@ -35,7 +35,8 @@ export function ListViewItem(props) {
     dragHooks
   } = props;
   let cellNode = [...item.childNodes][0];
-  let {state, dragState, onAction, isListDraggable} = useContext(ListViewContext);
+  let {state, dragState, onAction, isListDraggable, layout} = useContext(ListViewContext);
+
   let {direction} = useLocale();
   let rowRef = useRef<HTMLDivElement>();
   let cellRef =  useRef<HTMLDivElement>();
@@ -97,9 +98,30 @@ export function ListViewItem(props) {
   let isSelected = state.selectionManager.isSelected(item.key);
   let showDragHandle = isDraggable && isFocusVisibleWithin;
   let {visuallyHiddenProps} = useVisuallyHidden();
+  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) {
+    if (layout.getContentSize()?.height >= layout.virtualizer?.getVisibleRect().height) {
+      isFlushWithContainerBottom = true;
+    }
+  }
+
   return (
     <div
       {...mergeProps(rowProps, pressProps, isDraggable && draggableItem?.dragProps)}
+      className={
+        classNames(
+          listStyles,
+          'react-spectrum-ListView-row',
+          {
+            'focus-ring': isFocusVisible
+          }
+        )
+      }
       ref={rowRef}>
       <div
         className={
@@ -112,9 +134,12 @@ export function ListViewItem(props) {
               'focus-ring': isFocusVisible,
               'is-hovered': isHovered,
               'is-selected': isSelected,
-              'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
+              'is-next-selected': state.selectionManager.isSelected(item.nextKey),
               'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),
-              'react-spectrum-ListViewItem--draggable': isDraggable
+              'react-spectrum-ListViewItem--draggable': isDraggable,
+              'react-spectrum-ListViewItem--firstRow': isFirstRow,
+              'react-spectrum-ListViewItem--lastRow': isLastRow,
+              'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom
             }
           )
         }