@instructure/ui-file-drop 8.25.1-snapshot-1 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-1) (2022-06-10)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-file-drop
 

package/es/FileDrop/index.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 const _excluded = ["display", "height", "width", "minWidth", "maxWidth", "margin", "onDropAccepted", "onDropRejected"];
 
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -29,13 +29,12 @@ var _dec, _dec2, _dec3, _class, _class2;
  */
 
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import keycode from 'keycode';
 import { FormFieldMessages } from '@instructure/ui-form-field';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { callRenderProp, passthroughProps, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
-import { isEdge } from '@instructure/ui-utils';
 import { accepts, getAcceptList } from './utils/accepts';
 import { getEventFiles } from './utils/getEventFiles';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -45,214 +44,77 @@ import { propTypes, allowedProps } from './props';
 
 function keyEventIsClickButton(e) {
   return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter;
-} // Used try-catch due to missing document/navigator references in Jenkins
-
-
-function isBrowserMS() {
-  let result = false;
-
-  try {
-    result = document.documentMode || isEdge;
-  } catch (e) {} // eslint-disable-line no-empty
-
-
-  return result;
 }
-
-const IS_MS = isBrowserMS();
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 
-let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class FileDrop extends Component {
-  constructor(props) {
-    super(props);
-
-    this.makeStyleProps = () => {
-      return {
-        functionallyDisabled: this.functionallyDisabled,
-        visuallyDisabled: this.interaction === 'disabled',
-        dragRejected: this.state.isDragRejected || this.invalid,
-        dragAccepted: this.state.isDragAccepted
-      };
-    };
-
-    this.state = {
-      isDragAccepted: false,
-      isDragRejected: false,
-      isFocused: false,
-      isFileBrowserDisplayed: false
-    };
-    this.enterCounter = 0;
-    this.fileInputEl = null;
-    this.defaultId = null;
-    this.messagesId = '';
-    this.ref = null;
-
-    this.handleElementRef = el => {
-      this.ref = el;
-    };
-
-    this.handleDragEnter = e => {
-      e.preventDefault(); // Count the dropzone and any children that are entered.
-
-      this.enterCounter += 1; // Don't trigger onDragEnter for each children after the first one
-
-      if (this.enterCounter > 1) {
-        return;
-      }
-
-      const allFilesAccepted = this.allFilesAccepted(this.getDataTransferItems(e));
-      this.setState({
-        isDragAccepted: allFilesAccepted,
-        isDragRejected: !allFilesAccepted
-      });
-      this.props.onDragEnter(e);
-    };
-
-    this.handleDragOver = e => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      try {
-        const event = e;
-        event.dataTransfer.dropEffect = 'copy';
-      } catch (err) {// continue regardless of error
-      }
-
-      ;
-      this.props.onDragOver(e);
-      return false;
-    };
-
-    this.handleDragLeave = e => {
-      e.preventDefault();
-      this.enterCounter -= 1; // Only deactivate once the dropzone and all children was left
-
-      if (this.enterCounter > 0) {
-        return;
-      }
-
-      this.setState({
-        isDragAccepted: false,
-        isDragRejected: false
-      });
-      this.props.onDragLeave(e);
-    };
-
-    this.handleChange = e => {
-      const _this$props = this.props,
-            onDrop = _this$props.onDrop,
-            onDropAccepted = _this$props.onDropAccepted,
-            onDropRejected = _this$props.onDropRejected,
-            shouldEnablePreview = _this$props.shouldEnablePreview;
-      const fileList = this.getDataTransferItems(e, shouldEnablePreview);
-
-      const _this$parseFiles = this.parseFiles(fileList),
-            _this$parseFiles2 = _slicedToArray(_this$parseFiles, 2),
-            accepted = _this$parseFiles2[0],
-            rejected = _this$parseFiles2[1];
-
-      e.preventDefault();
-      this.enterCounter = 0;
-      onDrop(accepted, rejected, e);
-
-      if (rejected.length > 0) {
-        onDropRejected(rejected, e);
-      }
-
-      if (accepted.length > 0) {
-        onDropAccepted(accepted, e);
-      }
-
-      this.setState({
-        isDragAccepted: false,
-        isDragRejected: false,
-        isFileBrowserDisplayed: false
-      });
-    };
-
-    this.fileAccepted = file => {
-      return accepts(file, this.props.accept);
-    };
-
-    this.handleRef = el => {
-      this.fileInputEl = el;
-    };
-
-    this.handleBlur = () => {
-      this.setState({
-        isFocused: false,
-        isFileBrowserDisplayed: false
-      });
-    };
-
-    this.handleFocus = () => {
-      this.setState({
-        isFocused: true,
-        isFileBrowserDisplayed: false
-      });
-    };
-
-    this.handleClick = e => {
-      if (this.fileInputEl.value && this.props.shouldAllowRepeats) {
-        this.fileInputEl.value = null;
-      } // focus the input (because FF won't)
-
-
-      this.fileInputEl.focus();
-      this.props.onClick(e);
-      this.setState({
-        isFileBrowserDisplayed: true
-      });
-    };
-
-    this.handleKeyDown = e => {
-      if (this.state.isFocused && keyEventIsClickButton(e)) {
-        if (this.props.shouldAllowRepeats) {
-          this.fileInputEl.value = null;
-        } // This bit of logic is necessary for MS browsers but causes unwanted warnings in Firefox
-        // So we need to apply this logic only on MS browsers
-
-        /* istanbul ignore if  */
 
+let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class FileDrop extends Component {
+  static displayName = "FileDrop";
+  static componentId = 'FileDrop';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    onClick: function (_e) {},
+    shouldEnablePreview: false,
+    shouldAllowMultiple: false,
+    shouldAllowRepeats: true,
+    maxSize: Infinity,
+    minSize: 0,
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    messages: [],
+    display: 'block'
+  };
 
-        if (IS_MS) {
-          e.stopPropagation();
-          e.preventDefault();
-          this.fileInputEl.click();
-        }
-      }
-    };
-
-    this.handleKeyUp = e => {
-      // This is to handle the case where ESC is pressed inside a Dialog so that
-      // closing the file browser dialog doesn't also close the Dialog.
-      if (e.keyCode === keycode.codes.esc && this.state.isFileBrowserDisplayed) {
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-        this.setState({
-          isFileBrowserDisplayed: false
-        });
-      }
-    };
-
+  constructor(props) {
+    super(props);
     this.defaultId = props.deterministicId();
     this.messagesId = props.deterministicId('FileDrop-messages');
   }
 
   componentDidMount() {
-    ;
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
   componentDidUpdate() {
-    ;
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+  }
+
+  convertToFile(fileLikeItem) {
+    if (fileLikeItem instanceof DataTransferItem) return fileLikeItem.getAsFile();else return fileLikeItem;
   }
 
+  makeStyleProps = () => {
+    return {
+      functionallyDisabled: this.functionallyDisabled,
+      visuallyDisabled: this.interaction === 'disabled',
+      dragRejected: this.state.isDragRejected || this.invalid,
+      dragAccepted: this.state.isDragAccepted
+    };
+  };
+  state = {
+    isDragAccepted: false,
+    isDragRejected: false,
+    isFocused: false,
+    isFileBrowserDisplayed: false
+  };
+  enterCounter = 0;
+  fileInputEl = null;
+  defaultId = null;
+  messagesId = '';
+  ref = null;
+  handleElementRef = el => {
+    this.ref = el;
+  };
+
   get functionallyDisabled() {
     return this.interaction === 'disabled' || this.interaction === 'readonly';
   }
@@ -274,7 +136,11 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   getDataTransferItems(e, shouldEnablePreview) {
-    let list = Array.from(getEventFiles(e, this.fileInputEl));
+    let list = [];
+    Array.from(getEventFiles(e, this.fileInputEl)).forEach(file => {
+      const fileObj = this.convertToFile(file);
+      if (fileObj) list.push(fileObj);
+    });
 
     if (list.length > 1) {
       list = this.props.shouldAllowMultiple ? list : [list[0]];
@@ -289,11 +155,63 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return list;
   }
 
+  handleDragEnter = e => {
+    var _this$props$onDragEnt, _this$props3;
+
+    e.preventDefault(); // Count the dropzone and any children that are entered.
+
+    this.enterCounter += 1; // Don't trigger onDragEnter for each children after the first one
+
+    if (this.enterCounter > 1) {
+      return;
+    }
+
+    const allFilesAccepted = this.allFilesAccepted(this.getDataTransferItems(e));
+    this.setState({
+      isDragAccepted: allFilesAccepted,
+      isDragRejected: !allFilesAccepted
+    });
+    (_this$props$onDragEnt = (_this$props3 = this.props).onDragEnter) === null || _this$props$onDragEnt === void 0 ? void 0 : _this$props$onDragEnt.call(_this$props3, e);
+  };
+  handleDragOver = e => {
+    var _this$props$onDragOve, _this$props4;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      const event = e;
+      event.dataTransfer.dropEffect = 'copy';
+    } catch (err) {// continue regardless of error
+    }
+
+    (_this$props$onDragOve = (_this$props4 = this.props).onDragOver) === null || _this$props$onDragOve === void 0 ? void 0 : _this$props$onDragOve.call(_this$props4, e);
+    return false;
+  };
+  handleDragLeave = e => {
+    var _this$props$onDragLea, _this$props5;
+
+    e.preventDefault();
+    this.enterCounter -= 1; // Only deactivate once the dropzone and all children was left
+
+    if (this.enterCounter > 0) {
+      return;
+    }
+
+    this.setState({
+      isDragAccepted: false,
+      isDragRejected: false
+    });
+    (_this$props$onDragLea = (_this$props5 = this.props).onDragLeave) === null || _this$props$onDragLea === void 0 ? void 0 : _this$props$onDragLea.call(_this$props5, e);
+  };
+
   parseFiles(fileList) {
     const accepted = [];
     const rejected = [];
     fileList.forEach(file => {
-      if (this.fileAccepted(file) && this.fileMatchSize(file)) {
+      const fileObj = this.convertToFile(file);
+
+      if (fileObj && this.fileAccepted(fileObj) && this.fileMatchSize(fileObj)) {
         accepted.push(file);
       } else {
         rejected.push(file);
@@ -302,6 +220,41 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return [accepted, rejected];
   }
 
+  handleChange = e => {
+    const _this$props6 = this.props,
+          onDrop = _this$props6.onDrop,
+          onDropAccepted = _this$props6.onDropAccepted,
+          onDropRejected = _this$props6.onDropRejected,
+          shouldEnablePreview = _this$props6.shouldEnablePreview;
+    const fileList = this.getDataTransferItems(e, shouldEnablePreview);
+
+    const _this$parseFiles = this.parseFiles(fileList),
+          _this$parseFiles2 = _slicedToArray(_this$parseFiles, 2),
+          accepted = _this$parseFiles2[0],
+          rejected = _this$parseFiles2[1];
+
+    e.preventDefault();
+    this.enterCounter = 0;
+    onDrop && onDrop(accepted, rejected, e);
+
+    if (rejected.length > 0 && onDropRejected) {
+      onDropRejected(rejected, e);
+    }
+
+    if (accepted.length > 0 && onDropAccepted) {
+      onDropAccepted(accepted, e);
+    }
+
+    this.setState({
+      isDragAccepted: false,
+      isDragRejected: false,
+      isFileBrowserDisplayed: false
+    });
+  };
+  fileAccepted = file => {
+    if (this.props.accept) return accepts(file, this.props.accept);else return true;
+  };
+
   fileMatchSize(file) {
     return file.size <= this.props.maxSize && file.size >= this.props.minSize;
   }
@@ -312,7 +265,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
 
   acceptStr() {
     const accept = this.props.accept;
-    return accept ? getAcceptList(accept).join(',') : null;
+    return accept ? getAcceptList(accept).join(',') : void 0;
   }
 
   renderLabel() {
@@ -324,17 +277,67 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     });
   }
 
+  handleRef = el => {
+    this.fileInputEl = el;
+  };
+  handleBlur = () => {
+    this.setState({
+      isFocused: false,
+      isFileBrowserDisplayed: false
+    });
+  };
+  handleFocus = () => {
+    this.setState({
+      isFocused: true,
+      isFileBrowserDisplayed: false
+    });
+  };
+  handleClick = e => {
+    var _this$fileInputEl;
+
+    if (this.fileInputEl.value && this.props.shouldAllowRepeats) {
+      this.fileInputEl.value = null;
+    } // focus the input (because FF won't)
+
+
+    (_this$fileInputEl = this.fileInputEl) === null || _this$fileInputEl === void 0 ? void 0 : _this$fileInputEl.focus();
+    this.props.onClick(e);
+    this.setState({
+      isFileBrowserDisplayed: true
+    });
+  };
+  handleKeyDown = e => {
+    if (this.state.isFocused && keyEventIsClickButton(e)) {
+      if (this.props.shouldAllowRepeats) {
+        this.fileInputEl.value = null;
+      }
+    }
+  };
+  handleKeyUp = e => {
+    // This is to handle the case where ESC is pressed inside a Dialog so that
+    // closing the file browser dialog doesn't also close the Dialog.
+    if (e.keyCode === keycode.codes.esc && this.state.isFileBrowserDisplayed) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      this.setState({
+        isFileBrowserDisplayed: false
+      });
+    }
+  };
+
   render() {
-    const _this$props2 = this.props,
-          display = _this$props2.display,
-          height = _this$props2.height,
-          width = _this$props2.width,
-          minWidth = _this$props2.minWidth,
-          maxWidth = _this$props2.maxWidth,
-          margin = _this$props2.margin,
-          onDropAccepted = _this$props2.onDropAccepted,
-          onDropRejected = _this$props2.onDropRejected,
-          props = _objectWithoutProperties(_this$props2, _excluded);
+    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
+
+    const _this$props7 = this.props,
+          display = _this$props7.display,
+          height = _this$props7.height,
+          width = _this$props7.width,
+          minWidth = _this$props7.minWidth,
+          maxWidth = _this$props7.maxWidth,
+          margin = _this$props7.margin,
+          onDropAccepted = _this$props7.onDropAccepted,
+          onDropRejected = _this$props7.onDropRejected,
+          props = _objectWithoutProperties(_this$props7, _excluded);
 
     const id = this.props.id || this.defaultId;
     const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : void 0;
@@ -349,7 +352,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       height: height,
       elementRef: this.handleElementRef
     }, jsx("label", {
-      css: this.props.styles.fileDropLabel,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.fileDropLabel,
       htmlFor: id,
       onDragEnter: this.handleDragEnter,
       onDragOver: this.handleDragOver,
@@ -363,15 +366,15 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       focusColor: focusColor,
       height: height
     }, jsx("span", {
-      css: this.props.styles.fileDropLabelContent
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent
     }, jsx("span", {
-      css: this.props.styles.fileDropLayout
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout
     }, jsx(View, {
       height: height
     }, this.renderLabel()))))), jsx("input", Object.assign({}, passthroughProps(props), {
       onClick: this.handleClick,
       type: "file",
-      css: this.props.styles.fileDropInput,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
       id: id,
       ref: this.handleRef,
       onFocus: this.handleFocus,
@@ -381,7 +384,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       multiple: this.props.shouldAllowMultiple,
       accept: this.acceptStr(),
       onChange: this.handleChange,
-      "aria-describedby": this.hasMessages ? this.messagesId : null,
+      "aria-describedby": this.hasMessages ? this.messagesId : void 0,
       disabled: this.functionallyDisabled
     })), this.hasMessages ? jsx(View, {
       display: "block",
@@ -392,22 +395,6 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     })) : null);
   }
 
-}, _class2.displayName = "FileDrop", _class2.componentId = 'FileDrop', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  onClick: function (e) {},
-  onDrop: function (accepted, rejected, e) {},
-  onDropAccepted: function (accepted, e) {},
-  onDropRejected: function (rejected, e) {},
-  onDragEnter: function (e) {},
-  onDragOver: function (e) {},
-  onDragLeave: function (e) {},
-  shouldEnablePreview: false,
-  shouldAllowMultiple: false,
-  shouldAllowRepeats: true,
-  maxSize: Infinity,
-  minSize: 0,
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  messages: [],
-  display: 'block'
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default FileDrop;
 export { FileDrop };

package/es/FileDrop/props.js

@@ -25,126 +25,28 @@ import PropTypes from 'prop-types';
 import { FormPropTypes } from '@instructure/ui-form-field';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * The id of the input (to link it to its label for a11y)
-   */
   id: PropTypes.string,
-
-  /**
-   * The content of FileDrop; can be a component or React node.
-   * Components receive `isDragAccepted` and `isDragRejected` as props.
-   */
   renderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-
-  /**
-   * The mime media type/s or file extension/s allowed to be dropped inside
-   */
   accept: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-
-  /**
-   * Called when clicking on drop area to select files to upload
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Called when dropping files or when file dialog window exits successfully
-   */
   onDrop: PropTypes.func,
-
-  /**
-   * Called when dropping allowed files
-   */
   onDropAccepted: PropTypes.func,
-
-  /**
-   * Called when dropping rejected files
-   */
   onDropRejected: PropTypes.func,
-
-  /**
-   * Called when dragging files
-   * and passing through FileDrop's content for the first time
-   */
   onDragEnter: PropTypes.func,
-
-  /**
-   * Called when dragging files and passing through FileDrop's content
-   */
   onDragOver: PropTypes.func,
-
-  /**
-   * Called when dragging files and leaving FileDrop's content
-   */
   onDragLeave: PropTypes.func,
-
-  /**
-   * Flag to use window.URL.createObjectURL for each dropped file and pass it through file.preview
-   */
   shouldEnablePreview: PropTypes.bool,
-
-  /**
-   * Flag to allow multiple files to drop at once
-   */
   shouldAllowMultiple: PropTypes.bool,
-
-  /**
-   * Flag to allow upload of the same file more than once
-   */
   shouldAllowRepeats: PropTypes.bool,
-
-  /**
-   * the maximum file size allowed
-   */
   maxSize: PropTypes.number,
-
-  /**
-   * the minimum file size allowed
-   */
   minSize: PropTypes.number,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   */
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * Set the CSS `display` property on FileInput's outermost element
-   */
   display: PropTypes.oneOf(['block', 'inline-block']),
-
-  /**
-   * Set the CSS `height` property on FileInput's outermost element
-   */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Set the CSS `width` property on FileInput's outermost element
-   */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Set the CSS `maxWidth` property on FileInput's outermost element
-   */
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Set the CSS `minWidth` property on FileInput's outermost element
-   */
   minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Valid values are 0, none, auto, xxx-small, xx-small, x-small, small,
-   * medium, large, x-large, xx-large. Apply these values via familiar
-   * CSS-like shorthand. For example: margin="small auto large".
-   */
   margin: ThemeablePropTypes.spacing
 };
 const allowedProps = ['id', 'renderLabel', 'accept', 'messages', 'onClick', 'onDrop', 'onDropAccepted', 'onDropRejected', 'onDragEnter', 'onDragOver', 'onDragLeave', 'shouldEnablePreview', 'shouldAllowMultiple', 'shouldAllowRepeats', 'maxSize', 'minSize', 'interaction', 'display', 'height', 'width', 'maxWidth', 'minWidth', 'margin'];