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

package/src/ListViewLayout.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2024 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 {InvalidationContext, LayoutInfo, Rect} from '@react-stately/virtualizer';
+import {LayoutNode, ListLayout} from '@react-stately/layout';
+import {Node} from '@react-types/shared';
+
+interface ListViewLayoutProps {
+  isLoading?: boolean
+}
+
+export class ListViewLayout<T> extends ListLayout<T, ListViewLayoutProps> {
+  private isLoading: boolean = false;
+
+  update(invalidationContext: InvalidationContext<ListViewLayoutProps>): void {
+    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
+    super.update(invalidationContext);
+  }
+
+  protected buildCollection(): LayoutNode[] {
+    let nodes = super.buildCollection();
+    let y = this.contentSize.height;
+
+    if (this.isLoading) {
+      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, nodes.length === 0 ? this.virtualizer.visibleRect.height : this.estimatedRowHeight);
+      let loader = new LayoutInfo('loader', 'loader', rect);
+      let node = {
+        layoutInfo: loader,
+        validRect: loader.rect
+      };
+      nodes.push(node);
+      this.layoutNodes.set(loader.key, node);
+      y = loader.rect.maxY;
+    }
+
+    if (nodes.length === 0) {
+      let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
+      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
+      let node = {
+        layoutInfo: placeholder,
+        validRect: placeholder.rect
+      };
+      nodes.push(node);
+      this.layoutNodes.set(placeholder.key, node);
+      y = placeholder.rect.maxY;
+    }
+
+    this.contentSize.height = y;
+    return nodes;
+  }
+
+  protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
+    let res = super.buildItem(node, x, y);
+    // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
+    res.layoutInfo.allowOverflow = true;
+    return res;
+  }
+}

package/src/RootDropIndicator.tsx

@@ -3,14 +3,14 @@ import React, {useContext, useRef} from 'react';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export default function RootDropIndicator() {
-  let {dropState, dropHooks} = useContext(ListViewContext);
-  let ref = useRef();
-  let {dropIndicatorProps} = dropHooks.useDropIndicator({
+  let {dropState, dragAndDropHooks} = useContext(ListViewContext);
+  let ref = useRef(undefined);
+  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator({
     target: {type: 'root'}
   }, dropState, ref);
   let isDropTarget = dropState.isDropTarget({type: 'root'});
   let {visuallyHiddenProps} = useVisuallyHidden();
-  
+
   if (!isDropTarget && dropIndicatorProps['aria-hidden']) {
     return null;
   }
@@ -19,9 +19,8 @@ export default function RootDropIndicator() {
     <div role="row" aria-hidden={dropIndicatorProps['aria-hidden']}>
       <div
         role="gridcell"
-        aria-selected="false"
-        {...visuallyHiddenProps}>
-        <div role="button" {...dropIndicatorProps} ref={ref} />
+        aria-selected="false">
+        <div role="button" {...visuallyHiddenProps} {...dropIndicatorProps} ref={ref} />
       </div>
     </div>
   );

package/src/index.ts

@@ -1,2 +1,15 @@
+/*
+ * Copyright 2022 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.
+ */
+
 export {ListView} from './ListView';
 export {Item} from '@react-stately/collections';
+export type {SpectrumListViewProps} from './ListView';

package/src/styles.css

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
 */
 
-:root {
+.react-spectrum-ListView,
+.react-spectrum-ListViewItem {
   --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);
   --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-85);
   --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);
@@ -23,11 +24,39 @@
   --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);
   --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);
   --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);
+
+  --spectrum-listview-border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  --spectrum-listview-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));
+  --spectrum-listview-background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+  --spectrum-listview-item-background-color-hover: var(--spectrum-table-row-background-color-hover);
+  --spectrum-listview-item-background-color-down: var(--spectrum-table-row-background-color-down);
+  --spectrum-listview-item-background-color-selected: var(--spectrum-table-row-background-color-selected);
+  --spectrum-listview-item-background-color-selected-hover: var(--spectrum-table-row-background-color-selected);
+  --spectrum-listview-item-background-color-selected-key-focus: var(--spectrum-table-row-background-color-selected-key-focus);
+  --spectrum-listview-item-border-color: var(--spectrum-table-cell-border-color, var(--spectrum-alias-border-color-mid));
+  --spectrum-listview-item-border-color-selected: var(--spectrum-global-color-blue-500);
+  --spectrum-listview-item-border-color-key-focus: var(--spectrum-table-cell-border-color-key-focus, var(--spectrum-alias-focus-color));
+  --spectrum-listview-row-sticky-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);
+  --spectrum-listview-quiet-background-color: var(--spectrum-alias-background-color-transparent);
+  --spectrum-listview-item-text-color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
+  --spectrum-listview-item-text-color-disabled: var(--spectrum-alias-text-color-disabled);
+  --spectrum-listview-droptarget-background-color: var(--spectrum-alias-highlight-selected);
+  --spectrum-listview-dropindicator-border-color: var(--spectrum-dropindicator-border-color);
+  --spectrum-listview-dropindicator-circle-border-color: var(--spectrum-dropindicator-circle-border-color);
+
+  --spectrum-listview-dropindicator-circle-size: var(--spectrum-dropindicator-circle-size);
+  --spectrum-listview-dropindicator-border-size: var(--spectrum-dropindicator-border-size);
+
+  --spectrum-listview-dropzone-border-color-selected-hover: var(--spectrum-dropzone-border-color-selected-hover);
+  --spectrum-listview-item-badge-text-color: var(--spectrum-global-color-static-white);
+  --spectrum-listview-item-badge-background-color: var(--spectrum-global-color-blue-400);
+
+  --spectrum-listview-item-draghandle-border-color-key-focus: var(--spectrum-listview-item-border-color-key-focus);
 }
 
 .react-spectrum-ListView {
   box-sizing: border-box;
-  border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+  border-color: var(--spectrum-listview-border-color);
   border-style: solid;
   position: relative;
   border-width: var(--spectrum-listview-border-width);
@@ -38,7 +67,7 @@
   border-spacing: 0;
   transform: translate3d(0, 0, 0);
   padding: 0;
-  background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+  background-color: var(--spectrum-listview-background-color);
   outline: 0;
   user-select: none;
 
@@ -68,23 +97,30 @@
         inset-block-start: 0;
         z-index: 3;
         pointer-events: none;
+
+        /* forced-color-adjust: none, so that box-shadow style will render */
+        forced-color-adjust: none;
       }
 
       &.is-selected {
-        background-color: var(--spectrum-table-row-background-color-selected);
+        background-color: var(--spectrum-listview-item-background-color-selected);
         &.is-hovered,
         &.is-active {
-          background-color: var(--spectrum-table-row-background-color-selected-hover);
+          background-color: var(--spectrum-listview-item-background-color-selected-hover);
         }
 
-        &:focus-ring {
-          background-color: var(--spectrum-table-row-background-color-selected-key-focus);
+        &:focus-visible {
+          background-color: var(--spectrum-listview-item-background-color-selected-key-focus);
         }
 
         /* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */
         &:after {
           inset-block-start: -1px;
-          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);
+          box-shadow:
+            inset 1px 0 0 0 var(--spectrum-listview-item-border-color-selected),
+            inset -1px 0 0 0 var(--spectrum-listview-item-border-color-selected),
+            inset 0 -1px 0 0 var(--spectrum-listview-item-border-color-selected),
+            inset 0 1px 0 0 var(--spectrum-listview-item-border-color-selected);
         }
       }
 
@@ -104,7 +140,7 @@
         /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */
         &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {
           &:after {
-            box-shadow: inset 0 -1px 0 0 var(--spectrum-table-cell-border-color);
+            box-shadow: inset 0 -1px 0 0 var(--spectrum-listview-item-border-color);
           }
         }
 
@@ -167,7 +203,7 @@
 .react-spectrum-ListView-row {
   cursor: default;
   /* Not sticky because listview is a single column. If we want to make sticky, will need a cell wrapper like TableView for display: inline-block */
-  &:focus-ring {
+  &:focus-visible {
     &:before {
       content: '';
       position: absolute;
@@ -176,19 +212,22 @@
       inset-inline-start: 0;
       width: var(--spectrum-listview-row-sticky-focus-indicator-width);
       z-index: 4;
-      background: var(--spectrum-selectlist-option-focus-indicator-color);
+      background: var(--spectrum-listview-row-sticky-focus-indicator-color);
+
+      /* forced-color-adjust: none, so that background color will render for the sticky focus indicator. */
+      forced-color-adjust: none;
     }
   }
 }
 
 .react-spectrum-ListView.react-spectrum-ListView--quiet {
-  background-color: var(--spectrum-alias-background-color-transparent);
+  background-color: var(--spectrum-listview-quiet-background-color);
   border-width: 0;
   border-radius: 0;
 
   .react-spectrum-ListView-row {
     &.round-tops {
-      &:focus-ring {
+      &:focus-visible {
         &:before {
           border-start-start-radius: var(--spectrum-listview-item-border-radius);
         }
@@ -205,7 +244,7 @@
     }
 
     &.round-bottoms {
-      &:focus-ring {
+      &:focus-visible {
         &:before {
           border-end-start-radius: var(--spectrum-listview-item-border-radius);
         }
@@ -223,6 +262,10 @@
   }
 }
 
+.react-spectrum-ListView-row[data-href] {
+  cursor: pointer;
+}
+
 .react-spectrum-ListViewItem {
   display: grid; /* TODO: define grid areas */
   box-sizing: border-box;
@@ -232,39 +275,39 @@
   padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);
   position: relative;
   /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/
-  color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
+  color: var(--spectrum-listview-item-text-color);
   outline: 0;
   min-height: var(--spectrum-global-dimension-size-500);
 
   &.is-hovered,
   &.is-focused {
-    background-color: var(--spectrum-table-row-background-color-hover);
+    background-color: var(--spectrum-listview-item-background-color-hover);
   }
 
-  &:focus-ring {
-    background-color: var(--spectrum-table-row-background-color-hover);
+  &:focus-visible {
+    background-color: var(--spectrum-listview-item-background-color-hover);
   }
 
   &.is-active {
-    background-color: var(--spectrum-table-row-background-color-down);
+    background-color: var(--spectrum-listview-item-background-color-down);
   }
 
   &.is-selected {
-    background-color: var(--spectrum-table-row-background-color-hover);
+    background-color: var(--spectrum-listview-item-background-color-hover);
 
     &.is-hovered,
     &.is-active {
-      background-color: var(--spectrum-table-row-background-color-hover);
+      background-color: var(--spectrum-listview-item-background-color-hover);
     }
 
-    &:focus-ring {
-      background-color: var(--spectrum-table-row-background-color-selected-key-focus);
+    &:focus-visible {
+      background-color: var(--spectrum-listview-item-background-color-selected-key-focus);
     }
   }
 
   &.is-disabled {
     &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {
-      color: var(--spectrum-alias-text-color-disabled);
+      color: var(--spectrum-listview-item-text-color-disabled);
     }
   }
 
@@ -276,11 +319,11 @@
 
   .react-spectrum-ListViewItem-grid {
     display: grid;
-    grid-template-columns: auto auto auto auto 1fr auto auto;
+    grid-template-columns: auto auto auto 1fr auto auto auto;
     grid-template-rows: 1fr auto;
     grid-template-areas:
-      "draghandle checkbox icon image content actions actionmenu chevron"
-      "draghandle checkbox icon image description actions actionmenu chevron";
+      "draghandle checkbox thumbnail content actions actionmenu chevron"
+      "draghandle checkbox thumbnail description actions actionmenu chevron";
     align-items: center;
   }
 
@@ -302,9 +345,12 @@
       justify-content: center;
       border-radius: var(--spectrum-alias-border-radius-regular);
 
-      &:focus-ring {
-        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
+      &:focus-visible {
+        box-shadow: inset 0 0 0 2px var(--spectrum-listview-item-draghandle-border-color-key-focus);
         outline: none;
+
+        /* forced-color-adjust: none, so that box-shadow style will render */
+        forced-color-adjust: none;
       }
     }
   }
@@ -326,25 +372,21 @@
     }
   }
 
-  .react-spectrum-ListViewItem-icon,
-  .react-spectrum-ListViewItem-image {
-    grid-area: image;
-    align-items: center;
+  .react-spectrum-ListViewItem-thumbnail {
+    box-sizing: content-box;
+    grid-area: thumbnail;
     justify-items: center;
     padding-inline-end: var(--spectrum-global-dimension-size-100);
-  }
-
-  .react-spectrum-ListViewItem-image {
     display: flex;
     border-radius: var(--spectrum-global-dimension-size-25);
     width: var(--spectrum-global-dimension-size-400);
     height: var(--spectrum-global-dimension-size-400);
     align-items: center;
     justify-content: center;
+
     > img {
       width: unset;
-      height: unset;
-      max-height: 100%;
+      height: 100%;
     }
   }
 
@@ -400,21 +442,34 @@
 
   &.react-spectrum-ListViewItem-dragPreview {
     width: var(--spectrum-global-dimension-size-2400);
-    border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);
+    border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);
     border-radius: var(--spectrum-alias-border-radius-regular);
-    background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+    background-color: var(--spectrum-listview-background-color);
+
+    /* forced-color-adjust: none, so that background-color style will render */
+    forced-color-adjust: none;
+
+    &.react-spectrum-ListViewItem-dragPreview--compact {
+      padding-top: var(--spectrum-listview-item-compact-padding-y);
+      padding-bottom: var(--spectrum-listview-item-compact-padding-y);
+    }
+
+    &.react-spectrum-ListViewItem-dragPreview--spacious {
+      padding-top: var(--spectrum-listview-item-spacious-padding-y);
+      padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
+    }
 
     .react-spectrum-ListViewItem-grid {
       grid-template-areas:
-        "icon image content     . badge"
-        "icon image description . badge";
-      grid-template-columns: auto auto auto 1fr;
+        "thumbnail content     . badge"
+        "thumbnail description . badge";
+      grid-template-columns: auto auto 1fr auto;
     }
 
     .react-spectrum-ListViewItem-badge {
       grid-area: badge;
-      color: white;
-      background: var(--spectrum-global-color-blue-400);
+      color: var(--spectrum-listview-item-badge-text-color);
+      background: var(--spectrum-listview-item-badge-background-color);
       padding: 0 8px;
       border-radius: var(--spectrum-alias-border-radius-regular);
     }
@@ -431,9 +486,12 @@
         inset-inline-start: 4px;
         width: 100%;
         height: 100%;
-        border: 1px solid var(--spectrum-dropzone-border-color-selected-hover);
+        border: 1px solid var(--spectrum-listview-dropzone-border-color-selected-hover);
         border-radius: var(--spectrum-alias-border-radius-regular);
-        background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+        background-color: var(--spectrum-listview-background-color);
+
+        /* forced-color-adjust: none, so that box-shadow style will render */
+        forced-color-adjust: none;
       }
     }
 
@@ -510,22 +568,28 @@
 }
 
 .react-spectrum-ListViewItem--dropTarget {
-  background-color: var(--spectrum-alias-highlight-selected);
+  background-color: var(--spectrum-listview-droptarget-background-color);
   box-shadow:
-    inset 2px 0 0 0 var(--spectrum-table-cell-border-color-key-focus),
-    inset -2px 0 0 0 var(--spectrum-table-cell-border-color-key-focus),
-    inset 0 -3px 0 0 var(--spectrum-table-cell-border-color-key-focus),
-    inset 0 2px 0 0 var(--spectrum-table-cell-border-color-key-focus);
+    inset 2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),
+    inset -2px 0 0 0 var(--spectrum-listview-item-border-color-key-focus),
+    inset 0 -3px 0 0 var(--spectrum-listview-item-border-color-key-focus),
+    inset 0 2px 0 0 var(--spectrum-listview-item-border-color-key-focus);
+
+  /* forced-color-adjust: none, so that box-shadow style will render */
+  forced-color-adjust: none;
 }
 
 .react-spectrum-ListView.react-spectrum-ListView--dropTarget {
-  border-color: var(--spectrum-global-color-blue-500);
-  background-color: var(--spectrum-alias-highlight-selected);
-  box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+  border-color: var(--spectrum-listview-border-color-key-focus);
+  background-color: var(--spectrum-listview-droptarget-background-color);
+  box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);
+
+  /* forced-color-adjust: none, so that box-shadow and background color styles will render */
+  forced-color-adjust: none;
 
   /* Add border to quiet ListView only when it is a drop target */
   &.react-spectrum-ListView--quiet {
-    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus), 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+    box-shadow: inset 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus), 0 0 0 1px var(--spectrum-listview-item-border-color-key-focus);
   }
 }
 
@@ -541,36 +605,43 @@
 }
 
 .react-spectrum-ListViewInsertionIndicator {
-  width: calc(100% - (2 * var(--spectrum-dropindicator-circle-size)));
-  inset-inline-start: var(--spectrum-dropindicator-circle-size);
+  width: calc(100% - (2 * var(--spectrum-listview-dropindicator-circle-size)));
+  inset-inline-start: var(--spectrum-listview-dropindicator-circle-size);
   position: absolute;
   outline: none;
 
   &.react-spectrum-ListViewInsertionIndicator--dropTarget {
-    background: var(--spectrum-dropindicator-border-color);
-    border-bottom: 2px solid var(--spectrum-dropindicator-border-color);
+    background: var(--spectrum-listview-dropindicator-border-color);
+    border-bottom: 2px solid var(--spectrum-listview-dropindicator-border-color);
+
+    /* forced-color-adjust: none, so that background color
+    will render border for insertion indicator. */
+    forced-color-adjust: none;
 
     &:before {
-      left: calc(var(--spectrum-dropindicator-circle-size) * -1);
+      left: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);
     }
 
     &:after {
-      right: calc(var(--spectrum-dropindicator-circle-size) * -1);
+      right: calc(var(--spectrum-listview-dropindicator-circle-size) * -1);
     }
 
     &:before,
     &:after {
       content: '';
       position: absolute;
-      top: calc(var(--spectrum-dropindicator-circle-size) * -1 / 2 + var(--spectrum-dropindicator-border-size) / 2);
-      width: var(--spectrum-dropindicator-circle-size);
-      height: var(--spectrum-dropindicator-circle-size);
+      top: calc(var(--spectrum-listview-dropindicator-circle-size) * -1 / 2 + var(--spectrum-listview-dropindicator-border-size) / 2);
+      width: var(--spectrum-listview-dropindicator-circle-size);
+      height: var(--spectrum-listview-dropindicator-circle-size);
       border-radius: 50%;
-      border: var(--spectrum-dropindicator-border-size) solid;
+      border: var(--spectrum-listview-dropindicator-border-size) solid;
       box-sizing: border-box;
-      border-color: var(--spectrum-dropindicator-circle-border-color);
-      background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+      border-color: var(--spectrum-listview-dropindicator-circle-border-color);
+      background-color: var(--spectrum-listview-background-color);
       z-index: 5;
+
+      /* forced-color-adjust: none, so that box-shadow and background-color styles will render */
+      forced-color-adjust: none;
     }
   }
 }
@@ -591,3 +662,59 @@
   opacity: 0.01;
   max-width: 0px;
 }
+
+.react-spectrum-ListView {
+  &:focus-visible {
+    border-color: var(--spectrum-listview-border-color-key-focus);
+    box-shadow: inset 0 0 0 1px var(--spectrum-listview-border-color-key-focus);
+  }
+}
+
+@media (forced-colors: active) {
+  .react-spectrum-ListView,
+  .react-spectrum-ListViewItem {
+    --spectrum-listview-background-color: Canvas;
+    --spectrum-listview-item-background-color: Canvas;
+    --spectrum-listview-item-background-color-selected: Canvas;
+    --spectrum-listview-border-color-key-focus: Highlight;
+    --spectrum-listview-item-border-color: CanvasText;
+    --spectrum-listview-item-border-color-selected: Highlight;
+    --spectrum-listview-item-border-color-key-focus: Highlight;
+    --spectrum-listview-row-sticky-focus-indicator-color: Highlight;
+    --spectrum-listview-droptarget-background-color: var(--spectrum-alias-global-color-transparent);
+    --spectrum-listview-dropindicator-border-color: Highlight;
+    --spectrum-listview-dropindicator-circle-border-color: Highlight;
+    --spectrum-listview-dropzone-border-color-selected-hover: Highlight;
+    --spectrum-listview-item-badge-text-color: HighlightText;
+    --spectrum-listview-item-badge-background-color: Highlight;
+    --spectrum-listview-item-title-text-color: CanvasText;
+    --spectrum-listview-item-description-text-color: CanvasText;
+  }
+
+  .react-spectrum-ListView-row {
+    &:focus-visible {
+      .react-spectrum-ListViewItem {
+        /* Adds a full outline style to the focused listview item to better distinguish between
+        the selected, not selected, selected + focused and selected + not focused
+        states without using a background color on the row in forced-colors: active mode. */
+        &:after {
+          outline: var(--spectrum-listview-row-sticky-focus-indicator-width) solid var(--spectrum-listview-row-sticky-focus-indicator-color);
+          outline-offset: calc(-1 * var(--spectrum-listview-row-sticky-focus-indicator-width));
+          top: calc(-1 * var(--spectrum-listview-border-width));
+          height: calc(100% + var(--spectrum-listview-border-width));
+        }
+      }
+    }
+  }
+
+  .react-spectrum-ListViewItem-draghandle-container {
+    box-sizing: content-box;
+
+    .react-spectrum-ListViewItem-draghandle-button {
+      /* Use CanvasText, so that focus ring color on drag handle button matches
+      focus ring color for other interactive elements within the listview item. */
+      --spectrum-listview-item-draghandle-border-color-key-focus: CanvasText;
+    }
+  }
+
+}