feat(dnd): add configurable dataTransferProperty to droppable

index.d.ts

@@ -577,7 +577,9 @@ export type WindowAttributes = {
   /**
    * If window should have the default drop action
    */
-  droppable?: boolean;
+  droppable?: boolean | {
+    dataTransferProperty?: 'files' | 'items';
+  };
   /**
    * Minimum dimension
    */

src/utils/dnd.js

@@ -90,13 +90,13 @@ const retval = (fn, ...args) => {
   return true;
 };
 
-const getDataTransfer = (ev, type) => {
+const getDataTransfer = (ev, type, dataTransferProperty) => {
   let files = [];
   let data;
 
   if (ev.dataTransfer) {
-    files = ev.dataTransfer.files
-      ? Array.from(ev.dataTransfer.files)
+    files = ev.dataTransfer[dataTransferProperty]
+      ? Array.from(ev.dataTransfer[dataTransferProperty])
       : [];
 
     try {
@@ -200,9 +200,10 @@ export const draggable = (el, options = {}) => {
  * @return {DroppableInstance}
  */
 export const droppable = (el, options = {}) => {
-  const {strict, type, effect, ondragenter, ondragover, ondragleave, ondrop} = {
+  const {strict, type, effect, dataTransferProperty, ondragenter, ondragover, ondragleave, ondrop} = {
     type: 'application/json',
     effect: 'move',
+    dataTransferProperty: 'files',
     ondragenter: () => true,
     ondragover: () => true,
     ondragleave: () => true,
@@ -241,7 +242,7 @@ export const droppable = (el, options = {}) => {
       return false;
     }
 
-    const {files, data} = getDataTransfer(ev, type);
+    const {files, data} = getDataTransfer(ev, type, dataTransferProperty);
 
     ev.stopPropagation();
     ev.preventDefault();

src/utils/windows.js

@@ -58,7 +58,7 @@ export const createAttributes = attrs => ({
   visibility: 'global',
   shadowDOM: false,
   clamp: true,
-  droppable: true,
+  droppable: {},
   mediaQueries: {
     small: 'screen and (max-width: 640px)',
     medium: 'screen and (min-width: 640px) and (max-width: 1024px)',

src/window.js

@@ -84,7 +84,7 @@ import logger from './logger';
  * @property {boolean} [controls=true] Show controls
  * @property {string} [visibility=global] Global visibility, 'restricted' to hide from window lists etc.
  * @property {boolean} [clamp=true] Clamp the window position upon creation
- * @property {boolean} [droppable=true] If window should have the default drop action
+ * @property {boolean | {dataTransferProperty?: 'files' | 'items'}} [droppable={}] If window should have the default drop action
  * @property {WindowDimension} [minDimension] Minimum dimension
  * @property {WindowDimension} [maxDimension] Maximum dimension
  * @property {{name: string}} [mediaQueries] A map of matchMedia to name
@@ -454,11 +454,22 @@ export default class Window extends EventEmitter {
 
     // DnD functionality
     if (this.attributes.droppable) {
+      /*
+        `this.attributes.droppable` should probably always be an object
+        and never be set to `true`.
+        The following code is only to update the setting for legacy applications.
+      */
+      if (this.attributes.droppable === true) {
+        this.attributes.droppable = {};
+      }
+
+      const {dataTransferProperty = 'files'} = this.attributes.droppable;
       const d = droppable(this.$element, {
         ondragenter: (...args) => this.emit('dragenter', ...args, this),
         ondragover: (...args) => this.emit('dragover', ...args, this),
         ondragleave: (...args) => this.emit('dragleave', ...args, this),
-        ondrop: (...args) => this.emit('drop', ...args, this)
+        ondrop: (...args) => this.emit('drop', ...args, this),
+        dataTransferProperty,
       });
 
       this.on('destroy', () => d.destroy());