@react-aria/dnd 3.7.4 → 3.8.0

package/src/useDrop.ts

@@ -15,13 +15,13 @@ import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, globalAllowedDropOperations, globalDndState, readFromDataTransfer, setGlobalDnDState, setGlobalDropEffect} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
-import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes, RefObject} from '@react-types/shared';
+import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, FocusableElement, DragTypes as IDragTypes, RefObject} from '@react-types/shared';
 import {isIPad, isMac, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DropOptions {
   /** A ref for the droppable element. */
-  ref: RefObject<HTMLElement | null>,
+  ref: RefObject<FocusableElement | null>,
   /**
    * A function returning the drop operation to be performed when items matching the given types are dropped
    * on the drop target.
@@ -72,13 +72,20 @@ const DROP_ACTIVATE_TIMEOUT = 800;
 export function useDrop(options: DropOptions): DropResult {
   let {hasDropButton, isDisabled} = options;
   let [isDropTarget, setDropTarget] = useState(false);
-  let state = useRef({
+  let state = useRef<{
+    x: number,
+    y: number,
+    dragOverElements: Set<Element>,
+    dropEffect: DataTransfer['dropEffect'],
+    allowedOperations: DROP_OPERATION,
+    dropActivateTimer: ReturnType<typeof setTimeout> | undefined
+  }>({
     x: 0,
     y: 0,
     dragOverElements: new Set<Element>(),
-    dropEffect: 'none' as DataTransfer['dropEffect'],
+    dropEffect: 'none',
     allowedOperations: DROP_OPERATION.all,
-    dropActivateTimer: null
+    dropActivateTimer: undefined
   }).current;
 
   let fireDropEnter = (e: DragEvent) => {
@@ -164,10 +171,11 @@ export function useDrop(options: DropOptions): DropResult {
 
     clearTimeout(state.dropActivateTimer);
 
-    if (typeof options.onDropActivate === 'function' && state.dropEffect !== 'none') {
+    if (options.onDropActivate && typeof options.onDropActivate === 'function' && state.dropEffect !== 'none') {
+      let onDropActivateOptions = options.onDropActivate;
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       state.dropActivateTimer = setTimeout(() => {
-        options.onDropActivate({
+        onDropActivateOptions({
           type: 'dropactivate',
           x: state.x - rect.x,
           y: state.y - rect.y
@@ -315,7 +323,7 @@ export function useDrop(options: DropOptions): DropResult {
 
   let {ref} = options;
   useLayoutEffect(() => {
-    if (isDisabled) {
+    if (isDisabled || !ref.current) {
       return;
     }
     return DragManager.registerDropTarget({
@@ -415,7 +423,7 @@ function getAllowedOperations(e: DragEvent) {
 }
 
 function allowedOperationsToArray(allowedOperationsBits: DROP_OPERATION) {
-  let allowedOperations = [];
+  let allowedOperations: Array<DropOperation> = [];
   if (allowedOperationsBits & DROP_OPERATION.move) {
     allowedOperations.push('move');
   }

package/src/useDropIndicator.ts

@@ -49,10 +49,16 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
   let dragSession = DragManager.useDragSession();
   let {dropProps} = useDroppableItem(props, state, ref);
   let id = useId();
-  let getText = (key: Key) => collection.getTextValue?.(key) ?? collection.getItem(key)?.textValue;
+  let getText = (key: Key | null) => {
+    if (key == null) {
+      return '';
+    } else {
+      return collection.getTextValue?.(key) ?? collection.getItem(key)?.textValue ?? '';
+    }
+  };
 
   let label = '';
-  let labelledBy: string;
+  let labelledBy: string | undefined;
   if (target.type === 'root') {
     label = stringFormatter.format('dropOnRoot');
     labelledBy = `${id} ${getDroppableCollectionId(state)}`;
@@ -61,8 +67,8 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
       itemText: getText(target.key)
     });
   } else {
-    let before: Key | null;
-    let after: Key | null;
+    let before: Key | null | undefined;
+    let after: Key | null | undefined;
     if (collection.getFirstKey() === target.key && target.dropPosition === 'before') {
       before = null;
     } else {

package/src/useDroppableCollection.ts

@@ -56,12 +56,12 @@ export interface DroppableCollectionResult {
 
 interface DroppingState {
   collection: Collection<Node<unknown>>,
-  focusedKey: Key,
+  focusedKey: Key | null,
   selectedKeys: Set<Key>,
   target: DropTarget,
-  draggingKeys: Set<Key>,
+  draggingKeys: Set<Key | null | undefined>,
   isInternal: boolean,
-  timeout: ReturnType<typeof setTimeout>
+  timeout: ReturnType<typeof setTimeout> | undefined
 }
 
 const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
@@ -72,7 +72,12 @@ const DROP_POSITIONS_RTL: DropPosition[] = ['after', 'on', 'before'];
  * based drag and drop, in addition to full parity for keyboard and screen reader users.
  */
 export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>): DroppableCollectionResult {
-  let localState = useRef({
+  let localState = useRef<{
+    props: DroppableCollectionOptions,
+    state: DroppableCollectionState,
+    nextTarget: DropTarget | null,
+    dropOperation: DropOperation | null
+  }>({
     props,
     state,
     nextTarget: null,
@@ -149,10 +154,14 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
   let {dropProps} = useDrop({
     ref,
     onDropEnter() {
-      state.setTarget(localState.nextTarget);
+      if (localState.nextTarget != null) {
+        state.setTarget(localState.nextTarget);
+      }
     },
     onDropMove(e) {
-      state.setTarget(localState.nextTarget);
+      if (localState.nextTarget != null) {
+        state.setTarget(localState.nextTarget);
+      }
       autoScroll.move(e.x, e.y);
     },
     getDropOperationForPoint(types, allowedOperations, x, y) {
@@ -228,7 +237,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         isInternal,
         draggingKeys
       } = droppingState.current;
-      
+
       // If an insert occurs during a drop, we want to immediately select these items to give
       // feedback to the user that a drop occurred. Only do this if the selection didn't change
       // since the drop started so we don't override if the user or application did something.
@@ -264,6 +273,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           }
         }
       } else if (
+        prevFocusedKey != null &&
         state.selectionManager.focusedKey === prevFocusedKey &&
         isInternal &&
         target.type === 'item' &&
@@ -271,12 +281,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         draggingKeys.has(state.collection.getItem(prevFocusedKey)?.parentKey)
       ) {
         // Focus row instead of cell when reordering.
-        state.selectionManager.setFocusedKey(state.collection.getItem(prevFocusedKey).parentKey);
+        state.selectionManager.setFocusedKey(state.collection.getItem(prevFocusedKey)?.parentKey ?? null);
         setInteractionModality('keyboard');
       } else if (
         state.selectionManager.focusedKey === prevFocusedKey &&
-        target.type === 'item' && 
-        target.dropPosition === 'on' && 
+        target.type === 'item' &&
+        target.dropPosition === 'on' &&
         state.collection.getItem(target.key) != null
       ) {
         // If focus didn't move already (e.g. due to an insert), and the user dropped on an item,
@@ -284,7 +294,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
         state.selectionManager.setFocusedKey(target.key);
         setInteractionModality('keyboard');
-      } else if (!state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
+      } else if (state.selectionManager.focusedKey != null && !state.selectionManager.isSelected(state.selectionManager.focusedKey)) {
         setInteractionModality('keyboard');
       }
 
@@ -294,10 +304,10 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
   let onDrop = useCallback((e: DropEvent, target: DropTarget) => {
     let {state} = localState;
-    
+
     // Save some state of the collection/selection before the drop occurs so we can compare later.
     droppingState.current = {
-      timeout: null,
+      timeout: undefined,
       focusedKey: state.selectionManager.focusedKey,
       collection: state.collection,
       selectedKeys: state.selectionManager.selectedKeys,
@@ -325,7 +335,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     }, 50);
   }, [localState, defaultOnDrop, ref, updateFocusAfterDrop]);
 
-  // eslint-disable-next-line arrow-body-style
+   
   useEffect(() => {
     return () => {
       if (droppingState.current) {
@@ -343,7 +353,11 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
   let {direction} = useLocale();
   useEffect(() => {
-    let getNextTarget = (target: DropTarget, wrap = true, horizontal = false): DropTarget => {
+    if (!ref.current) {
+      return;
+    }
+
+    let getNextTarget = (target: DropTarget | null | undefined, wrap = true, horizontal = false): DropTarget | null => {
       if (!target) {
         return {
           type: 'root'
@@ -351,11 +365,11 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       }
 
       let {keyboardDelegate} = localState.props;
-      let nextKey: Key;
+      let nextKey: Key | null | undefined;
       if (target?.type === 'item') {
-        nextKey = horizontal ? keyboardDelegate.getKeyRightOf(target.key) : keyboardDelegate.getKeyBelow(target.key);
+        nextKey = horizontal ? keyboardDelegate.getKeyRightOf?.(target.key) : keyboardDelegate.getKeyBelow?.(target.key);
       } else {
-        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getLastKey() : keyboardDelegate.getFirstKey();
+        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getLastKey?.() : keyboardDelegate.getFirstKey?.();
       }
       let dropPositions = horizontal && direction === 'rtl' ? DROP_POSITIONS_RTL : DROP_POSITIONS;
       let dropPosition: DropPosition = dropPositions[0];
@@ -403,13 +417,13 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       };
     };
 
-    let getPreviousTarget = (target: DropTarget, wrap = true, horizontal = false): DropTarget => {
+    let getPreviousTarget = (target: DropTarget | null | undefined, wrap = true, horizontal = false): DropTarget | null => {
       let {keyboardDelegate} = localState.props;
-      let nextKey: Key;
+      let nextKey: Key | null | undefined;
       if (target?.type === 'item') {
-        nextKey = horizontal ? keyboardDelegate.getKeyLeftOf(target.key) : keyboardDelegate.getKeyAbove(target.key);
+        nextKey = horizontal ? keyboardDelegate.getKeyLeftOf?.(target.key) : keyboardDelegate.getKeyAbove?.(target.key);
       } else {
-        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getFirstKey() : keyboardDelegate.getLastKey();
+        nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getFirstKey?.() : keyboardDelegate.getLastKey?.();
       }
       let dropPositions = horizontal && direction === 'rtl' ? DROP_POSITIONS_RTL : DROP_POSITIONS;
       let dropPosition: DropPosition = !target || target.type === 'root' ? dropPositions[2] : 'on';
@@ -458,12 +472,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     };
 
     let nextValidTarget = (
-      target: DropTarget,
+      target: DropTarget | null | undefined,
       types: Set<string>,
       allowedDropOperations: DropOperation[],
-      getNextTarget: (target: DropTarget, wrap: boolean) => DropTarget,
+      getNextTarget: (target: DropTarget | null | undefined, wrap: boolean) => DropTarget | null,
       wrap = true
-    ): DropTarget => {
+    ): DropTarget | null => {
       let seenRoot = 0;
       let operation: DropOperation;
       let {draggingKeys} = globalDndState;
@@ -509,18 +523,18 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       onDropEnter(e, drag) {
         let types = getTypes(drag.items);
         let selectionManager = localState.state.selectionManager;
-        let target: DropTarget;
+        let target: DropTarget | null = null;
         // Update the drop collection ref tracker for useDroppableItem's getDropOperation isInternal check
         setDropCollectionRef(ref);
 
         // When entering the droppable collection for the first time, the default drop target
         // is after the focused key.
-        let key = selectionManager.focusedKey;
+        let key: Key | null | undefined = selectionManager.focusedKey;
         let dropPosition: DropPosition = 'after';
 
         // If the focused key is a cell, get the parent item instead.
         // For now, we assume that individual cells cannot be dropped on.
-        let item = localState.state.collection.getItem(key);
+        let item = key != null ? localState.state.collection.getItem(key) : null;
         if (item?.type === 'cell') {
           key = item.parentKey;
         }
@@ -529,7 +543,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // But if the focused key is the first selected item, then default to before the first selected item.
         // This is to make reordering lists slightly easier. If you select top down, we assume you want to
         // move the items down. If you select bottom up, we assume you want to move the items up.
-        if (selectionManager.isSelected(key)) {
+        if (key != null && selectionManager.isSelected(key)) {
           if (selectionManager.selectedKeys.size > 1 && selectionManager.firstSelectedKey === key) {
             dropPosition = 'before';
           } else {
@@ -640,19 +654,25 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
                 target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
               } else {
                 // If on the root, go to the item a page below the top. Otherwise a page below the current item.
-                let nextKey = keyboardDelegate.getKeyPageBelow(
-                  target.type === 'item'
-                    ? target.key
-                    : keyboardDelegate.getFirstKey()
-                );
+                let targetKey = keyboardDelegate.getFirstKey?.();
+                if (target.type === 'item') {
+                  targetKey = target.key;
+                }
+                let nextKey: Key | null = null;
+                if (targetKey != null) {
+                  nextKey = keyboardDelegate.getKeyPageBelow(targetKey);
+                }
                 let dropPosition = target.type === 'item' ? target.dropPosition : 'after';
 
                 // If there is no next key, or we are starting on the last key, jump to the last possible position.
-                if (nextKey == null || (target.type === 'item' && target.key === keyboardDelegate.getLastKey())) {
-                  nextKey = keyboardDelegate.getLastKey();
+                if (nextKey == null || (target.type === 'item' && target.key === keyboardDelegate.getLastKey?.())) {
+                  nextKey = keyboardDelegate.getLastKey?.() ?? null;
                   dropPosition = 'after';
                 }
 
+                if (nextKey == null) {
+                  break;
+                }
                 target = {
                   type: 'item',
                   key: nextKey,
@@ -684,18 +704,21 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
               target = nextValidTarget(null, types, drag.allowedDropOperations, getPreviousTarget);
             } else if (target.type === 'item') {
               // If at the top already, switch to the root. Otherwise navigate a page up.
-              if (target.key === keyboardDelegate.getFirstKey()) {
+              if (target.key === keyboardDelegate.getFirstKey?.()) {
                 target = {
                   type: 'root'
                 };
               } else {
-                let nextKey = keyboardDelegate.getKeyPageAbove(target.key);
+                let nextKey: Key | null | undefined = keyboardDelegate.getKeyPageAbove(target.key);
                 let dropPosition = target.dropPosition;
                 if (nextKey == null) {
-                  nextKey = keyboardDelegate.getFirstKey();
+                  nextKey = keyboardDelegate.getFirstKey?.();
                   dropPosition = 'before';
                 }
 
+                if (nextKey == null) {
+                  break;
+                }
                 target = {
                   type: 'item',
                   key: nextKey,

package/src/useVirtualDrop.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes} from '@react-types/shared';
+import {AriaButtonProps} from '@react-types/button';
+import {DOMAttributes} from 'react';
 import * as DragManager from './DragManager';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -19,7 +20,7 @@ import {useDragModality} from './utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 interface VirtualDropResult {
-  dropProps: DOMAttributes
+  dropProps: AriaButtonProps & DOMAttributes<HTMLDivElement>
 }
 
 const MESSAGES = {

package/src/utils.ts

@@ -24,7 +24,7 @@ export const droppableCollectionMap = new WeakMap<DroppableCollectionState, Drop
 export const DIRECTORY_DRAG_TYPE = Symbol();
 
 export function getDroppableCollectionId(state: DroppableCollectionState) {
-  let {id} = droppableCollectionMap.get(state);
+  let {id} = droppableCollectionMap.get(state) || {};
   if (!id) {
     throw new Error('Droppable item outside a droppable collection');
   }
@@ -33,7 +33,7 @@ export function getDroppableCollectionId(state: DroppableCollectionState) {
 }
 
 export function getDroppableCollectionRef(state: DroppableCollectionState) {
-  let {ref} = droppableCollectionMap.get(state);
+  let {ref} = droppableCollectionMap.get(state) || {};
   if (!ref) {
     throw new Error('Droppable item outside a droppable collection');
   }
@@ -52,7 +52,7 @@ export function getTypes(items: DragItem[]): Set<string> {
   return types;
 }
 
-function mapModality(modality: string) {
+function mapModality(modality: string | null) {
   if (!modality) {
     modality = 'virtual';
   }
@@ -91,7 +91,7 @@ export function writeToDataTransfer(dataTransfer: DataTransfer, items: DragItem[
   // See e.g. https://bugs.chromium.org/p/chromium/issues/detail?id=438479.
   let groupedByType = new Map<string, string[]>();
   let needsCustomData = false;
-  let customData = [];
+  let customData: Array<{}> = [];
   for (let item of items) {
     let types = Object.keys(item);
     if (types.length > 1) {
@@ -177,6 +177,9 @@ export class DragTypes implements IDragTypes {
 
 export function readFromDataTransfer(dataTransfer: DataTransfer) {
   let items: DropItem[] = [];
+  if (!dataTransfer) {
+    return items;
+  }
 
   // If our custom drag type is available, use that. This is a JSON serialized
   // representation of all items in the drag, set when there are multiple items
@@ -195,7 +198,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
       }
 
       hasCustomType = true;
-    } catch (e) {
+    } catch {
       // ignore
     }
   }
@@ -214,7 +217,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
         // In the future, we may use getAsFileSystemHandle instead, but that's currently
         // only implemented in Chrome.
         if (typeof item.webkitGetAsEntry === 'function') {
-          let entry: FileSystemEntry = item.webkitGetAsEntry();
+          let entry: FileSystemEntry | null = item.webkitGetAsEntry();
           // eslint-disable-next-line max-depth
           if (!entry) {
             // For some reason, Firefox includes an item with type image/png when copy
@@ -269,7 +272,10 @@ function blobToString(blob: Blob): Promise<string> {
   });
 }
 
-function createFileItem(file: File): FileDropItem {
+function createFileItem(file: File | null): FileDropItem {
+  if (!file) {
+    throw new Error('No file provided');
+  }
   return {
     kind: 'file',
     type: file.type || GENERIC_TYPE,
@@ -348,7 +354,7 @@ export function setDraggingKeys(keys: Set<Key>) {
   globalDndState.draggingKeys = keys;
 }
 
-export function setDropCollectionRef(ref: RefObject<HTMLElement | null>) {
+export function setDropCollectionRef(ref?: RefObject<HTMLElement | null>) {
   globalDndState.dropCollectionRef = ref;
 }
 
@@ -368,8 +374,8 @@ export function isInternalDropOperation(ref?: RefObject<HTMLElement | null>) {
 }
 
 type DropEffect = 'none' | 'copy' | 'link' | 'move';
-export let globalDropEffect: DropEffect;
-export function setGlobalDropEffect(dropEffect: DropEffect) {
+export let globalDropEffect: DropEffect | undefined;
+export function setGlobalDropEffect(dropEffect: DropEffect | undefined) {
   globalDropEffect = dropEffect;
 }