@react-spectrum/list 3.0.1-nightly.3491 → 3.0.1-nightly.3506

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/list",
-  "version": "3.0.1-nightly.3491+25a36b7d4",
+  "version": "3.0.1-nightly.3506+5c9db40f1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -32,34 +32,34 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/button": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-aria/focus": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-aria/gridlist": "3.0.1-nightly.3491+25a36b7d4",
-    "@react-aria/i18n": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-aria/interactions": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-aria/utils": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-aria/virtualizer": "3.5.1-nightly.3491+25a36b7d4",
-    "@react-aria/visually-hidden": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-spectrum/checkbox": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-spectrum/layout": "3.4.2-nightly.3491+25a36b7d4",
-    "@react-spectrum/progress": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-spectrum/text": "3.3.2-nightly.3491+25a36b7d4",
-    "@react-spectrum/utils": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-stately/collections": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-stately/layout": "3.7.2-nightly.3491+25a36b7d4",
-    "@react-stately/list": "3.5.4-nightly.3491+25a36b7d4",
-    "@react-stately/virtualizer": "3.3.1-nightly.3491+25a36b7d4",
-    "@react-types/grid": "3.1.4-nightly.3491+25a36b7d4",
-    "@react-types/shared": "3.0.0-nightly.1791+25a36b7d4",
-    "@spectrum-icons/ui": "3.0.0-nightly.1791+25a36b7d4",
+    "@react-aria/button": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-aria/focus": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-aria/gridlist": "3.0.1-nightly.3506+5c9db40f1",
+    "@react-aria/i18n": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-aria/interactions": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-aria/utils": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-aria/virtualizer": "3.5.1-nightly.3506+5c9db40f1",
+    "@react-aria/visually-hidden": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-spectrum/checkbox": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-spectrum/layout": "3.4.2-nightly.3506+5c9db40f1",
+    "@react-spectrum/progress": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-spectrum/text": "3.3.2-nightly.3506+5c9db40f1",
+    "@react-spectrum/utils": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-stately/collections": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-stately/layout": "3.7.2-nightly.3506+5c9db40f1",
+    "@react-stately/list": "3.5.4-nightly.3506+5c9db40f1",
+    "@react-stately/virtualizer": "3.3.1-nightly.3506+5c9db40f1",
+    "@react-types/grid": "3.1.4-nightly.3506+5c9db40f1",
+    "@react-types/shared": "3.0.0-nightly.1806+5c9db40f1",
+    "@spectrum-icons/ui": "3.0.0-nightly.1806+5c9db40f1",
     "react-transition-group": "^2.2.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-aria/dnd": "3.0.0-nightly.3491+25a36b7d4",
-    "@react-spectrum/button": "3.0.0-nightly.1791+25a36b7d4",
-    "@react-spectrum/dnd": "3.0.0-nightly.3491+25a36b7d4",
-    "@react-stately/dnd": "3.0.0-nightly.3491+25a36b7d4"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-aria/dnd": "3.0.0-nightly.3506+5c9db40f1",
+    "@react-spectrum/button": "3.0.0-nightly.1806+5c9db40f1",
+    "@react-spectrum/dnd": "3.0.0-nightly.3506+5c9db40f1",
+    "@react-stately/dnd": "3.0.0-nightly.3506+5c9db40f1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.2.0",
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "25a36b7d40a7b20ff9ea67850c456119788c64d6"
+  "gitHead": "5c9db40f10b9e68d4eab0268b9775baf2a840987"
 }

package/src/InsertionIndicator.tsx

@@ -11,11 +11,11 @@ interface InsertionIndicatorProps {
 }
 
 export default function InsertionIndicator(props: InsertionIndicatorProps) {
-  let {dropState, dndHooks} = useContext(ListViewContext);
+  let {dropState, dragAndDropHooks} = useContext(ListViewContext);
   const {target, isPresentationOnly} = props;
 
   let ref = useRef();
-  let {dropIndicatorProps} = dndHooks.useDropIndicator(props, dropState, ref);
+  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator(props, dropState, ref);
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   let isDropTarget = dropState.isDropTarget(target);

package/src/ListView.tsx

@@ -13,7 +13,7 @@
 import {AriaGridListProps, useGridList} from '@react-aria/gridlist';
 import {AsyncLoadable, DOMRef, LoadingState, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import type {DnDHooks} from '@react-spectrum/dnd';
+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';
@@ -56,17 +56,16 @@ export interface SpectrumListViewProps<T> extends AriaGridListProps<T>, StylePro
    */
   onAction?: (key: Key) => void,
   /**
-   * The drag and drop hooks returned by `useDnDHooks` used to enable drag and drop behavior for the ListView.
-   * @private
+   * The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListView.
    */
-  dndHooks?: DnDHooks['dndHooks']
+  dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
 }
 
 interface ListViewContextValue<T> {
   state: ListState<T>,
   dragState: DraggableCollectionState,
   dropState: DroppableCollectionState,
-  dndHooks: DnDHooks['dndHooks'],
+  dragAndDropHooks: DragAndDropHooks['dragAndDropHooks'],
   onAction:(key: Key) => void,
   isListDraggable: boolean,
   isListDroppable: boolean,
@@ -118,11 +117,11 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
     isQuiet,
     overflowMode = 'truncate',
     onAction,
-    dndHooks,
+    dragAndDropHooks,
     ...otherProps
   } = props;
-  let isListDraggable = !!dndHooks?.useDraggableCollectionState;
-  let isListDroppable = !!dndHooks?.useDroppableCollectionState;
+  let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
+  let isListDroppable = !!dragAndDropHooks?.useDroppableCollectionState;
   let dragHooksProvided = useRef(isListDraggable);
   let dropHooksProvided = useRef(isListDroppable);
   if (dragHooksProvided.current !== isListDraggable) {
@@ -144,12 +143,12 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
   let dragState: DraggableCollectionState;
   let preview = useRef(null);
   if (isListDraggable) {
-    dragState = dndHooks.useDraggableCollectionState({
+    dragState = dragAndDropHooks.useDraggableCollectionState({
       collection,
       selectionManager,
       preview
     });
-    dndHooks.useDraggableCollection({}, dragState, domRef);
+    dragAndDropHooks.useDraggableCollection({}, dragState, domRef);
   }
   let layout = useListLayout(
     state,
@@ -160,16 +159,16 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
   layout.allowDisabledKeyFocus = state.selectionManager.disabledBehavior === 'selection' || !!dragState?.draggingKeys.size;
 
 
-  let DragPreview = dndHooks?.DragPreview;
+  let DragPreview = dragAndDropHooks?.DragPreview;
   let dropState: DroppableCollectionState;
   let droppableCollection: DroppableCollectionResult;
   let isRootDropTarget: boolean;
   if (isListDroppable) {
-    dropState = dndHooks.useDroppableCollectionState({
+    dropState = dragAndDropHooks.useDroppableCollectionState({
       collection,
       selectionManager
     });
-    droppableCollection = dndHooks.useDroppableCollection({
+    droppableCollection = dragAndDropHooks.useDroppableCollection({
       keyboardDelegate: layout,
       dropTargetDelegate: layout
     }, dropState, domRef);
@@ -206,7 +205,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
   let hasAnyChildren = useMemo(() => [...collection].some(item => item.hasChildNodes), [collection]);
 
   return (
-    <ListViewContext.Provider value={{state, dragState, dropState, dndHooks, onAction, isListDraggable, isListDroppable, layout, loadingState}}>
+    <ListViewContext.Provider value={{state, dragState, dropState, dragAndDropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState}}>
       <FocusScope>
         <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
           <Virtualizer

package/src/ListViewItem.tsx

@@ -49,7 +49,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     isListDraggable,
     isListDroppable,
     layout,
-    dndHooks,
+    dragAndDropHooks,
     loadingState
   } = useContext(ListViewContext);
   let {direction} = useLocale();
@@ -82,7 +82,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   let draggableItem: DraggableItemResult;
   if (isListDraggable) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    draggableItem = dndHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
+    draggableItem = dragAndDropHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
     if (isDisabled) {
       draggableItem = null;
     }
@@ -95,7 +95,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;
     isDropTarget = dropState.isDropTarget(target);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    dropIndicator = dndHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
+    dropIndicator = dragAndDropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
   }
 
   let dragButtonRef = React.useRef();
@@ -147,7 +147,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     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
-    dndHooks?.isVirtualDragging() && {tabIndex: null}
+    dragAndDropHooks?.isVirtualDragging() && {tabIndex: null}
   );
 
   let isFirstRow = item.prevKey == null;

package/src/RootDropIndicator.tsx

@@ -3,9 +3,9 @@ import React, {useContext, useRef} from 'react';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export default function RootDropIndicator() {
-  let {dropState, dndHooks} = useContext(ListViewContext);
+  let {dropState, dragAndDropHooks} = useContext(ListViewContext);
   let ref = useRef();
-  let {dropIndicatorProps} = dndHooks.useDropIndicator({
+  let {dropIndicatorProps} = dragAndDropHooks.useDropIndicator({
     target: {type: 'root'}
   }, dropState, ref);
   let isDropTarget = dropState.isDropTarget({type: 'root'});
@@ -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>
   );