@react-aria/dnd 3.0.0-alpha.9 → 3.0.0-nightly-4980928d3-240906

package/src/useDraggableItem.ts

@@ -11,55 +11,148 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
+import {clearGlobalDnDState, isInternalDropOperation, setDraggingKeys, useDragModality} from './utils';
 import {DraggableCollectionState} from '@react-stately/dnd';
-import {HTMLAttributes, Key} from 'react';
+import {HTMLAttributes} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {Key} from '@react-types/shared';
+import {useDescription} from '@react-aria/utils';
 import {useDrag} from './useDrag';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DraggableItemProps {
-  key: Key
+  /** The key of the draggable item within the collection. */
+  key: Key,
+  /**
+   * Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode.
+   * If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.
+   */
+  hasDragButton?: boolean,
+  /**
+   * Whether the item has a primary action (e.g. Enter key or long press) that would
+   * conflict with initiating accessible drag and drop. If true, the Alt key must be held to
+   * start dragging with a keyboard, and long press is disabled until selection mode is entered.
+   * This should be passed from the associated collection item hook (e.g. useOption, useGridListItem, etc.).
+   */
+  hasAction?: boolean
 }
 
 export interface DraggableItemResult {
+  /** Props for the draggable item. */
   dragProps: HTMLAttributes<HTMLElement>,
+  /** Props for the explicit drag button affordance, if any. */
   dragButtonProps: AriaButtonProps
 }
 
+const MESSAGES = {
+  keyboard: {
+    selected: 'dragSelectedKeyboard',
+    notSelected: 'dragDescriptionKeyboard'
+  },
+  touch: {
+    selected: 'dragSelectedLongPress',
+    notSelected: 'dragDescriptionLongPress'
+  },
+  virtual: {
+    selected: 'dragDescriptionVirtual',
+    notSelected: 'dragDescriptionVirtual'
+  }
+};
+
+/**
+ * Handles drag interactions for an item within a draggable collection.
+ */
 export function useDraggableItem(props: DraggableItemProps, state: DraggableCollectionState): DraggableItemResult {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');
+  let isDisabled = state.isDisabled || state.selectionManager.isDisabled(props.key);
   let {dragProps, dragButtonProps} = useDrag({
     getItems() {
       return state.getItems(props.key);
     },
     preview: state.preview,
+    getAllowedDropOperations: state.getAllowedDropOperations,
+    hasDragButton: props.hasDragButton,
     onDragStart(e) {
       state.startDrag(props.key, e);
+      // Track draggingKeys for useDroppableCollection's default onDrop handler and useDroppableCollectionState's default getDropOperation
+      setDraggingKeys(state.draggingKeys);
     },
     onDragMove(e) {
       state.moveDrag(e);
     },
     onDragEnd(e) {
-      state.endDrag(e);
+      let {dropOperation} = e;
+      let isInternal = dropOperation === 'cancel' ? false : isInternalDropOperation();
+      state.endDrag({...e, keys: state.draggingKeys, isInternal});
+      clearGlobalDnDState();
     }
   });
 
   let item = state.collection.getItem(props.key);
   let numKeysForDrag = state.getKeysForDrag(props.key).size;
-  let isSelected = state.selectionManager.isSelected(props.key);
-  let message: string;
-  if (isSelected && numKeysForDrag > 1) {
-    message = formatMessage('dragSelectedItems', {count: numKeysForDrag});
+  let isSelected = numKeysForDrag > 1 && state.selectionManager.isSelected(props.key);
+  let dragButtonLabel: string | undefined;
+  let description: string | undefined;
+
+  // Override description to include selected item count.
+  let modality = useDragModality();
+  if (!props.hasDragButton && state.selectionManager.selectionMode !== 'none') {
+    let msg = MESSAGES[modality][isSelected ? 'selected' : 'notSelected'];
+    if (props.hasAction && modality === 'keyboard') {
+      msg += 'Alt';
+    }
+
+    if (isSelected) {
+      description = stringFormatter.format(msg, {count: numKeysForDrag});
+    } else {
+      description = stringFormatter.format(msg);
+    }
+
+    // Remove the onClick handler from useDrag. Long pressing will be required on touch devices,
+    // and NVDA/JAWS are always in forms mode within collection components.
+    delete dragProps.onClick;
   } else {
-    message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});
+    if (isSelected) {
+      dragButtonLabel = stringFormatter.format('dragSelectedItems', {count: numKeysForDrag});
+    } else {
+      let itemText = state.collection.getTextValue?.(props.key) ?? item?.textValue ?? '';
+      dragButtonLabel = stringFormatter.format('dragItem', {itemText});
+    }
+  }
+
+  let descriptionProps = useDescription(description);
+  if (description) {
+    Object.assign(dragProps, descriptionProps);
+  }
+
+  if (!props.hasDragButton && props.hasAction) {
+    let {onKeyDownCapture, onKeyUpCapture} = dragProps;
+    if (modality === 'touch') {
+      // Remove long press description if an action is present, because in that case long pressing selects the item.
+      delete dragProps['aria-describedby'];
+    }
+
+    // Require Alt key if there is a conflicting action.
+    dragProps.onKeyDownCapture = e => {
+      if (e.altKey) {
+        onKeyDownCapture?.(e);
+      }
+    };
+
+    dragProps.onKeyUpCapture = e => {
+      if (e.altKey) {
+        onKeyUpCapture?.(e);
+      }
+    };
   }
 
   return {
-    dragProps,
+    dragProps: isDisabled ? {} : dragProps,
     dragButtonProps: {
       ...dragButtonProps,
-      'aria-label': message
+      isDisabled,
+      'aria-label': dragButtonLabel
     }
   };
 }

package/src/useDrop.ts

@@ -10,49 +10,109 @@
  * governing permissions and limitations under the License.
  */
 
-import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
+import {AriaButtonProps} from '@react-types/button';
+import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
-import {DragTypes, readFromDataTransfer} from './utils';
+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} from '@react-types/shared';
-import {useLayoutEffect} from '@react-aria/utils';
+import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes, RefObject} from '@react-types/shared';
+import {isIPad, isMac, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
-interface DropOptions {
-  ref: RefObject<HTMLElement>,
+export interface DropOptions {
+  /** A ref for the droppable element. */
+  ref: RefObject<HTMLElement | null>,
+  /**
+   * A function returning the drop operation to be performed when items matching the given types are dropped
+   * on the drop target.
+   */
   getDropOperation?: (types: IDragTypes, allowedOperations: DropOperation[]) => DropOperation,
+  /** A function that returns the drop operation for a specific point within the target. */
   getDropOperationForPoint?: (types: IDragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation,
+  /** Handler that is called when a valid drag enters the drop target. */
   onDropEnter?: (e: DropEnterEvent) => void,
+  /** Handler that is called when a valid drag is moved within the drop target. */
   onDropMove?: (e: DropMoveEvent) => void,
-  // When the user hovers over the drop target for a period of time.
-  // typically opens that item. macOS/iOS call this "spring loading".
+  /**
+   * Handler that is called after a valid drag is held over the drop target for a period of time.
+   * This typically opens the item so that the user can drop within it.
+   * @private
+   */
   onDropActivate?: (e: DropActivateEvent) => void,
+  /** Handler that is called when a valid drag exits the drop target. */
   onDropExit?: (e: DropExitEvent) => void,
-  onDrop?: (e: DropEvent) => void
+  /** Handler that is called when a valid drag is dropped on the drop target. */
+  onDrop?: (e: DropEvent) => void,
+  /**
+   * Whether the item has an explicit focusable drop affordance to initiate accessible drag and drop mode.
+   * If true, the dropProps will omit these event handlers, and they will be applied to dropButtonProps instead.
+   */
+  hasDropButton?: boolean,
+  /**
+   * Whether the drop target is disabled. If true, the drop target will not accept any drops.
+   */
+  isDisabled?: boolean
 }
 
-interface DropResult {
+export interface DropResult {
+  /** Props for the droppable element. */
   dropProps: HTMLAttributes<HTMLElement>,
-  isDropTarget: boolean // (??) whether the element is currently an active drop target
+  /** Whether the drop target is currently focused or hovered. */
+  isDropTarget: boolean,
+  /** Props for the explicit drop button affordance, if any. */
+  dropButtonProps?: AriaButtonProps
 }
 
 const DROP_ACTIVATE_TIMEOUT = 800;
 
+/**
+ * Handles drop interactions for an element, with support for traditional mouse and touch
+ * based drag and drop, in addition to full parity for keyboard and screen reader users.
+ */
 export function useDrop(options: DropOptions): DropResult {
+  let {hasDropButton, isDisabled} = options;
   let [isDropTarget, setDropTarget] = useState(false);
   let state = useRef({
     x: 0,
     y: 0,
-    dragEnterCount: 0,
+    dragOverElements: new Set<Element>(),
     dropEffect: 'none' as DataTransfer['dropEffect'],
+    allowedOperations: DROP_OPERATION.all,
     dropActivateTimer: null
   }).current;
 
+  let fireDropEnter = (e: DragEvent) => {
+    setDropTarget(true);
+
+    if (typeof options.onDropEnter === 'function') {
+      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      options.onDropEnter({
+        type: 'dropenter',
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      });
+    }
+  };
+
+  let fireDropExit = (e: DragEvent) => {
+    setDropTarget(false);
+
+    if (typeof options.onDropExit === 'function') {
+      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      options.onDropExit({
+        type: 'dropexit',
+        x: e.clientX - rect.x,
+        y: e.clientY - rect.y
+      });
+    }
+  };
+
   let onDragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (e.clientX === state.x && e.clientY === state.y) {
+    let allowedOperations = getAllowedOperations(e);
+    if (e.clientX === state.x && e.clientY === state.y && allowedOperations === state.allowedOperations) {
       e.dataTransfer.dropEffect = state.dropEffect;
       return;
     }
@@ -60,17 +120,40 @@ export function useDrop(options: DropOptions): DropResult {
     state.x = e.clientX;
     state.y = e.clientY;
 
+    let prevDropEffect = state.dropEffect;
+
+    // Update drop effect if allowed drop operations changed (e.g. user pressed modifier key).
+    if (allowedOperations !== state.allowedOperations) {
+      let allowedOps = allowedOperationsToArray(allowedOperations);
+      let dropOperation = allowedOps[0];
+      if (typeof options.getDropOperation === 'function') {
+        let types = new DragTypes(e.dataTransfer);
+        dropOperation = getDropOperation(allowedOperations, options.getDropOperation(types, allowedOps));
+      }
+      state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
+    }
+
     if (typeof options.getDropOperationForPoint === 'function') {
-      let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      let dropOperation = options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y);
+      let dropOperation = getDropOperation(
+        allowedOperations,
+        options.getDropOperationForPoint(types, allowedOperationsToArray(allowedOperations), state.x - rect.x, state.y - rect.y)
+      );
       state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     }
 
+    state.allowedOperations = allowedOperations;
     e.dataTransfer.dropEffect = state.dropEffect;
 
-    if (typeof options.onDropMove === 'function') {
+    // If the drop operation changes, update state and fire events appropriately.
+    if (state.dropEffect === 'none' && prevDropEffect !== 'none') {
+      fireDropExit(e);
+    } else if (state.dropEffect !== 'none' && prevDropEffect === 'none') {
+      fireDropEnter(e);
+    }
+
+    if (typeof options.onDropMove === 'function' && state.dropEffect !== 'none') {
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
       options.onDropMove({
         type: 'dropmove',
@@ -94,69 +177,78 @@ export function useDrop(options: DropOptions): DropResult {
   };
 
   let onDragEnter = (e: DragEvent) => {
+    e.preventDefault();
     e.stopPropagation();
-    state.dragEnterCount++;
-    if (state.dragEnterCount > 1) {
+    state.dragOverElements.add(e.target as Element);
+    if (state.dragOverElements.size > 1) {
       return;
     }
 
-    let allowedOperations = effectAllowedToOperations(e.dataTransfer.effectAllowed);
+    let allowedOperationsBits = getAllowedOperations(e);
+    let allowedOperations = allowedOperationsToArray(allowedOperationsBits);
     let dropOperation = allowedOperations[0];
 
     if (typeof options.getDropOperation === 'function') {
       let types = new DragTypes(e.dataTransfer);
-      dropOperation = options.getDropOperation(types, allowedOperations);
-    }
-
-    if (dropOperation !== 'cancel') {
-      setDropTarget(true);
+      dropOperation = getDropOperation(allowedOperationsBits, options.getDropOperation(types, allowedOperations));
     }
 
     if (typeof options.getDropOperationForPoint === 'function') {
       let types = new DragTypes(e.dataTransfer);
       let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      dropOperation = options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y);
+      dropOperation = getDropOperation(
+        allowedOperationsBits,
+        options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y)
+      );
     }
 
+    state.x = e.clientX;
+    state.y = e.clientY;
+    state.allowedOperations = allowedOperationsBits;
     state.dropEffect = DROP_OPERATION_TO_DROP_EFFECT[dropOperation] || 'none';
     e.dataTransfer.dropEffect = state.dropEffect;
 
-    if (typeof options.onDropEnter === 'function' && dropOperation !== 'cancel') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropEnter({
-        type: 'dropenter',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+    if (dropOperation !== 'cancel') {
+      fireDropEnter(e);
     }
-
-    state.x = e.clientX;
-    state.y = e.clientY;
   };
 
   let onDragLeave = (e: DragEvent) => {
+    e.preventDefault();
     e.stopPropagation();
-    state.dragEnterCount--;
-    if (state.dragEnterCount > 0) {
+
+    // We would use e.relatedTarget to detect if the drag is still inside the drop target,
+    // but it is always null in WebKit. https://bugs.webkit.org/show_bug.cgi?id=66547
+    // Instead, we track all of the targets of dragenter events in a set, and remove them
+    // in dragleave. When the set becomes empty, we've left the drop target completely.
+    // We must also remove any elements that are no longer in the DOM, because dragleave
+    // events will never be fired for these. This can happen, for example, with drop
+    // indicators between items, which disappear when the drop target changes.
+
+    state.dragOverElements.delete(e.target as Element);
+    for (let element of state.dragOverElements) {
+      if (!e.currentTarget.contains(element)) {
+        state.dragOverElements.delete(element);
+      }
+    }
+
+    if (state.dragOverElements.size > 0) {
       return;
     }
 
-    if (typeof options.onDropExit === 'function' && state.dropEffect !== 'none') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropExit({
-        type: 'dropexit',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+    if (state.dropEffect !== 'none') {
+      fireDropExit(e);
     }
 
-    setDropTarget(false);
     clearTimeout(state.dropActivateTimer);
   };
 
   let onDrop = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
+    // Track drop effect in global state for Chrome Android. https://bugs.chromium.org/p/chromium/issues/detail?id=1353951
+    // Android onDragEnd always returns "none" as its drop effect.
+    setGlobalDropEffect(state.dropEffect);
 
     if (typeof options.onDrop === 'function') {
       let dropOperation = DROP_EFFECT_TO_DROP_OPERATION[state.dropEffect];
@@ -171,75 +263,158 @@ export function useDrop(options: DropOptions): DropResult {
         dropOperation
       };
 
-      // Wait a frame to dispatch the drop event so that we ensure the dragend event fires first.
-      // Otherwise, if onDrop removes the original dragged element from the DOM, dragend will never be fired.
-      // This behavior is consistent across browsers, but see this issue for details:
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=460801
-      setTimeout(() => {
-        options.onDrop(event);
-      }, 0);
+      options.onDrop(event);
+    }
+
+    let dndStateSnapshot = {...globalDndState};
+    state.dragOverElements.clear();
+    fireDropExit(e);
+    clearTimeout(state.dropActivateTimer);
+    // If there wasn't a collection being tracked as a dragged collection, then we are in a case where a non RSP drag is dropped on a
+    // RSP collection and thus we don't need to preserve the global drop effect
+    if (dndStateSnapshot.draggingCollectionRef == null) {
+      setGlobalDropEffect(undefined);
+    } else {
+      // Otherwise we need to preserve the global dnd state for onDragEnd's isInternal check.
+      // At the moment fireDropExit may clear dropCollectionRef (i.e. useDroppableCollection's provided onDropExit, required to clear dropCollectionRef when exiting a valid drop target)
+      setGlobalDnDState(dndStateSnapshot);
+    }
+  };
+
+  let onDropEnter = useEffectEvent((e: DropEnterEvent) => {
+    if (typeof options.onDropEnter === 'function') {
+      options.onDropEnter(e);
     }
+  });
 
+  let onDropExit = useEffectEvent((e: DropExitEvent) => {
     if (typeof options.onDropExit === 'function') {
-      let rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      options.onDropExit({
-        type: 'dropexit',
-        x: e.clientX - rect.x,
-        y: e.clientY - rect.y
-      });
+      options.onDropExit(e);
     }
+  });
 
-    state.dragEnterCount = 0;
-    setDropTarget(false);
-    clearTimeout(state.dropActivateTimer);
-  };
+  let onDropActivate = useEffectEvent((e: DropActivateEvent) => {
+    if (typeof options.onDropActivate === 'function') {
+      options.onDropActivate(e);
+    }
+  });
 
-  let optionsRef = useRef(options);
-  optionsRef.current = options;
+  let onKeyboardDrop = useEffectEvent((e: DropEvent) => {
+    if (typeof options.onDrop === 'function') {
+      options.onDrop(e);
+    }
+  });
 
-  useLayoutEffect(() => DragManager.registerDropTarget({
-    element: optionsRef.current.ref.current,
-    getDropOperation: optionsRef.current.getDropOperation,
-    onDropEnter(e) {
-      setDropTarget(true);
-      if (typeof optionsRef.current.onDropEnter === 'function') {
-        optionsRef.current.onDropEnter(e);
-      }
-    },
-    onDropExit(e) {
-      setDropTarget(false);
-      if (typeof optionsRef.current.onDropExit === 'function') {
-        optionsRef.current.onDropExit(e);
-      }
-    },
-    onDrop(e) {
-      if (typeof optionsRef.current.onDrop === 'function') {
-        optionsRef.current.onDrop(e);
-      }
-    },
-    onDropActivate(e) {
-      if (typeof optionsRef.current.onDropActivate === 'function') {
-        optionsRef.current.onDropActivate(e);
-      }
+  let getDropOperationKeyboard = useEffectEvent((types: IDragTypes, allowedOperations: DropOperation[]) => {
+    if (options.getDropOperation) {
+      return options.getDropOperation(types, allowedOperations);
     }
-  }), [optionsRef]);
 
-  let {dropProps} = useVirtualDrop();
+    return allowedOperations[0];
+  });
+
+  let {ref} = options;
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+    return DragManager.registerDropTarget({
+      element: ref.current,
+      getDropOperation: getDropOperationKeyboard,
+      onDropEnter(e) {
+        setDropTarget(true);
+        onDropEnter(e);
+      },
+      onDropExit(e) {
+        setDropTarget(false);
+        onDropExit(e);
+      },
+      onDrop: onKeyboardDrop,
+      onDropActivate
+    });
+  }, [isDisabled, ref, getDropOperationKeyboard, onDropEnter, onDropExit, onKeyboardDrop, onDropActivate]);
 
+  let {dropProps} = useVirtualDrop();
+  if (isDisabled) {
+    return {
+      dropProps: {},
+      dropButtonProps: {isDisabled: true},
+      isDropTarget: false
+    };
+  }
   return {
     dropProps: {
-      ...dropProps,
+      ...(!hasDropButton && dropProps),
       onDragEnter,
       onDragOver,
       onDragLeave,
       onDrop
     },
+    dropButtonProps: {...(hasDropButton && dropProps)},
     isDropTarget
   };
 }
 
-function effectAllowedToOperations(effectAllowed: string) {
-  let allowedOperationsBits = DROP_OPERATION_ALLOWED[effectAllowed];
+function getAllowedOperations(e: DragEvent) {
+  let allowedOperations = DROP_OPERATION_ALLOWED[e.dataTransfer.effectAllowed];
+
+  // WebKit always sets effectAllowed to "copyMove" on macOS, and "all" on iOS, regardless of what was
+  // set during the dragstart event: https://bugs.webkit.org/show_bug.cgi?id=178058
+  //
+  // Android Chrome also sets effectAllowed to "copyMove" in all cases: https://bugs.chromium.org/p/chromium/issues/detail?id=1359182
+  //
+  // If the drag started within the page, we can use a global variable to get the real allowed operations.
+  // This needs to be intersected with the actual effectAllowed, which may have been filtered based on modifier keys.
+  // Unfortunately, this means that link operations do not work at all in Safari.
+  if (globalAllowedDropOperations) {
+    allowedOperations &= globalAllowedDropOperations;
+  }
+
+  // Chrome and Safari on macOS will automatically filter effectAllowed when pressing modifier keys,
+  // allowing the user to switch between move, link, and copy operations. Firefox on macOS and all
+  // Windows browsers do not do this, so do it ourselves instead. The exact keys are platform dependent.
+  // https://ux.stackexchange.com/questions/83748/what-are-the-most-common-modifier-keys-for-dragging-objects-with-a-mouse
+  //
+  // Note that none of these modifiers are ever set in WebKit due to a bug: https://bugs.webkit.org/show_bug.cgi?id=77465
+  // However, Safari does update effectAllowed correctly, so we can just rely on that.
+  let allowedModifiers = DROP_OPERATION.none;
+  if (isMac()) {
+    if (e.altKey) {
+      allowedModifiers |= DROP_OPERATION.copy;
+    }
+
+    // Chrome and Safari both use the Control key for link, even though Finder uses Command + Option.
+    // iPadOS doesn't support link operations and will not fire the drop event at all if dropEffect is set to link.
+    // https://bugs.webkit.org/show_bug.cgi?id=244701
+    if (e.ctrlKey && !isIPad()) {
+      allowedModifiers |= DROP_OPERATION.link;
+    }
+
+    if (e.metaKey) {
+      allowedModifiers |= DROP_OPERATION.move;
+    }
+  } else {
+    if (e.altKey) {
+      allowedModifiers |= DROP_OPERATION.link;
+    }
+
+    if (e.shiftKey) {
+      allowedModifiers |= DROP_OPERATION.move;
+    }
+
+    if (e.ctrlKey) {
+      allowedModifiers |= DROP_OPERATION.copy;
+    }
+  }
+
+  if (allowedModifiers) {
+    return allowedOperations & allowedModifiers;
+  }
+
+  return allowedOperations;
+}
+
+function allowedOperationsToArray(allowedOperationsBits: DROP_OPERATION) {
   let allowedOperations = [];
   if (allowedOperationsBits & DROP_OPERATION.move) {
     allowedOperations.push('move');
@@ -255,3 +430,8 @@ function effectAllowedToOperations(effectAllowed: string) {
 
   return allowedOperations;
 }
+
+function getDropOperation(allowedOperations: DROP_OPERATION, operation: DropOperation) {
+  let op = DROP_OPERATION[operation];
+  return allowedOperations & op ? operation : 'cancel';
+}