@react-aria/dnd 3.0.0-alpha.8 → 3.0.0-nightly-641446f65-240905

package/src/useDroppableItem.ts

@@ -12,44 +12,59 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget} from '@react-types/shared';
-import {getTypes} from './utils';
-import {HTMLAttributes, RefObject, useEffect} from 'react';
+import {DropTarget, RefObject} from '@react-types/shared';
+import {getDroppableCollectionRef, getTypes, globalDndState, isInternalDropOperation} from './utils';
+import {HTMLAttributes, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
+  /** The drop target represented by the item. */
   target: DropTarget
 }
 
-interface DroppableItemResult {
-  dropProps: HTMLAttributes<HTMLElement>
+export interface DroppableItemResult {
+  /** Props for the droppable element. */
+  dropProps: HTMLAttributes<HTMLElement>,
+  /** Whether the item is currently the active drop target. */
+  isDropTarget: boolean
 }
 
-export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult {
+/**
+ * Handles drop interactions for an item within a collection component.
+ */
+export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>): DroppableItemResult {
   let {dropProps} = useVirtualDrop();
-
+  let droppableCollectionRef = getDroppableCollectionRef(state);
   useEffect(() => {
     if (ref.current) {
       return DragManager.registerDropItem({
         element: ref.current,
         target: options.target,
         getDropOperation(types, allowedOperations) {
-          return state.getDropOperation(
-            options.target,
+          let {draggingKeys} = globalDndState;
+          let isInternal = isInternalDropOperation(droppableCollectionRef);
+          return state.getDropOperation({
+            target: options.target,
             types,
-            allowedOperations
-          );
+            allowedOperations,
+            isInternal,
+            draggingKeys
+          });
         }
       });
     }
-  }, [ref, options.target, state]);
+  }, [ref, options.target, state, droppableCollectionRef]);
 
   let dragSession = DragManager.useDragSession();
-  let isValidDropTarget = dragSession && state.getDropOperation(
-    options.target,
-    getTypes(dragSession.dragTarget.items),
-    dragSession.dragTarget.allowedDropOperations
-  ) !== 'cancel';
+  let {draggingKeys} = globalDndState;
+  let isInternal = isInternalDropOperation(droppableCollectionRef);
+  let isValidDropTarget = dragSession && state.getDropOperation({
+    target: options.target,
+    types: getTypes(dragSession.dragTarget.items),
+    allowedOperations: dragSession.dragTarget.allowedDropOperations,
+    isInternal,
+    draggingKeys
+  }) !== 'cancel';
 
   let isDropTarget = state.isDropTarget(options.target);
   useEffect(() => {
@@ -62,6 +77,7 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
     dropProps: {
       ...dropProps,
       'aria-hidden': !dragSession || isValidDropTarget ? undefined : 'true'
-    }
+    },
+    isDropTarget
   };
 }

package/src/useVirtualDrop.ts

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMAttributes} from '@react-types/shared';
 import * as DragManager from './DragManager';
-import {HTMLAttributes} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDescription} from '@react-aria/utils';
 import {useDragModality} from './utils';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 interface VirtualDropResult {
-  dropProps: HTMLAttributes<HTMLElement>
+  dropProps: DOMAttributes
 }
 
 const MESSAGES = {
@@ -29,10 +29,10 @@ const MESSAGES = {
 };
 
 export function useVirtualDrop(): VirtualDropResult {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');
   let modality = useDragModality();
   let dragSession = DragManager.useDragSession();
-  let descriptionProps = useDescription(dragSession ? formatMessage(MESSAGES[modality]) : '');
+  let descriptionProps = useDescription(dragSession ? stringFormatter.format(MESSAGES[modality]) : '');
 
   return {
     dropProps: {

package/src/utils.ts

@@ -10,22 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {CUSTOM_DRAG_TYPE, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
-import {DirectoryItem, DragItem, DropItem, FileItem, DragTypes as IDragTypes} from '@react-types/shared';
+import {CUSTOM_DRAG_TYPE, DROP_OPERATION, GENERIC_TYPE, NATIVE_DRAG_TYPES} from './constants';
+import {DirectoryDropItem, DragItem, DropItem, FileDropItem, DragTypes as IDragTypes, Key, RefObject, TextDropItem} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getInteractionModality, useInteractionModality} from '@react-aria/interactions';
-import {useId} from '@react-aria/utils';
 
-const droppableCollectionIds = new WeakMap<DroppableCollectionState, string>();
-
-export function useDroppableCollectionId(state: DroppableCollectionState) {
-  let id = useId();
-  droppableCollectionIds.set(state, id);
-  return id;
+interface DroppableCollectionMap {
+  id: string,
+  ref: RefObject<HTMLElement | null>
 }
 
+export const droppableCollectionMap = new WeakMap<DroppableCollectionState, DroppableCollectionMap>();
+export const DIRECTORY_DRAG_TYPE = Symbol();
+
 export function getDroppableCollectionId(state: DroppableCollectionState) {
-  let id = droppableCollectionIds.get(state);
+  let {id} = droppableCollectionMap.get(state);
   if (!id) {
     throw new Error('Droppable item outside a droppable collection');
   }
@@ -33,6 +32,15 @@ export function getDroppableCollectionId(state: DroppableCollectionState) {
   return id;
 }
 
+export function getDroppableCollectionRef(state: DroppableCollectionState) {
+  let {ref} = droppableCollectionMap.get(state);
+  if (!ref) {
+    throw new Error('Droppable item outside a droppable collection');
+  }
+
+  return ref;
+}
+
 export function getTypes(items: DragItem[]): Set<string> {
   let types = new Set<string>();
   for (let item of items) {
@@ -53,7 +61,7 @@ function mapModality(modality: string) {
     modality = 'virtual';
   }
 
-  if (modality === 'virtual' && 'ontouchstart' in window) {
+  if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
     modality = 'touch';
   }
 
@@ -158,12 +166,12 @@ export class DragTypes implements IDragTypes {
     this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes('Files');
   }
 
-  has(type: string) {
-    if (this.includesUnknownTypes) {
+  has(type: string | symbol) {
+    if (this.includesUnknownTypes || (type === DIRECTORY_DRAG_TYPE && this.types.has(GENERIC_TYPE))) {
       return true;
     }
 
-    return this.types.has(type);
+    return typeof type === 'string' && this.types.has(type);
   }
 }
 
@@ -207,6 +215,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
         // only implemented in Chrome.
         if (typeof item.webkitGetAsEntry === 'function') {
           let entry: FileSystemEntry = item.webkitGetAsEntry();
+          // eslint-disable-next-line max-depth
           if (!entry) {
             // For some reason, Firefox includes an item with type image/png when copy
             // and pasting any file or directory (no matter the type), but returns `null` for both
@@ -216,6 +225,7 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
             continue;
           }
 
+          // eslint-disable-next-line max-depth
           if (entry.isFile) {
             items.push(createFileItem(item.getAsFile()));
           } else if (entry.isDirectory) {
@@ -259,7 +269,7 @@ function blobToString(blob: Blob): Promise<string> {
   });
 }
 
-function createFileItem(file: File): FileItem {
+function createFileItem(file: File): FileDropItem {
   return {
     kind: 'file',
     type: file.type || GENERIC_TYPE,
@@ -269,7 +279,7 @@ function createFileItem(file: File): FileItem {
   };
 }
 
-function createDirectoryItem(entry: any): DirectoryItem {
+function createDirectoryItem(entry: any): DirectoryDropItem {
   return {
     kind: 'directory',
     name: entry.name,
@@ -277,7 +287,7 @@ function createDirectoryItem(entry: any): DirectoryItem {
   };
 }
 
-async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileItem | DirectoryItem> {
+async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileDropItem | DirectoryDropItem> {
   let reader = item.createReader();
 
   // We must call readEntries repeatedly because there may be a limit to the
@@ -302,3 +312,68 @@ async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileIt
 function getEntryFile(entry: FileSystemFileEntry): Promise<File> {
   return new Promise((resolve, reject) => entry.file(resolve, reject));
 }
+
+/** Returns whether a drop item contains text data. */
+export function isTextDropItem(dropItem: DropItem): dropItem is TextDropItem {
+  return dropItem.kind === 'text';
+}
+
+/** Returns whether a drop item is a file. */
+export function isFileDropItem(dropItem: DropItem): dropItem is FileDropItem {
+  return dropItem.kind === 'file';
+}
+
+/** Returns whether a drop item is a directory. */
+export function isDirectoryDropItem(dropItem: DropItem): dropItem is DirectoryDropItem {
+  return dropItem.kind === 'directory';
+}
+
+// Global DnD collection state tracker.
+export interface DnDState {
+  /** A ref for the  of the drag items in the current drag session if any. */
+  draggingCollectionRef?: RefObject<HTMLElement | null>,
+  /** The set of currently dragged keys. */
+  draggingKeys: Set<Key>,
+  /** A ref for the collection that is targeted for a drop operation, if any. */
+  dropCollectionRef?: RefObject<HTMLElement | null>
+}
+
+export let globalDndState: DnDState = {draggingKeys: new Set()};
+
+export function setDraggingCollectionRef(ref: RefObject<HTMLElement | null>) {
+  globalDndState.draggingCollectionRef = ref;
+}
+
+export function setDraggingKeys(keys: Set<Key>) {
+  globalDndState.draggingKeys = keys;
+}
+
+export function setDropCollectionRef(ref: RefObject<HTMLElement | null>) {
+  globalDndState.dropCollectionRef = ref;
+}
+
+export function clearGlobalDnDState() {
+  globalDndState = {draggingKeys: new Set()};
+}
+
+export function setGlobalDnDState(state: DnDState) {
+  globalDndState = state;
+}
+
+// Util function to check if the current dragging collection ref is the same as the current targeted droppable collection ref.
+// Allows a droppable ref arg in case the global drop collection ref hasn't been set
+export function isInternalDropOperation(ref?: RefObject<HTMLElement | null>) {
+  let {draggingCollectionRef, dropCollectionRef} = globalDndState;
+  return draggingCollectionRef?.current != null && draggingCollectionRef.current === (ref?.current || dropCollectionRef?.current);
+}
+
+type DropEffect = 'none' | 'copy' | 'link' | 'move';
+export let globalDropEffect: DropEffect;
+export function setGlobalDropEffect(dropEffect: DropEffect) {
+  globalDropEffect = dropEffect;
+}
+
+export let globalAllowedDropOperations = DROP_OPERATION.none;
+export function setGlobalAllowedDropOperations(o: DROP_OPERATION) {
+  globalAllowedDropOperations = o;
+}

package/LICENSE

@@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright 2019 Adobe
-
-   Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.