@react-aria/dnd 3.10.0 → 3.11.0

package/src/DragManager.ts

@@ -182,7 +182,7 @@ class DragSession {
     this.initialFocused = false;
   }
 
-  setup() {
+  setup(): void {
     document.addEventListener('keydown', this.onKeyDown, true);
     document.addEventListener('keyup', this.onKeyUp, true);
     window.addEventListener('focus', this.onFocus, true);
@@ -202,7 +202,7 @@ class DragSession {
     announce(this.stringFormatter.format(MESSAGES[getDragModality()]));
   }
 
-  teardown() {
+  teardown(): void {
     document.removeEventListener('keydown', this.onKeyDown, true);
     document.removeEventListener('keyup', this.onKeyUp, true);
     window.removeEventListener('focus', this.onFocus, true);
@@ -218,7 +218,7 @@ class DragSession {
     this.restoreAriaHidden?.();
   }
 
-  onKeyDown(e: KeyboardEvent) {
+  onKeyDown(e: KeyboardEvent): void {
     this.cancelEvent(e);
 
     if (e.key === 'Escape') {
@@ -239,7 +239,7 @@ class DragSession {
     }
   }
 
-  onKeyUp(e: KeyboardEvent) {
+  onKeyUp(e: KeyboardEvent): void {
     this.cancelEvent(e);
 
     if (e.key === 'Enter') {
@@ -255,7 +255,7 @@ class DragSession {
     return this.currentDropItem?.activateButtonRef?.current ?? this.currentDropTarget?.activateButtonRef?.current ?? null;
   }
 
-  onFocus(e: FocusEvent) {
+  onFocus(e: FocusEvent): void {
     let activateButton = this.getCurrentActivateButton();
     if (e.target === activateButton) {
       // TODO: canceling this breaks the focus ring. Revisit when we support tabbing.
@@ -295,7 +295,7 @@ class DragSession {
     }
   }
 
-  onBlur(e: FocusEvent) {
+  onBlur(e: FocusEvent): void {
     let activateButton = this.getCurrentActivateButton();
     if (e.relatedTarget === activateButton) {
       this.cancelEvent(e);
@@ -317,7 +317,7 @@ class DragSession {
     }
   }
 
-  onClick(e: MouseEvent) {
+  onClick(e: MouseEvent): void {
     this.cancelEvent(e);
     if (isVirtualClick(e) || this.isVirtualClick) {
       let dropElements = dropItems.values();
@@ -341,14 +341,14 @@ class DragSession {
     }
   }
 
-  onPointerDown(e: PointerEvent) {
+  onPointerDown(e: PointerEvent): void {
     // Android Talkback double tap has e.detail = 1 for onClick. Detect the virtual click in onPointerDown before onClick fires
     // so we can properly perform cancel and drop operations.
     this.cancelEvent(e);
     this.isVirtualClick = isVirtualPointerEvent(e);
   }
 
-  cancelEvent(e: Event) {
+  cancelEvent(e: Event): void {
     // Allow focusin and focusout on the drag target so focus ring works properly.
     if ((e.type === 'focusin' || e.type === 'focusout') && (e.target === this.dragTarget?.element || e.target === this.getCurrentActivateButton())) {
       return;
@@ -363,7 +363,7 @@ class DragSession {
     e.stopImmediatePropagation();
   }
 
-  updateValidDropTargets() {
+  updateValidDropTargets(): void {
     if (!this.mutationObserver) {
       return;
     }
@@ -408,12 +408,12 @@ class DragSession {
       this.dragTarget.element,
       ...validDropItems.flatMap(item => item.activateButtonRef?.current ? [item.element, item.activateButtonRef?.current] : [item.element]),
       ...visibleDropTargets.flatMap(target => target.activateButtonRef?.current ? [target.element, target.activateButtonRef?.current] : [target.element])
-    ]);
+    ], {shouldUseInert: true});
 
-    this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden']});
+    this.mutationObserver.observe(document.body, {subtree: true, attributes: true, attributeFilter: ['aria-hidden', 'inert']});
   }
 
-  next() {
+  next(): void {
     // TODO: Allow tabbing to the activate button. Revisit once we fix the focus ring.
     // For now, the activate button is reachable by screen readers and ArrowLeft/ArrowRight
     // is usable specifically by Tree. Will need tabbing for other components.
@@ -437,7 +437,7 @@ class DragSession {
     // If we've reached the end of the valid drop targets, cycle back to the original drag target.
     // This lets the user cancel the drag in case they don't have an Escape key (e.g. iPad keyboard case).
     if (index === this.validDropTargets.length - 1) {
-      if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
+      if (!this.dragTarget.element.closest('[aria-hidden="true"], [inert]')) {
         this.setCurrentDropTarget(null);
         this.dragTarget.element.focus();
       } else {
@@ -448,7 +448,7 @@ class DragSession {
     }
   }
 
-  previous() {
+  previous(): void {
     // let activateButton = this.getCurrentActivateButton();
     // if (activateButton && document.activeElement === activateButton) {
     //   let target = this.currentDropItem ?? this.currentDropTarget;
@@ -472,7 +472,7 @@ class DragSession {
     // If we've reached the start of the valid drop targets, cycle back to the original drag target.
     // This lets the user cancel the drag in case they don't have an Escape key (e.g. iPad keyboard case).
     if (index === 0) {
-      if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
+      if (!this.dragTarget.element.closest('[aria-hidden="true"], [inert]')) {
         this.setCurrentDropTarget(null);
         this.dragTarget.element.focus();
       } else {
@@ -503,7 +503,7 @@ class DragSession {
     return nearest;
   }
 
-  setCurrentDropTarget(dropTarget: DropTarget | null, item?: DroppableItem) {
+  setCurrentDropTarget(dropTarget: DropTarget | null, item?: DroppableItem): void {
     if (dropTarget !== this.currentDropTarget) {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {
         let rect = this.currentDropTarget.element.getBoundingClientRect();
@@ -551,7 +551,7 @@ class DragSession {
     }
   }
 
-  end() {
+  end(): void {
     this.teardown();
     endDragging();
 
@@ -576,17 +576,17 @@ class DragSession {
     this.setCurrentDropTarget(null);
   }
 
-  cancel() {
+  cancel(): void {
     this.setCurrentDropTarget(null);
     this.end();
-    if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
+    if (!this.dragTarget.element.closest('[aria-hidden="true"], [inert]')) {
       this.dragTarget.element.focus();
     }
 
     announce(this.stringFormatter.format('dropCanceled'));
   }
 
-  drop(item?: DroppableItem) {
+  drop(item?: DroppableItem): void {
     if (!this.currentDropTarget) {
       this.cancel();
       return;
@@ -624,7 +624,7 @@ class DragSession {
     announce(this.stringFormatter.format('dropComplete'));
   }
 
-  activate(dropTarget: DropTarget | null, dropItem: DroppableItem | null | undefined) {
+  activate(dropTarget: DropTarget | null, dropItem: DroppableItem | null | undefined): void {
     if (dropTarget && typeof dropTarget.onDropActivate === 'function') {
       let target = dropItem?.target ?? null;
       let rect = dropTarget.element.getBoundingClientRect();
@@ -640,7 +640,7 @@ class DragSession {
 function findValidDropTargets(options: DragTarget) {
   let types = getTypes(options.items);
   return [...dropTargets.values()].filter(target => {
-    if (target.element.closest('[aria-hidden="true"]')) {
+    if (target.element.closest('[aria-hidden="true"], [inert]')) {
       return false;
     }
 

package/src/DragPreview.tsx

@@ -15,24 +15,45 @@ import {flushSync} from 'react-dom';
 import React, {ForwardedRef, JSX, useEffect, useImperativeHandle, useRef, useState} from 'react';
 
 export interface DragPreviewProps {
-  children: (items: DragItem[]) => JSX.Element | null
+  /**
+   * A render function which returns a preview element, or an object containing the element
+   * and a custom offset. If an object is returned, the provided `x` and `y` values will be
+   * used as the drag preview offset instead of the default calculation.
+   */
+  children: (items: DragItem[]) => JSX.Element | {element: JSX.Element, x: number, y: number} | null
 }
 
-export const DragPreview = React.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
+export const DragPreview:
+  React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer | null>> =
+React.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {
   let render = props.children;
   let [children, setChildren] = useState<JSX.Element | null>(null);
   let domRef = useRef<HTMLDivElement | null>(null);
   let raf = useRef<ReturnType<typeof requestAnimationFrame> | undefined>(undefined);
 
-  useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement | null) => void) => {
+  useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => {
     // This will be called during the onDragStart event by useDrag. We need to render the
     // preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
+
+    let result = render(items);
+    let element: JSX.Element | null;
+    let offsetX: number | undefined;
+    let offsetY: number | undefined;
+
+    if (result && typeof result === 'object' && 'element' in result) {
+      element = result.element;
+      offsetX = result.x;
+      offsetY = result.y;
+    } else {
+      element = result as JSX.Element | null;
+    }
+
     flushSync(() => {
-      setChildren(render(items));
+      setChildren(element);
     });
 
     // Yield back to useDrag to set the drag image.
-    callback(domRef.current);
+    callback(domRef.current, offsetX, offsetY);
 
     // Remove the preview from the DOM after a frame so the browser has time to paint.
     raf.current = requestAnimationFrame(() => {

package/src/constants.ts

@@ -12,6 +12,15 @@
 
 import {DropOperation} from '@react-types/shared';
 
+export interface IDropOperation {
+  readonly none: 0,
+  readonly cancel: 0,
+  readonly move: number,
+  readonly copy: number,
+  readonly link: number,
+  readonly all: number
+}
+
 export enum DROP_OPERATION {
   none = 0,
   cancel = 0,
@@ -20,9 +29,15 @@ export enum DROP_OPERATION {
   link = 1 << 2,
   all = move | copy | link
 }
-
+interface DropOperationAllowed extends IDropOperation {
+  readonly copyMove: number,
+  readonly copyLink: number,
+  readonly linkMove: number,
+  readonly all: number,
+  readonly uninitialized: number
+}
 // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
-export const DROP_OPERATION_ALLOWED = {
+export const DROP_OPERATION_ALLOWED: DropOperationAllowed = {
   ...DROP_OPERATION,
   copyMove: DROP_OPERATION.copy | DROP_OPERATION.move,
   copyLink: DROP_OPERATION.copy | DROP_OPERATION.link,
@@ -31,28 +46,40 @@ export const DROP_OPERATION_ALLOWED = {
   uninitialized: DROP_OPERATION.all
 };
 
-export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED);
+interface EffectAllowed {
+  0: 'none' | 'cancel',
+  1: 'move',
+  2: 'copy',
+  3: 'copyMove',
+  4: 'link',
+  5: 'linkMove',
+  6: 'copyLink',
+  7: 'all'
+}
+
+export const EFFECT_ALLOWED: EffectAllowed = invert(DROP_OPERATION_ALLOWED) as unknown as EffectAllowed;
 EFFECT_ALLOWED[DROP_OPERATION.all] = 'all'; // ensure we don't map to 'uninitialized'.
 
-export const DROP_EFFECT = invert(DROP_OPERATION);
-export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = {
+type DropEffect = 'none' | 'link' | 'copy' | 'move';
+
+export const DROP_EFFECT_TO_DROP_OPERATION: {[K in DropEffect]: DropOperation} = {
   none: 'cancel',
   link: 'link',
   copy: 'copy',
   move: 'move'
 };
 
-export const DROP_OPERATION_TO_DROP_EFFECT = invert(DROP_EFFECT_TO_DROP_OPERATION);
+export const DROP_OPERATION_TO_DROP_EFFECT: {[K in DropOperation]: DropEffect} = invert(DROP_EFFECT_TO_DROP_OPERATION);
 
-function invert(object) {
-  let res = {};
+function invert<T extends string | number, C extends string | number>(object: Record<T, C>): Record<C, T> {
+  let res: Record<C, T> = {} as Record<C, T>;
   for (let key in object) {
-    res[object[key]] = key;
+    res[object[key]] = key as T;
   }
 
   return res;
 }
 
-export const NATIVE_DRAG_TYPES = new Set(['text/plain', 'text/uri-list', 'text/html']);
+export const NATIVE_DRAG_TYPES: Set<string> = new Set(['text/plain', 'text/uri-list', 'text/html']);
 export const CUSTOM_DRAG_TYPE = 'application/vnd.react-aria.items+json';
 export const GENERIC_TYPE = 'application/octet-stream';

package/src/useDrag.ts

@@ -12,13 +12,13 @@
 
 import {AriaButtonProps} from '@react-types/button';
 import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent, RefObject} from '@react-types/shared';
-import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
+import {DragEvent, HTMLAttributes, version as ReactVersion, useEffect, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
 import {globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect, useDragModality, writeToDataTransfer} from './utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners, useLayoutEffect} from '@react-aria/utils';
+import {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DragOptions {
@@ -82,11 +82,11 @@ export function useDrag(options: DragOptions): DragResult {
     y: 0
   }).current;
   state.options = options;
-  let isDraggingRef = useRef(false);
+  let isDraggingRef = useRef<Element | null>(null);
   let [isDragging, setDraggingState] = useState(false);
-  let setDragging = (isDragging) => {
-    isDraggingRef.current = isDragging;
-    setDraggingState(isDragging);
+  let setDragging = (element: Element | null) => {
+    isDraggingRef.current = element;
+    setDraggingState(!!element);
   };
   let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
   let modalityOnPointerDown = useRef<string>(null);
@@ -128,12 +128,13 @@ export function useDrag(options: DragOptions): DragResult {
     }
 
     setGlobalAllowedDropOperations(allowed);
-    e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
+    let effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
+    e.dataTransfer.effectAllowed = effectAllowed === 'cancel' ? 'none' : effectAllowed;
 
     // If there is a preview option, use it to render a custom preview image that will
     // appear under the pointer while dragging. If not, the element itself is dragged by the browser.
     if (typeof options.preview?.current === 'function') {
-      options.preview.current(items, node => {
+      options.preview.current(items, (node, userX, userY) => {
         if (!node) {
           return;
         }
@@ -142,18 +143,35 @@ export function useDrag(options: DragOptions): DragResult {
         // If the preview is much smaller, then just use the center point of the preview.
         let size = node.getBoundingClientRect();
         let rect = e.currentTarget.getBoundingClientRect();
-        let x = e.clientX - rect.x;
-        let y = e.clientY - rect.y;
-        if (x > size.width || y > size.height) {
-          x = size.width / 2;
-          y = size.height / 2;
+        let defaultX = e.clientX - rect.x;
+        let defaultY = e.clientY - rect.y;
+        if (defaultX > size.width || defaultY > size.height) {
+          defaultX = size.width / 2;
+          defaultY = size.height / 2;
         }
 
+        // Start with default offsets.
+        let offsetX = defaultX;
+        let offsetY = defaultY;
+
+        // If the preview renderer supplied explicit offsets, use those.
+        if (typeof userX === 'number' && typeof userY === 'number') {
+          offsetX = userX;
+          offsetY = userY;
+        }
+
+        // Clamp the offset so it stays within the preview bounds. Browsers
+        // automatically clamp out-of-range values, but doing it ourselves
+        // prevents the visible "snap" that can occur when the browser adjusts
+        // them after the first drag update.
+        offsetX = Math.max(0, Math.min(offsetX, size.width));
+        offsetY = Math.max(0, Math.min(offsetY, size.height));
+
         // Rounding height to an even number prevents blurry preview seen on some screens
         let height = 2 * Math.round(size.height / 2);
         node.style.height = `${height}px`;
 
-        e.dataTransfer.setDragImage(node, x, y);
+        e.dataTransfer.setDragImage(node, offsetX, offsetY);
       });
     }
 
@@ -168,8 +186,9 @@ export function useDrag(options: DragOptions): DragResult {
 
     // Wait a frame before we set dragging to true so that the browser has time to
     // render the preview image before we update the element that has been dragged.
+    let target = e.target;
     requestAnimationFrame(() => {
-      setDragging(true);
+      setDragging(target as Element);
     });
   };
 
@@ -213,7 +232,7 @@ export function useDrag(options: DragOptions): DragResult {
       options.onDragEnd(event);
     }
 
-    setDragging(false);
+    setDragging(null);
     removeAllGlobalListeners();
     setGlobalAllowedDropOperations(DROP_OPERATION.none);
     setGlobalDropEffect(undefined);
@@ -221,10 +240,13 @@ export function useDrag(options: DragOptions): DragResult {
 
   // If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801
   // In this case, we need to manually call onDragEnd on cleanup
-   
-  useLayoutEffect(() => {
+
+  useEffect(() => {
     return () => {
-      if (isDraggingRef.current) {
+      // Check that the dragged element has actually unmounted from the DOM and not a React Strict Mode false positive.
+      // https://github.com/facebook/react/issues/29585
+      // React 16 ran effect cleanups before removing elements from the DOM but did not have this issue.
+      if (isDraggingRef.current && (!isDraggingRef.current.isConnected || parseInt(ReactVersion, 10) < 17)) {
         if (typeof state.options.onDragEnd === 'function') {
           let event: DragEndEvent = {
             type: 'dragend',
@@ -235,7 +257,7 @@ export function useDrag(options: DragOptions): DragResult {
           state.options.onDragEnd(event);
         }
 
-        setDragging(false);
+        setDragging(null);
         setGlobalAllowedDropOperations(DROP_OPERATION.none);
         setGlobalDropEffect(undefined);
       }
@@ -267,14 +289,14 @@ export function useDrag(options: DragOptions): DragResult {
         ? state.options.getAllowedDropOperations()
         : ['move', 'copy', 'link'],
       onDragEnd(e) {
-        setDragging(false);
+        setDragging(null);
         if (typeof state.options.onDragEnd === 'function') {
           state.options.onDragEnd(e);
         }
       }
     }, stringFormatter);
 
-    setDragging(true);
+    setDragging(target);
   };
 
   let modality = useDragModality();

package/src/utils.ts

@@ -20,8 +20,8 @@ interface DroppableCollectionMap {
   ref: RefObject<HTMLElement | null>
 }
 
-export const droppableCollectionMap = new WeakMap<DroppableCollectionState, DroppableCollectionMap>();
-export const DIRECTORY_DRAG_TYPE = Symbol();
+export const droppableCollectionMap: WeakMap<DroppableCollectionState, DroppableCollectionMap> = new WeakMap<DroppableCollectionState, DroppableCollectionMap>();
+export const DIRECTORY_DRAG_TYPE: symbol = Symbol();
 
 export function getDroppableCollectionId(state: DroppableCollectionState): string {
   let {id} = droppableCollectionMap.get(state) || {};
@@ -379,7 +379,7 @@ export function setGlobalDropEffect(dropEffect: DropEffect | undefined): void {
   globalDropEffect = dropEffect;
 }
 
-export let globalAllowedDropOperations = DROP_OPERATION.none;
+export let globalAllowedDropOperations: DROP_OPERATION = DROP_OPERATION.none;
 export function setGlobalAllowedDropOperations(o: DROP_OPERATION): void {
   globalAllowedDropOperations = o;
 }