@react-aria/dnd 3.11.6 → 3.12.0

package/src/DragPreview.tsx

@@ -1,81 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {DragItem, DragPreviewRenderer} from '@react-types/shared';
-import {flushSync} from 'react-dom';
-import React, {ForwardedRef, JSX, useEffect, useImperativeHandle, useRef, useState} from 'react';
-
-export interface DragPreviewProps {
-  /**
-   * 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.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, 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(element);
-    });
-
-    // Yield back to useDrag to set the drag image.
-    callback(domRef.current, offsetX, offsetY);
-
-    // Remove the preview from the DOM after a frame so the browser has time to paint.
-    raf.current = requestAnimationFrame(() => {
-      setChildren(null);
-    });
-  }, [render]);
-
-  useEffect(() => {
-    return () => {
-      if (raf.current) {
-        cancelAnimationFrame(raf.current);
-      }
-    };
-  }, []);
-
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <div style={{zIndex: -100, position: 'fixed', top: 0, left: -100000}} ref={domRef}>
-      {children}
-    </div>
-  );
-});

package/src/DropTargetKeyboardNavigation.ts

@@ -1,293 +0,0 @@
-import {Collection, DropTarget, Key, KeyboardDelegate, Node} from '@react-types/shared';
-import {getChildNodes} from '@react-stately/collections';
-
-export function navigate(
-  keyboardDelegate: KeyboardDelegate,
-  collection: Collection<Node<unknown>>,
-  target: DropTarget | null | undefined,
-  direction: 'left' | 'right' | 'up' | 'down',
-  rtl = false,
-  wrap = false
-): DropTarget | null {
-  switch (direction) {
-    case 'left':
-      return rtl 
-        ? nextDropTarget(keyboardDelegate, collection, target, wrap, 'left')
-        : previousDropTarget(keyboardDelegate, collection, target, wrap, 'left');
-    case 'right':
-      return rtl 
-        ? previousDropTarget(keyboardDelegate, collection, target, wrap, 'right')
-        : nextDropTarget(keyboardDelegate, collection, target, wrap, 'right');
-    case 'up':
-      return previousDropTarget(keyboardDelegate, collection, target, wrap);
-    case 'down':
-      return nextDropTarget(keyboardDelegate, collection, target, wrap);
-  }
-}
-
-function nextDropTarget(
-  keyboardDelegate: KeyboardDelegate,
-  collection: Collection<Node<unknown>>,
-  target: DropTarget | null | undefined,
-  wrap = false,
-  horizontal: 'left' | 'right' | null = null
-): DropTarget | null {
-  if (!target) {
-    return {
-      type: 'root'
-    };
-  }
-
-  if (target.type === 'root') {
-    let nextKey = keyboardDelegate.getFirstKey?.() ?? null;
-    if (nextKey != null) {
-      return {
-        type: 'item',
-        key: nextKey,
-        dropPosition: 'before'
-      };
-    }
-
-    return null;
-  }
-
-  if (target.type === 'item') {
-    let nextKey: Key | null | undefined = null;
-    if (horizontal) {
-      nextKey = horizontal === 'right' ? keyboardDelegate.getKeyRightOf?.(target.key) : keyboardDelegate.getKeyLeftOf?.(target.key);
-    } else {
-      nextKey = keyboardDelegate.getKeyBelow?.(target.key);
-    }
-    let nextCollectionKey = getNextItem(collection, target.key, key => collection.getKeyAfter(key));
-
-    // If the keyboard delegate did not move to the next key in the collection,
-    // jump to that key with the same drop position. Otherwise, try the other
-    // drop positions on the current key first.
-    if (nextKey != null && nextKey !== nextCollectionKey) {
-      return {
-        type: 'item',
-        key: nextKey,
-        dropPosition: target.dropPosition
-      };
-    }
-    
-    switch (target.dropPosition) {
-      case 'before': {
-        return {
-          type: 'item',
-          key: target.key,
-          dropPosition: 'on'
-        };
-      }
-      case 'on': {
-        // If there are nested items, traverse to them prior to the "after" position of this target.
-        // If the next key is on the same level, then its "before" position is equivalent to this item's "after" position.
-        let targetNode = collection.getItem(target.key);
-        let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
-        if (targetNode && nextNode && nextNode.level >= targetNode.level) {
-          return {
-            type: 'item',
-            key: nextNode.key,
-            dropPosition: 'before'
-          };
-        }
-
-        return {
-          type: 'item',
-          key: target.key,
-          dropPosition: 'after'
-        };
-      }
-      case 'after': {
-        // If this is the last sibling in a level, traverse to the parent.
-        let targetNode = collection.getItem(target.key);
-        let nextItemInSameLevel = targetNode?.nextKey != null ? collection.getItem(targetNode.nextKey) : null;
-        while (nextItemInSameLevel != null && nextItemInSameLevel.type !== 'item') {
-          nextItemInSameLevel = nextItemInSameLevel.nextKey != null ? collection.getItem(nextItemInSameLevel.nextKey) : null;
-        }
-        
-        if (targetNode && nextItemInSameLevel == null && targetNode.parentKey != null) {
-          // If the parent item has an item after it, use the "before" position.
-          let parentNode = collection.getItem(targetNode.parentKey);
-          const nextNode = parentNode?.nextKey != null ? collection.getItem(parentNode.nextKey) : null;
-          if (nextNode?.type === 'item') {
-            return {
-              type: 'item',
-              key: nextNode.key,
-              dropPosition: 'before'
-            };
-          }
-
-          if (parentNode?.type === 'item') {
-            return {
-              type: 'item',
-              key: parentNode.key,
-              dropPosition: 'after'
-            };
-          }
-        }
-
-        if (nextItemInSameLevel) {
-          return {
-            type: 'item',
-            key: nextItemInSameLevel.key,
-            dropPosition: 'on'
-          };
-        }
-      }
-    }
-  }
-
-  if (wrap) {
-    return {
-      type: 'root'
-    };
-  }
-
-  return null;
-}
-
-function previousDropTarget(
-  keyboardDelegate: KeyboardDelegate,
-  collection: Collection<Node<unknown>>,
-  target: DropTarget | null | undefined,
-  wrap = false,
-  horizontal: 'left' | 'right' | null = null
-): DropTarget | null {
-  // Start after the last root-level item.
-  if (!target || (wrap && target.type === 'root')) {
-    // Keyboard delegate gets the deepest item but we want the shallowest.
-    let prevKey: Key | null = null;
-    let lastKey = keyboardDelegate.getLastKey?.();
-    while (lastKey != null) {
-      let node = collection.getItem(lastKey);
-      if (node?.type !== 'item') {
-        break;
-      }
-      prevKey = lastKey;
-      lastKey = node?.parentKey;
-    }
-
-    if (prevKey != null) {
-      return {
-        type: 'item',
-        key: prevKey,
-        dropPosition: 'after'
-      };
-    }
-
-    return null;
-  }
-
-  if (target.type === 'item') {
-    let prevKey: Key | null | undefined = null;
-    if (horizontal) {
-      prevKey = horizontal === 'left' ? keyboardDelegate.getKeyLeftOf?.(target.key) : keyboardDelegate.getKeyRightOf?.(target.key);
-    } else {
-      prevKey = keyboardDelegate.getKeyAbove?.(target.key);
-    }
-    let prevCollectionKey = getNextItem(collection, target.key, key => collection.getKeyBefore(key));
-
-    // If the keyboard delegate did not move to the next key in the collection,
-    // jump to that key with the same drop position. Otherwise, try the other
-    // drop positions on the current key first.
-    if (prevKey != null && prevKey !== prevCollectionKey) {
-      return {
-        type: 'item',
-        key: prevKey,
-        dropPosition: target.dropPosition
-      };
-    }
-
-    switch (target.dropPosition) {
-      case 'before': {
-        // Move after the last child of the previous item.
-        let targetNode = collection.getItem(target.key);
-        if (targetNode && targetNode.prevKey != null) {
-          let lastChild = getLastChild(collection, targetNode.prevKey);
-          if (lastChild) {
-            return lastChild;
-          }
-        }
-
-        if (prevKey != null) {
-          return {
-            type: 'item',
-            key: prevKey,
-            dropPosition: 'on'
-          };
-        }
-
-        return {
-          type: 'root'
-        };
-      }
-      case 'on': {
-        return {
-          type: 'item',
-          key: target.key,
-          dropPosition: 'before'
-        };
-      }
-      case 'after': {
-        // Move after the last child of this item.
-        let lastChild = getLastChild(collection, target.key);
-        if (lastChild) {
-          return lastChild;
-        }
-
-        return {
-          type: 'item',
-          key: target.key,
-          dropPosition: 'on'
-        };
-      }
-    }
-  }
-
-  if (target.type !== 'root') {
-    return {
-      type: 'root'
-    };
-  }
-
-  return null;
-}
-
-function getLastChild(collection: Collection<Node<unknown>>, key: Key): DropTarget | null {
-  // getChildNodes still returns child tree items even when the item is collapsed.
-  // Checking if the next item has a greater level is a silly way to determine if the item is expanded.
-  let targetNode = collection.getItem(key);
-  let nextKey = getNextItem(collection, key, key => collection.getKeyAfter(key));
-  let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
-  if (targetNode && nextNode && nextNode.level > targetNode.level) {
-    let children = getChildNodes(targetNode, collection);
-    let lastChild: Node<unknown> | null = null;
-    for (let child of children) {
-      if (child.type === 'item') {
-        lastChild = child;
-      }
-    }
-
-    if (lastChild) {
-      return {
-        type: 'item',
-        key: lastChild.key,
-        dropPosition: 'after'
-      };
-    }
-  }
-
-  return null;
-}
-
-// Find the next or previous item in a collection, skipping over other types of nodes (e.g. content).
-function getNextItem(collection: Collection<Node<unknown>>, key: Key, getNextKey: (key: Key) => Key | null): Key | null {
-  let nextCollectionKey = getNextKey(key);
-  let nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
-  while (nextCollectionNode && nextCollectionNode.type !== 'item') {
-    nextCollectionKey = getNextKey(nextCollectionNode.key);
-    nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
-  }
-  return nextCollectionKey;
-}

package/src/ListDropTargetDelegate.ts

@@ -1,182 +0,0 @@
-import {Direction, DropTarget, DropTargetDelegate, Node, Orientation, RefObject} from '@react-types/shared';
-
-interface ListDropTargetDelegateOptions {
-  /**
-   * Whether the items are arranged in a stack or grid.
-   * @default 'stack'
-   */
-  layout?: 'stack' | 'grid',
-  /**
-   * The primary orientation of the items. Usually this is the
-   * direction that the collection scrolls.
-   * @default 'vertical'
-   */
-  orientation?: Orientation,
-  /**
-   * The horizontal layout direction.
-   * @default 'ltr'
-   */
-  direction?: Direction
-}
-
-// Terms used in the below code:
-//   * "Primary"   – The main layout direction. For stacks, this is the direction
-//                   that the stack is arranged in (e.g. horizontal or vertical).
-//                   For grids, this is the main scroll direction.
-//   * "Secondary" – The secondary layout direction. For stacks, there is no secondary
-//                   layout direction. For grids, this is the opposite of the primary direction.
-//   * "Flow"      – The flow direction of the items. For stacks, this is the the primary
-//                   direction. For grids, it is the secondary direction.
-
-export class ListDropTargetDelegate implements DropTargetDelegate {
-  private collection: Iterable<Node<unknown>>;
-  private ref: RefObject<HTMLElement | null>;
-  private layout: 'stack' | 'grid';
-  private orientation: Orientation;
-  protected direction: Direction;
-
-  constructor(collection: Iterable<Node<unknown>>, ref: RefObject<HTMLElement | null>, options?: ListDropTargetDelegateOptions) {
-    this.collection = collection;
-    this.ref = ref;
-    this.layout = options?.layout || 'stack';
-    this.orientation = options?.orientation || 'vertical';
-    this.direction = options?.direction || 'ltr';
-  }
-
-  private getPrimaryStart(rect: DOMRect) {
-    return this.orientation === 'horizontal' ? rect.left : rect.top;
-  }
-
-  private getPrimaryEnd(rect: DOMRect) {
-    return this.orientation === 'horizontal' ? rect.right : rect.bottom;
-  }
-
-  private getSecondaryStart(rect: DOMRect) {
-    return this.orientation === 'horizontal' ? rect.top : rect.left;
-  }
-
-  private getSecondaryEnd(rect: DOMRect) {
-    return this.orientation === 'horizontal' ? rect.bottom : rect.right;
-  }
-
-  private getFlowStart(rect: DOMRect) {
-    return this.layout === 'stack' ? this.getPrimaryStart(rect) : this.getSecondaryStart(rect);
-  }
-
-  private getFlowEnd(rect: DOMRect) {
-    return this.layout === 'stack' ? this.getPrimaryEnd(rect) : this.getSecondaryEnd(rect);
-  }
-
-  private getFlowSize(rect: DOMRect) {
-    return this.getFlowEnd(rect) - this.getFlowStart(rect);
-  }
-
-  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
-    if (this.collection[Symbol.iterator]().next().done || !this.ref.current) {
-      return {type: 'root'};
-    }
-
-    let rect: DOMRect | undefined = this.ref.current.getBoundingClientRect();
-    let primary = this.orientation === 'horizontal' ? x : y;
-    let secondary = this.orientation === 'horizontal' ? y : x;
-    primary += this.getPrimaryStart(rect);
-    secondary += this.getSecondaryStart(rect);
-
-    let flow = this.layout === 'stack' ? primary : secondary;
-    let isPrimaryRTL = this.orientation === 'horizontal' && this.direction === 'rtl';
-    let isSecondaryRTL = this.layout === 'grid' && this.orientation === 'vertical' && this.direction === 'rtl';
-    let isFlowRTL = this.layout === 'stack' ? isPrimaryRTL : isSecondaryRTL;
-
-    let collection = this.ref.current?.dataset.collection;
-    let elements = this.ref.current.querySelectorAll(collection ? `[data-collection="${CSS.escape(collection)}"]` : '[data-key]');
-    let elementMap = new Map<string, HTMLElement>();
-    for (let item of elements) {
-      if (item instanceof HTMLElement && item.dataset.key != null) {
-        elementMap.set(item.dataset.key, item);
-      }
-    }
-
-    // TODO: assume that only item type items are valid drop targets. This is to prevent a crash when dragging over the loader
-    // row since it doesn't have a data-key set on it. Will eventually need to handle the case with drag and drop and loaders located between rows aka tree.
-    // Can see https://github.com/adobe/react-spectrum/pull/4210/files#diff-21e555e0c597a28215e36137f5be076a65a1e1456c92cd0fdd60f866929aae2a for additional logic
-    // that may need to happen then
-    let items = [...this.collection].filter(item => item.type === 'item');
-
-    if (items.length < 1) {
-      return {type: 'root'};
-    }
-
-    let low = 0;
-    let high = items.length;
-    while (low < high) {
-      let mid = Math.floor((low + high) / 2);
-      let item = items[mid];
-      let element = elementMap.get(String(item.key));
-      if (!element) {
-        break;
-      }
-      let rect = element.getBoundingClientRect();
-      let update = (isGreater: boolean) => {
-        if (isGreater) {
-          low = mid + 1;
-        } else {
-          high = mid;
-        }
-      };
-
-      if (primary < this.getPrimaryStart(rect)) {
-        update(isPrimaryRTL);
-      } else if (primary > this.getPrimaryEnd(rect)) {
-        update(!isPrimaryRTL);
-      } else if (secondary < this.getSecondaryStart(rect)) {
-        update(isSecondaryRTL);
-      } else if (secondary > this.getSecondaryEnd(rect)) {
-        update(!isSecondaryRTL);
-      } else {
-        let target: DropTarget = {
-          type: 'item',
-          key: item.key,
-          dropPosition: 'on'
-        };
-
-        if (isValidDropTarget(target)) {
-          // Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px
-          // of the start or end of the item.
-          if (flow <= this.getFlowStart(rect) + 5 && isValidDropTarget({...target, dropPosition: 'before'})) {
-            target.dropPosition = isFlowRTL ? 'after' : 'before';
-          } else if (flow >= this.getFlowEnd(rect) - 5 && isValidDropTarget({...target, dropPosition: 'after'})) {
-            target.dropPosition = isFlowRTL ? 'before' : 'after';
-          }
-        } else {
-          // If dropping on the item isn't accepted, try the target before or after depending on the position.
-          let mid = this.getFlowStart(rect) + this.getFlowSize(rect) / 2;
-          if (flow <= mid && isValidDropTarget({...target, dropPosition: 'before'})) {
-            target.dropPosition = isFlowRTL ? 'after' : 'before';
-          } else if (flow >= mid && isValidDropTarget({...target, dropPosition: 'after'})) {
-            target.dropPosition = isFlowRTL ? 'before' : 'after';
-          }
-        }
-
-        return target;
-      }
-    }
-
-    let item = items[Math.min(low, items.length - 1)];
-    let element = elementMap.get(String(item.key));
-    rect = element?.getBoundingClientRect();
-
-    if (rect && (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))) {
-      return {
-        type: 'item',
-        key: item.key,
-        dropPosition: isFlowRTL ? 'after' : 'before'
-      };
-    }
-
-    return {
-      type: 'item',
-      key: item.key,
-      dropPosition: isFlowRTL ? 'before' : 'after'
-    };
-  }
-}

package/src/constants.ts

@@ -1,85 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-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,
-  move = 1 << 0,
-  copy = 1 << 1,
-  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: DropOperationAllowed = {
-  ...DROP_OPERATION,
-  copyMove: DROP_OPERATION.copy | DROP_OPERATION.move,
-  copyLink: DROP_OPERATION.copy | DROP_OPERATION.link,
-  linkMove: DROP_OPERATION.link | DROP_OPERATION.move,
-  all: DROP_OPERATION.all,
-  uninitialized: DROP_OPERATION.all
-};
-
-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'.
-
-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: {[K in DropOperation]: DropEffect} = invert(DROP_EFFECT_TO_DROP_OPERATION);
-
-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 as T;
-  }
-
-  return res;
-}
-
-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';