@react-spectrum/s2 1.3.0 → 1.4.0

package/src/ListView.tsx

@@ -12,18 +12,50 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {ActionMenuContext} from './ActionMenu';
-import {baseColor, colorMix, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
+import {
+  baseColor,
+  color,
+  colorMix,
+  focusRing,
+  fontRelative,
+  space,
+  style
+} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import {CheckboxContext} from 'react-aria-components/Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {Collection} from 'react-aria/Collection';
-import {CollectionRendererContext, DefaultCollectionRenderer} from 'react-aria-components/CollectionBuilder';
-import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, useSlottedContext} from 'react-aria-components/slots';
-import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  CollectionRendererContext,
+  DefaultCollectionRenderer
+} from 'react-aria-components/CollectionBuilder';
+import {
+  ContextValue,
+  DEFAULT_SLOT,
+  Provider,
+  SlotProps,
+  useSlottedContext
+} from 'react-aria-components/slots';
+import {
+  controlFont,
+  getAllowedOverrides,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactElement, ReactNode, useContext, useRef} from 'react';
-import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState} from '@react-types/shared';
-import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
+import {css} from '../style/style-macro' with {type: 'macro'};
+import {description, DragPreview, icon, iconCenterWrapper, label} from './DragPreview';
+import {
+  DOMProps,
+  DOMRef,
+  DOMRefValue,
+  forwardRefType,
+  GlobalDOMAttributes,
+  ItemDropTarget,
+  LoadingState
+} from '@react-types/shared';
+import {DragHandleButton, InsertionIndicator} from './dnd-utils';
 import {
   GridList,
   GridListItem,
@@ -35,12 +67,13 @@ import {
 } from 'react-aria-components/GridList';
 import {IconContext} from './Icon';
 import {ImageContext} from './Image';
+// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Key} from '@react-types/shared';
+import {LayoutInfo, Virtualizer} from 'react-aria-components/Virtualizer';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {ListLayout} from 'react-stately/useVirtualizerState';
-// @ts-ignore
-import {ListState} from 'react-stately/useListState';
+import type {ListState} from 'react-stately/useListState';
 import {ProgressCircle} from './ProgressCircle';
 import {Text, TextContext} from './Content';
 import {useActionBarContainer} from './ActionBar';
@@ -49,66 +82,122 @@ import {useLocale} from 'react-aria/I18nProvider';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
-import {Virtualizer} from 'react-aria-components/Virtualizer';
 
-export interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'dragAndDropHooks' | 'layout' | 'render' | 'keyboardNavigationBehavior' | 'orientation' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {
+export interface ListViewProps<T>
+  extends
+    Omit<
+      GridListProps<T>,
+      | 'className'
+      | 'style'
+      | 'children'
+      | 'selectionBehavior'
+      | 'layout'
+      | 'render'
+      | 'keyboardNavigationBehavior'
+      | 'orientation'
+      | keyof GlobalDOMAttributes
+    >,
+    DOMProps,
+    UnsafeStyles,
+    ListViewStylesProps,
+    SlotProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** The current loading state of the ListView. */
-  loadingState?: LoadingState,
+  loadingState?: LoadingState;
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
-  onLoadMore?: () => void,
+  onLoadMore?: () => void;
   /** The children of the ListView. */
-  children: ReactNode | ((item: T) => ReactNode),
+  children: ReactNode | ((item: T) => ReactNode);
   /** Provides the ActionBar to display when items are selected in the ListView. */
-  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;
   /** Hides the default link out icons on items that open links in a new tab. */
-  hideLinkOutIcon?: boolean
+  hideLinkOutIcon?: boolean;
 }
 
 interface ListViewStylesProps {
   /** Whether the ListView should be displayed with a quiet style. */
-  isQuiet?: boolean,
+  isQuiet?: boolean;
   /**
    * How selection should be displayed.
+   *
    * @default 'checkbox'
    */
-  selectionStyle?: 'highlight' | 'checkbox',
+  selectionStyle?: 'highlight' | 'checkbox';
   /**
    * Sets the overflow behavior for item contents.
+   *
    * @default 'truncate'
    */
-  overflowMode?: 'wrap' | 'truncate'
+  overflowMode?: 'wrap' | 'truncate';
 }
 
-export interface ListViewItemProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes> {
+export interface ListViewItemProps extends Omit<
+  GridListItemProps,
+  'children' | 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes
+> {
   /**
    * The contents of the item.
    */
-  children: ReactNode,
+  children: ReactNode;
   /** Whether the item has child items (renders a chevron indicator). */
-  hasChildItems?: boolean
+  hasChildItems?: boolean;
 }
 
-export const ListViewContext = createContext<ContextValue<Partial<ListViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+export const ListViewContext =
+  createContext<ContextValue<Partial<ListViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
-let InternalListViewContext = createContext<{isQuiet?: boolean, selectionStyle?: 'highlight' | 'checkbox', overflowMode?: 'wrap' | 'truncate', scale?: 'medium' | 'large', hideLinkOutIcon?: boolean}>({});
+let InternalListViewContext = createContext<{
+  isQuiet?: boolean;
+  selectionStyle?: 'highlight' | 'checkbox';
+  overflowMode?: 'wrap' | 'truncate';
+  scale?: 'medium' | 'large';
+  hideLinkOutIcon?: boolean;
+}>({});
 
-const listViewWrapper = style({
-  minHeight: 0,
-  minWidth: 200,
-  display: 'flex',
-  isolation: 'isolate',
-  disableTapHighlight: true,
-  position: 'relative',
-  // Clip ActionBar animation.
-  overflow: 'clip'
-}, getAllowedOverrides({height: true}));
+const listViewWrapper = style(
+  {
+    minHeight: 0,
+    minWidth: 200,
+    display: 'flex',
+    isolation: 'isolate',
+    disableTapHighlight: true,
+    position: 'relative',
+    // Clip ActionBar animation.
+    overflow: 'clip',
+    '--root-drop-radius': {
+      type: 'borderTopStartRadius',
+      value: 'default'
+    }
+  },
+  getAllowedOverrides({height: true})
+);
+
+// similar to tableview, use this approach so we can actually have a 2px outline when root dropping.
+// cant do a external box shadow due to the clipping that is applied on the wrapper element...
+// an inset box shadow runs into problems with the item background clipping the box shadow...
+const rootDropOutline = css(`
+  &:has([role="grid"][data-drop-target])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border: 2px solid ${color('blue-800')};
+    border-radius: var(--root-drop-radius);
+    z-index: 2;
+  }
+  @media (forced-colors: active) {
+    &:has([role="grid"][data-drop-target])::after {
+      border-color: Highlight;
+    }
+  }
+`);
 
 // When any row has a trailing icon, reserve space so actions align.
 const hasTrailingIconRows = ':has([data-has-trailing-icon]) [role="row"]';
 
-const listView = style<GridListRenderProps & {isQuiet?: boolean}>({
+const dropTargetBackground = colorMix('gray-25', 'blue-900', 10);
+const listView = style<GridListRenderProps & {isQuiet?: boolean; isDropTarget?: boolean}>({
   ...focusRing(),
   outlineOffset: {
     default: -2,
@@ -125,18 +214,25 @@ const listView = style<GridListRenderProps & {isQuiet?: boolean}>({
   backgroundColor: {
     default: 'gray-25',
     isQuiet: 'transparent',
-    forcedColors: 'Background'
+    isDropTarget: {
+      default: dropTargetBackground,
+      forcedColors: 'Background'
+    }
   },
   borderRadius: {
     default: 'default',
     isQuiet: 'none'
   },
-  borderColor: 'gray-300',
+  borderColor: {
+    default: 'gray-300',
+    forcedColors: 'ButtonBorder'
+  },
   borderWidth: {
     default: 1,
     isQuiet: 0
   },
   borderStyle: 'solid',
+  forcedColorAdjust: 'none',
   '--trailing-icon-width': {
     type: 'width',
     value: {
@@ -146,16 +242,50 @@ const listView = style<GridListRenderProps & {isQuiet?: boolean}>({
   }
 });
 
+export class S2ListLayout<T> extends ListLayout<T> {
+  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
+    let layoutInfo = super.getDropTargetLayoutInfo(target);
+    layoutInfo.zIndex = 1;
+    layoutInfo.allowOverflow = true;
+    return layoutInfo;
+  }
+}
+
 /**
- * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
+ * A ListView displays a list of interactive items, and allows a user to navigate, select, or
+ * perform an action.
  */
-export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<T extends object>(
+export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<T>(
   props: ListViewProps<T>,
   ref: DOMRef<HTMLDivElement>
 ) {
   [props, ref] = useSpectrumContextProps(props, ref, ListViewContext);
-  let {children, isQuiet, selectionStyle = 'checkbox', overflowMode = 'truncate', loadingState, onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon = false, ...otherProps} = props;
+  let {
+    children,
+    isQuiet,
+    selectionStyle = 'checkbox',
+    overflowMode = 'truncate',
+    loadingState,
+    onLoadMore,
+    renderEmptyState: userRenderEmptyState,
+    hideLinkOutIcon = false,
+    dragAndDropHooks,
+    ...otherProps
+  } = props;
   let scale = useScale();
+
+  if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) {
+    dragAndDropHooks.renderDragPreview = items => (
+      <DragPreview items={items} overflowMode={overflowMode} />
+    );
+  }
+
+  if (dragAndDropHooks) {
+    dragAndDropHooks.renderDropIndicator = target => (
+      <InsertionIndicator target={target as ItemDropTarget} />
+    );
+  }
+
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let rowHeight = scale === 'large' ? 50 : 40;
 
@@ -165,7 +295,7 @@ export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Li
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   let renderEmptyState: ListViewProps<T>['renderEmptyState'] | undefined;
   if (userRenderEmptyState != null && !isLoading) {
-    renderEmptyState = (renderProps) => (
+    renderEmptyState = renderProps => (
       <div className={emptyStateWrapper}>
         <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
           {userRenderEmptyState!(renderProps)}
@@ -176,21 +306,23 @@ export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Li
     renderEmptyState = () => (
       <div className={centeredWrapper}>
         <div className={loadingSpinnerWrapper}>
-          <ProgressCircle
-            isIndeterminate
-            aria-label={stringFormatter.format('table.loading')} />
+          <ProgressCircle isIndeterminate aria-label={stringFormatter.format('table.loading')} />
         </div>
       </div>
     );
   }
 
   let loadMoreSpinner = onLoadMore ? (
-    <GridListLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full', paddingY: 8})}>
+    <GridListLoadMoreItem
+      isLoading={loadingState === 'loadingMore'}
+      onLoadMore={onLoadMore}
+      className={style({height: 'full', width: 'full', paddingY: 8})}>
       <div className={centeredWrapper}>
         <div className={loadingSpinnerWrapper}>
           <ProgressCircle
             isIndeterminate
-            aria-label={stringFormatter.format('table.loadingMore')} />
+            aria-label={stringFormatter.format('table.loadingMore')}
+          />
         </div>
       </div>
     </GridListLoadMoreItem>
@@ -218,23 +350,31 @@ export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Li
     );
   }
 
-  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({
+    ...props,
+    scrollRef
+  });
 
   return (
     <div
       ref={domRef}
-      className={(props.UNSAFE_className || '') + listViewWrapper(null, props.styles)}
+      className={
+        (props.UNSAFE_className || '') + listViewWrapper(null, props.styles) + ' ' + rootDropOutline
+      }
       style={props.UNSAFE_style}>
       <Virtualizer
-        layout={ListLayout}
+        layout={S2ListLayout}
         layoutOptions={{
           estimatedRowHeight: rowHeight,
-          loaderHeight: 60
+          loaderHeight: 60,
+          dropIndicatorThickness: 0
         }}>
-        <InternalListViewContext.Provider value={{isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon}}>
+        <InternalListViewContext.Provider
+          value={{isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon}}>
           <GridList
             ref={scrollRef as any}
             {...gridListProps}
+            dragAndDropHooks={dragAndDropHooks}
             selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
             selectionMode={gridListProps.selectionMode}
             renderEmptyState={renderEmptyState}
@@ -242,10 +382,13 @@ export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Li
               paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
               scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
             }}
-            className={(renderProps) => listView({
-              ...renderProps,
-              isQuiet
-            })}
+            className={renderProps =>
+              listView({
+                ...renderProps,
+                isQuiet,
+                isDropTarget: renderProps.isDropTarget
+              })
+            }
             selectedKeys={selectedKeys}
             defaultSelectedKeys={undefined}
             onSelectionChange={onSelectionChange}>
@@ -261,22 +404,29 @@ export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Li
 const selectedBackground = colorMix('gray-25', 'gray-900', 7);
 const selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);
 
-const listitem = style<GridListItemRenderProps & {
-  isFocused: boolean,
-  isLink?: boolean,
-  isQuiet?: boolean,
-  isFirstItem?: boolean,
-  isLastItem?: boolean,
-  isSelected?: boolean,
-  isDisabled?: boolean,
-  isNextSelected?: boolean,
-  isPrevSelected?: boolean,
-  isPrevNotSelected?: boolean,
-  isNextNotSelected?: boolean,
-  selectionStyle?: 'highlight' | 'checkbox',
-  scale?: 'medium' | 'large'
-}>({
-  outlineStyle: 'none',
+// TODO: removed the background color in HCM for highlight selection since it made it hard to see the focus
+// ring of the drag button, this matches v3 anyways. thoughts?
+const listitem = style<
+  GridListItemRenderProps & {
+    isFocused: boolean;
+    isLink?: boolean;
+    isQuiet?: boolean;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isNextSelected?: boolean;
+    isPrevSelected?: boolean;
+    isPrevNotSelected?: boolean;
+    isNextNotSelected?: boolean;
+    selectionStyle?: 'highlight' | 'checkbox';
+    scale?: 'medium' | 'large';
+    isDropTarget?: boolean;
+  }
+>({
+  outlineStyle: {
+    default: 'none'
+  },
   boxSizing: 'border-box',
   columnGap: 0,
   paddingX: 0,
@@ -288,9 +438,9 @@ const listitem = style<GridListItemRenderProps & {
     isDisabled: 'disabled',
     forcedColors: {
       default: 'ButtonText',
-      selectionStyle: {
-        highlight: {
-          isSelected: 'HighlightText'
+      isSelected: {
+        selectionStyle: {
+          highlight: 'HighlightText'
         }
       },
       isDisabled: 'GrayText'
@@ -301,10 +451,21 @@ const listitem = style<GridListItemRenderProps & {
   gridColumnEnd: -1,
   display: 'grid',
   gridTemplateAreas: [
-    '. checkmark icon label       actions actionmenu trailing-icon .',
-    '. .         .    description actions actionmenu trailing-icon .'
+    '. dragbutton . checkmark icon label       actions actionmenu trailing-icon .',
+    '. .          . .         .    description actions actionmenu trailing-icon .'
+  ],
+  gridTemplateColumns: [
+    4,
+    'auto',
+    8,
+    'auto',
+    'auto',
+    'minmax(0, 1fr)',
+    'auto',
+    'auto',
+    'var(--trailing-icon-width)',
+    6
   ],
-  gridTemplateColumns: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'var(--trailing-icon-width)', edgeToText(40)],
   gridTemplateRows: '1fr auto',
   rowGap: {
     ':has([slot=description])': space(1)
@@ -325,13 +486,16 @@ const listitem = style<GridListItemRenderProps & {
     type: 'borderColor',
     value: {
       default: 'gray-300',
+      forcedColors: 'ButtonBorder',
       isSelected: {
         selectionStyle: {
-          highlight: 'blue-900',
+          highlight: {
+            default: 'blue-900',
+            forcedColors: 'Highlight'
+          },
           checkbox: 'gray-300'
         }
-      },
-      forcedColors: 'ButtonBorder'
+      }
     }
   },
   borderTopWidth: 0,
@@ -359,17 +523,35 @@ const listitem = style<GridListItemRenderProps & {
 });
 
 const insetBorderRadius = 'calc(var(--radius) - 1px)';
+const rootDropSelectedRowBackground = colorMix('gray-25', 'blue-900', 28);
+const rowDropBackground = colorMix('gray-25', 'blue-900', 10);
+const rootRowDropStyles = {
+  // Unlike v3 tableview, v3 listview has the same background color for the listview itself and the rows when
+  // dropping on root
+  default: dropTargetBackground,
+  isSelected: rootDropSelectedRowBackground,
+  forcedColors: 'Background'
+} as const;
+const rowDropStyles = {
+  // Also unlike v3, dropping on a selected row vs a non selected row doesn't have any difference in background color
+  default: rowDropBackground,
+  isSelected: rowDropBackground,
+  forcedColors: 'Background'
+} as const;
 
-const listRowBackground = style<GridListItemRenderProps & {
-  isFirstItem?: boolean,
-  isLastItem?: boolean,
-  isQuiet?: boolean,
-  isPrevSelected?: boolean,
-  isNextSelected?: boolean,
-  isPrevNotSelected?: boolean,
-  isNextNotSelected?: boolean,
-  selectionStyle?: 'highlight' | 'checkbox'
-}>({
+const listRowBackground = style<
+  GridListItemRenderProps & {
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+    isQuiet?: boolean;
+    isPrevSelected?: boolean;
+    isNextSelected?: boolean;
+    isPrevNotSelected?: boolean;
+    isNextNotSelected?: boolean;
+    selectionStyle?: 'highlight' | 'checkbox';
+    isDropTarget?: boolean;
+  }
+>({
   position: 'absolute',
   zIndex: -1,
   top: {
@@ -417,13 +599,15 @@ const listRowBackground = style<GridListItemRenderProps & {
       }
     },
     forcedColors: {
-      default: 'Background',
+      default: 'transparent',
       selectionStyle: {
         highlight: {
           isSelected: 'Highlight'
         }
       }
-    }
+    },
+    ':is([role="grid"][data-drop-target] *)': rootRowDropStyles,
+    isDropTarget: rowDropStyles
   },
   borderTopStartRadius: {
     isQuiet: 'default',
@@ -436,7 +620,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         }
       },
       isQuiet: 'default'
-    }
+    },
+    isDropTarget: insetBorderRadius
   },
   borderTopEndRadius: {
     isQuiet: 'default',
@@ -449,7 +634,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         }
       },
       isQuiet: 'default'
-    }
+    },
+    isDropTarget: insetBorderRadius
   },
   borderBottomStartRadius: {
     isQuiet: 'default',
@@ -462,7 +648,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         }
       },
       isQuiet: 'default'
-    }
+    },
+    isDropTarget: insetBorderRadius
   },
   borderBottomEndRadius: {
     isQuiet: 'default',
@@ -475,7 +662,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         }
       },
       isQuiet: 'default'
-    }
+    },
+    isDropTarget: insetBorderRadius
   },
   borderTopWidth: {
     default: {
@@ -484,7 +672,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         highlight: 1
       }
     },
-    isPrevSelected: 0
+    isPrevSelected: 0,
+    isDropTarget: 2
   },
   borderBottomWidth: {
     default: {
@@ -493,7 +682,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         highlight: 1
       }
     },
-    isNextSelected: 0
+    isNextSelected: 0,
+    isDropTarget: 2
   },
   borderStartWidth: {
     default: {
@@ -501,7 +691,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         checkbox: 0,
         highlight: 1
       }
-    }
+    },
+    isDropTarget: 2
   },
   borderEndWidth: {
     default: {
@@ -509,7 +700,8 @@ const listRowBackground = style<GridListItemRenderProps & {
         checkbox: 0,
         highlight: 1
       }
-    }
+    },
+    isDropTarget: 2
   },
   borderStyle: 'solid',
   borderColor: {
@@ -519,20 +711,26 @@ const listRowBackground = style<GridListItemRenderProps & {
         checkbox: 'transparent',
         highlight: '--borderColor'
       }
+    },
+    isDropTarget: 'blue-800',
+    forcedColors: {
+      isDropTarget: 'Highlight'
     }
   }
 });
 
-let listRowFocusRing = style<GridListItemRenderProps & {
-  selectionStyle?: 'highlight' | 'checkbox',
-  isFirstItem?: boolean,
-  isPrevSelected?: boolean,
-  isPrevNotSelected?: boolean,
-  isNextSelected?: boolean,
-  isNextNotSelected?: boolean,
-  isLastItem?: boolean,
-  isQuiet?: boolean
-}>({
+let listRowFocusRing = style<
+  GridListItemRenderProps & {
+    selectionStyle?: 'highlight' | 'checkbox';
+    isFirstItem?: boolean;
+    isPrevSelected?: boolean;
+    isPrevNotSelected?: boolean;
+    isNextSelected?: boolean;
+    isNextNotSelected?: boolean;
+    isLastItem?: boolean;
+    isQuiet?: boolean;
+  }
+>({
   ...focusRing(),
   outlineOffset: {
     default: -2,
@@ -575,57 +773,8 @@ let listRowFocusRing = style<GridListItemRenderProps & {
   pointerEvents: 'none'
 });
 
-export let label = style({
-  gridArea: 'label',
-  alignSelf: 'center',
-  font: controlFont(),
-  color: 'inherit',
-  truncate: true,
-  whiteSpace: {
-    default: 'nowrap',
-    overflowMode: {
-      wrap: 'normal'
-    }
-  }
-});
-
-export let description = style({
-  gridArea: 'description',
-  alignSelf: 'center',
-  truncate: true,
-  whiteSpace: {
-    default: 'nowrap',
-    overflowMode: {
-      wrap: 'normal'
-    }
-  },
-  font: 'ui-sm',
-  color: {
-    default: baseColor('neutral-subdued'),
-    isDisabled: 'disabled',
-    forcedColors: 'inherit'
-  },
-  transition: 'default'
-});
-
-export let iconCenterWrapper = style({
-  display: 'flex',
-  gridArea: 'icon',
-  gridRowEnd: 'span 2',
-  alignSelf: 'center',
-  alignItems: 'center'
-});
-
-export let icon = style({
-  display: 'block',
-  size: fontRelative(20),
-  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes
-  // reminder, size of WF is applied via font size
-  marginEnd: 'text-to-visual',
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  }
+let rowWrapper = style({
+  display: 'contents'
 });
 
 let image = style({
@@ -673,6 +822,15 @@ const listTrailingIcon = style({
   marginStart: 'text-to-visual'
 });
 
+let dragButtonContainer = style({
+  gridArea: 'dragbutton',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center',
+  display: 'flex',
+  alignItems: 'center',
+  width: 10
+});
+
 const centeredWrapper = style({
   display: 'flex',
   alignItems: 'center',
@@ -705,41 +863,20 @@ function ListSelectionCheckbox({isDisabled}: {isDisabled: boolean}) {
   );
 }
 
-function isNextSelected(id: Key | undefined, state: ListState<unknown>) {
-  if (id == null || !state) {
-    return false;
-  }
-  let keyAfter = state.collection.getKeyAfter(id);
-  return keyAfter != null && state.selectionManager.isSelected(keyAfter);
-}
-export function isPrevSelected(id: Key | undefined, state: ListState<unknown>) {
-  if (id == null || !state) {
-    return false;
-  }
-  let keyBefore = state.collection.getKeyBefore(id);
-  return keyBefore != null && state.selectionManager.isSelected(keyBefore);
-}
-
-export function isFirstItem(id: Key | undefined, state: ListState<unknown>) {
-  if (id == null || !state) {
-    return false;
-  }
-  return state.collection.getFirstKey() === id;
-}
-function isLastItem(id: Key | undefined, state: ListState<unknown>) {
-  if (id == null || !state) {
-    return false;
-  }
-  return state.collection.getLastKey() === id;
-}
-
 export function ListViewItem(props: ListViewItemProps): ReactNode {
   let ref = useRef(null);
   let {hasChildItems, ...otherProps} = props;
   let isLink = props.href != null;
   let isLinkOut = isLink && props.target === '_blank';
-  let {isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon = false} = useContext(InternalListViewContext);
-  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
+  let {
+    isQuiet,
+    selectionStyle,
+    overflowMode,
+    scale,
+    hideLinkOutIcon = false
+  } = useContext(InternalListViewContext);
+  let textValue =
+    props.textValue || (typeof props.children === 'string' ? props.children : undefined);
   let {direction} = useLocale();
   let hasTrailingIcon = hasChildItems || (isLinkOut && !hideLinkOutIcon);
 
@@ -749,118 +886,187 @@ export function ListViewItem(props: ListViewItemProps): ReactNode {
       textValue={textValue}
       ref={ref}
       {...(hasTrailingIcon ? {'data-has-trailing-icon': ''} : {})}
-      className={renderProps => listitem({
-        ...renderProps,
-        isLink,
-        isQuiet,
-        scale,
-        selectionStyle,
-        isPrevNotSelected: !isPrevSelected(renderProps.id, renderProps.state),
-        isNextSelected: isNextSelected(renderProps.id, renderProps.state),
-        isNextNotSelected: !isNextSelected(renderProps.id, renderProps.state),
-        isFirstItem: isFirstItem(renderProps.id, renderProps.state),
-        isLastItem: isLastItem(renderProps.id, renderProps.state)
-      })}>
-      {(renderProps) => {
+      className={renderProps =>
+        listitem({
+          ...renderProps,
+          isLink,
+          isQuiet,
+          scale,
+          selectionStyle,
+          isPrevNotSelected: !isPrevSelected(renderProps.id, renderProps.state),
+          isNextSelected: isNextSelected(renderProps.id, renderProps.state),
+          isNextNotSelected: !isNextSelected(renderProps.id, renderProps.state),
+          isFirstItem: isFirstItem(renderProps.id, renderProps.state),
+          isLastItem: isLastItem(renderProps.id, renderProps.state)
+        })
+      }>
+      {renderProps => {
         let {children} = props;
-        let {selectionMode, selectionBehavior, isDisabled, id, state} = renderProps;
+        let {
+          selectionMode,
+          selectionBehavior,
+          isDisabled,
+          id,
+          state,
+          allowsDragging,
+          isFocusVisibleWithin
+        } = renderProps;
         return (
           <Provider
             values={[
-              [TextContext, {
-                slots: {
-                  [DEFAULT_SLOT]: {styles: label({...renderProps, overflowMode})},
-                  label: {styles: label({...renderProps, overflowMode})},
-                  description: {styles: description({...renderProps, overflowMode})}
+              [
+                TextContext,
+                {
+                  slots: {
+                    [DEFAULT_SLOT]: {styles: label({...renderProps, overflowMode})},
+                    label: {styles: label({...renderProps, overflowMode})},
+                    description: {styles: description({...renderProps, overflowMode})}
+                  }
                 }
-              }],
-              [IconContext, {
-                slots: {
-                  icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
+              ],
+              [
+                IconContext,
+                {
+                  slots: {
+                    icon: {
+                      render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
+                      styles: icon
+                    }
+                  }
                 }
-              }],
+              ],
               [ImageContext, {styles: image}],
-              [ActionButtonGroupContext, {
-                styles: actionButtonGroup,
-                size: 'S',
-                isQuiet: true
-              }],
-              [ActionMenuContext, {
-                styles: listActionMenu,
-                isQuiet: true,
-                size: 'S',
-                isDisabled
-              }]
+              [
+                ActionButtonGroupContext,
+                {
+                  styles: actionButtonGroup,
+                  size: 'S',
+                  isQuiet: true
+                }
+              ],
+              [
+                ActionMenuContext,
+                {
+                  styles: listActionMenu,
+                  isQuiet: true,
+                  size: 'S',
+                  isDisabled
+                }
+              ]
             ]}>
-            <div
-              className={
-                listRowBackground({
-                  ...renderProps,
-                  selectionStyle,
-                  isQuiet,
-                  isPrevSelected: isPrevSelected(id, state),
-                  isNextSelected: isNextSelected(id, state),
-                  isPrevNotSelected: !isPrevSelected(id, state),
-                  isNextNotSelected: !isNextSelected(id, state),
-                  isFirstItem: isFirstItem(id, state),
-                  isLastItem: isLastItem(id, state)
-                })
-              } />
-            {renderProps.isFocusVisible &&
+            <div className={rowWrapper}>
               <div
-                className={listRowFocusRing({
+                className={listRowBackground({
                   ...renderProps,
                   selectionStyle,
                   isQuiet,
+                  isDropTarget: renderProps.isDropTarget,
                   isPrevSelected: isPrevSelected(id, state),
                   isNextSelected: isNextSelected(id, state),
                   isPrevNotSelected: !isPrevSelected(id, state),
                   isNextNotSelected: !isNextSelected(id, state),
                   isFirstItem: isFirstItem(id, state),
                   isLastItem: isLastItem(id, state)
-                })} />
-            }
-            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
-              <ListSelectionCheckbox isDisabled={isDisabled} />
-            )}
-            {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
-            {isLinkOut && !hideLinkOutIcon && (
-              <div className={listTrailingIcon}>
-                <LinkOutIcon
-                  size="M"
-                  className={style({
-                    scaleX: {
-                      direction: {
-                        rtl: -1
+                })}
+              />
+              {renderProps.isFocusVisible && (
+                <div
+                  className={listRowFocusRing({
+                    ...renderProps,
+                    selectionStyle,
+                    isQuiet,
+                    isPrevSelected: isPrevSelected(id, state),
+                    isNextSelected: isNextSelected(id, state),
+                    isPrevNotSelected: !isPrevSelected(id, state),
+                    isNextNotSelected: !isNextSelected(id, state),
+                    isFirstItem: isFirstItem(id, state),
+                    isLastItem: isLastItem(id, state)
+                  })}
+                />
+              )}
+              {allowsDragging && (
+                <div className={dragButtonContainer}>
+                  {!isDisabled && <DragHandleButton isFocusVisibleWithin={isFocusVisibleWithin} />}
+                </div>
+              )}
+              {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
+                <ListSelectionCheckbox isDisabled={isDisabled} />
+              )}
+              {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+              {isLinkOut && !hideLinkOutIcon && (
+                <div className={listTrailingIcon}>
+                  <LinkOutIcon
+                    size="M"
+                    className={style({
+                      scaleX: {
+                        direction: {
+                          rtl: -1
+                        }
+                      },
+                      '--iconPrimary': {
+                        type: 'fill',
+                        value: 'currentColor'
                       }
-                    },
-                    '--iconPrimary': {
-                      type: 'fill',
-                      value: 'currentColor'
-                    }
-                  })({direction})} />
-              </div>
-            )}
-            {hasChildItems && !isLinkOut && (
-              <div className={listTrailingIcon}>
-                <Chevron
-                  className={style({
-                    scale: {
-                      direction: {
-                        ltr: '1',
-                        rtl: '-1'
+                    })({direction})}
+                  />
+                </div>
+              )}
+              {hasChildItems && !isLinkOut && (
+                <div className={listTrailingIcon}>
+                  <Chevron
+                    className={style({
+                      scale: {
+                        direction: {
+                          ltr: '1',
+                          rtl: '-1'
+                        }
+                      },
+                      '--iconPrimary': {
+                        type: 'fill',
+                        value: 'currentColor'
                       }
-                    },
-                    '--iconPrimary': {
-                      type: 'fill',
-                      value: 'currentColor'
-                    }
-                  })({direction})} />
-              </div>
-            )}
+                    })({direction})}
+                  />
+                </div>
+              )}
+            </div>
           </Provider>
         );
       }}
     </GridListItem>
   );
 }
+
+function isNextSelected(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  let keyAfter = state.collection.getKeyAfter(id);
+  return keyAfter != null && state.selectionManager.isSelected(keyAfter);
+}
+
+function isPrevSelected(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  let keyBefore = state.collection.getKeyBefore(id);
+  return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
+
+function isFirstItem(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  return state.collection.getFirstKey() === id;
+}
+
+function isLastItem(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+
+  let key = state.collection.getLastKey();
+  let node = key ? state.collection.getItem(key) : null;
+
+  return node ? node.key === id : false;
+}