react-dropzone 7.0.1 → 8.0.3

package/dist/es/index.js

@@ -2,6 +2,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -16,203 +18,104 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isDragDataWithFiles, supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems as defaultGetDataTransferItem, isIeOrEdge } from './utils';
-import styles from './utils/styles';
+import { isDragDataWithFiles, supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems as defaultGetDataTransferItem, isIeOrEdge, composeEventHandlers } from './utils';
 
 var Dropzone = function (_React$Component) {
   _inherits(Dropzone, _React$Component);
 
-  function Dropzone(props, context) {
+  function Dropzone() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Dropzone);
 
-    var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props, context));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.renderChildren = function (children, isDragActive, isDragAccept, isDragReject) {
-      if (typeof children === 'function') {
-        return children(_extends({}, _this.state, {
-          isDragActive: isDragActive,
-          isDragAccept: isDragAccept,
-          isDragReject: isDragReject,
-          open: _this.open
-        }));
-      }
-      return children;
-    };
-
-    _this.composeHandlers = _this.composeHandlers.bind(_this);
-    _this.onClick = _this.onClick.bind(_this);
-    _this.onDocumentDrop = _this.onDocumentDrop.bind(_this);
-    _this.onDragEnter = _this.onDragEnter.bind(_this);
-    _this.onDragLeave = _this.onDragLeave.bind(_this);
-    _this.onDragOver = _this.onDragOver.bind(_this);
-    _this.onDragStart = _this.onDragStart.bind(_this);
-    _this.onDrop = _this.onDrop.bind(_this);
-    _this.onFileDialogCancel = _this.onFileDialogCancel.bind(_this);
-    _this.onInputElementClick = _this.onInputElementClick.bind(_this);
-    _this.open = _this.open.bind(_this);
-
-    _this.setRef = _this.setRef.bind(_this);
-    _this.setRefs = _this.setRefs.bind(_this);
-
-    _this.isFileDialogActive = false;
-
-    _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       draggedFiles: [],
       acceptedFiles: [],
       rejectedFiles: []
-    };
-    return _this;
-  }
-
-  _createClass(Dropzone, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var preventDropOnDocument = this.props.preventDropOnDocument;
-
-      this.dragTargets = [];
-
-      if (preventDropOnDocument) {
-        document.addEventListener('dragover', onDocumentDragOver, false);
-        document.addEventListener('drop', this.onDocumentDrop, false);
-      }
-      if (this.fileInputEl != null) {
-        this.fileInputEl.addEventListener('click', this.onInputElementClick, false);
-      }
-      window.addEventListener('focus', this.onFileDialogCancel, false);
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      var preventDropOnDocument = this.props.preventDropOnDocument;
-
-      if (preventDropOnDocument) {
-        document.removeEventListener('dragover', onDocumentDragOver);
-        document.removeEventListener('drop', this.onDocumentDrop);
-      }
-      if (this.fileInputEl != null) {
-        this.fileInputEl.removeEventListener('click', this.onInputElementClick, false);
-      }
-      window.removeEventListener('focus', this.onFileDialogCancel, false);
-    }
-  }, {
-    key: 'composeHandlers',
-    value: function composeHandlers(handler) {
-      if (this.props.disabled) {
-        return null;
-      }
-
-      return handler;
-    }
-  }, {
-    key: 'onDocumentDrop',
-    value: function onDocumentDrop(evt) {
-      if (this.node && this.node.contains(evt.target)) {
+    }, _this.isFileDialogActive = false, _this.onDocumentDrop = function (evt) {
+      if (_this.node && _this.node.contains(evt.target)) {
         // if we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
         return;
       }
       evt.preventDefault();
-      this.dragTargets = [];
-    }
-  }, {
-    key: 'onDragStart',
-    value: function onDragStart(evt) {
+      _this.dragTargets = [];
+    }, _this.onDragStart = function (evt) {
       evt.persist();
-      if (this.props.onDragStart && isDragDataWithFiles(evt)) {
-        this.props.onDragStart.call(this, evt);
+      if (_this.props.onDragStart && isDragDataWithFiles(evt)) {
+        _this.props.onDragStart.call(_this, evt);
       }
-    }
-  }, {
-    key: 'onDragEnter',
-    value: function onDragEnter(evt) {
-      var _this2 = this;
-
+    }, _this.onDragEnter = function (evt) {
       evt.preventDefault();
 
       // Count the dropzone and any children that are entered.
-      if (this.dragTargets.indexOf(evt.target) === -1) {
-        this.dragTargets.push(evt.target);
+      if (_this.dragTargets.indexOf(evt.target) === -1) {
+        _this.dragTargets.push(evt.target);
       }
 
       evt.persist();
 
       if (isDragDataWithFiles(evt)) {
-        Promise.resolve(this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
+        Promise.resolve(_this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
           if (evt.isPropagationStopped()) {
             return;
           }
 
-          _this2.setState({
+          _this.setState({
             draggedFiles: draggedFiles,
             // Do not rely on files for the drag state. It doesn't work in Safari.
             isDragActive: true
           });
         });
 
-        if (this.props.onDragEnter) {
-          this.props.onDragEnter.call(this, evt);
+        if (_this.props.onDragEnter) {
+          _this.props.onDragEnter.call(_this, evt);
         }
       }
-    }
-  }, {
-    key: 'onDragOver',
-    value: function onDragOver(evt) {
+    }, _this.onDragOver = function (evt) {
       // eslint-disable-line class-methods-use-this
       evt.preventDefault();
       evt.persist();
 
-      try {
-        // The file dialog on Chrome allows users to drag files from the dialog onto
-        // the dropzone, causing the browser the crash when the file dialog is closed.
-        // A drop effect of 'none' prevents the file from being dropped
-        evt.dataTransfer.dropEffect = this.isFileDialogActive ? 'none' : 'copy'; // eslint-disable-line no-param-reassign
-      } catch (err) {
-        // continue regardless of error
-      }
-
-      if (this.props.onDragOver && isDragDataWithFiles(evt)) {
-        this.props.onDragOver.call(this, evt);
+      if (_this.props.onDragOver && isDragDataWithFiles(evt)) {
+        _this.props.onDragOver.call(_this, evt);
       }
 
       return false;
-    }
-  }, {
-    key: 'onDragLeave',
-    value: function onDragLeave(evt) {
-      var _this3 = this;
-
+    }, _this.onDragLeave = function (evt) {
       evt.preventDefault();
       evt.persist();
 
       // Only deactivate once the dropzone and all children have been left.
-      this.dragTargets = this.dragTargets.filter(function (el) {
-        return el !== evt.target && _this3.node.contains(el);
+      _this.dragTargets = _this.dragTargets.filter(function (el) {
+        return el !== evt.target && _this.node.contains(el);
       });
-      if (this.dragTargets.length > 0) {
+      if (_this.dragTargets.length > 0) {
         return;
       }
 
       // Clear dragging files state
-      this.setState({
+      _this.setState({
         isDragActive: false,
         draggedFiles: []
       });
 
-      if (this.props.onDragLeave && isDragDataWithFiles(evt)) {
-        this.props.onDragLeave.call(this, evt);
+      if (_this.props.onDragLeave && isDragDataWithFiles(evt)) {
+        _this.props.onDragLeave.call(_this, evt);
       }
-    }
-  }, {
-    key: 'onDrop',
-    value: function onDrop(evt) {
-      var _this4 = this;
-
-      var _props = this.props,
-          onDrop = _props.onDrop,
-          onDropAccepted = _props.onDropAccepted,
-          onDropRejected = _props.onDropRejected,
-          multiple = _props.multiple,
-          accept = _props.accept,
-          getDataTransferItems = _props.getDataTransferItems;
+    }, _this.onDrop = function (evt) {
+      var _this$props = _this.props,
+          onDrop = _this$props.onDrop,
+          onDropAccepted = _this$props.onDropAccepted,
+          onDropRejected = _this$props.onDropRejected,
+          multiple = _this$props.multiple,
+          accept = _this$props.accept,
+          getDataTransferItems = _this$props.getDataTransferItems;
 
       // Stop default browser behavior
 
@@ -222,14 +125,14 @@ var Dropzone = function (_React$Component) {
       evt.persist();
 
       // Reset the counter along with the drag on a drop.
-      this.dragTargets = [];
-      this.isFileDialogActive = false;
+      _this.dragTargets = [];
+      _this.isFileDialogActive = false;
 
       // Clear files value
-      this.draggedFiles = null;
+      _this.draggedFiles = null;
 
       // Reset drag state
-      this.setState({
+      _this.setState({
         isDragActive: false,
         draggedFiles: []
       });
@@ -244,7 +147,7 @@ var Dropzone = function (_React$Component) {
           }
 
           fileList.forEach(function (file) {
-            if (fileAccepted(file, accept) && fileMatchSize(file, _this4.props.maxSize, _this4.props.minSize)) {
+            if (fileAccepted(file, accept) && fileMatchSize(file, _this.props.maxSize, _this.props.minSize)) {
               acceptedFiles.push(file);
             } else {
               rejectedFiles.push(file);
@@ -260,33 +163,30 @@ var Dropzone = function (_React$Component) {
           // Update `acceptedFiles` and `rejectedFiles` state
           // This will make children render functions receive the appropriate
           // values
-          _this4.setState({ acceptedFiles: acceptedFiles, rejectedFiles: rejectedFiles }, function () {
+          _this.setState({ acceptedFiles: acceptedFiles, rejectedFiles: rejectedFiles }, function () {
             if (onDrop) {
-              onDrop.call(_this4, acceptedFiles, rejectedFiles, evt);
+              onDrop.call(_this, acceptedFiles, rejectedFiles, evt);
             }
 
             if (rejectedFiles.length > 0 && onDropRejected) {
-              onDropRejected.call(_this4, rejectedFiles, evt);
+              onDropRejected.call(_this, rejectedFiles, evt);
             }
 
             if (acceptedFiles.length > 0 && onDropAccepted) {
-              onDropAccepted.call(_this4, acceptedFiles, evt);
+              onDropAccepted.call(_this, acceptedFiles, evt);
             }
           });
         });
       }
-    }
-  }, {
-    key: 'onClick',
-    value: function onClick(evt) {
-      var _props2 = this.props,
-          onClick = _props2.onClick,
-          disableClick = _props2.disableClick;
+    }, _this.onClick = function (evt) {
+      var _this$props2 = _this.props,
+          onClick = _this$props2.onClick,
+          disableClick = _this$props2.disableClick;
 
       // if onClick prop is given, run it first
 
       if (onClick) {
-        onClick.call(this, evt);
+        onClick.call(_this, evt);
       }
 
       // if disableClick is not set and the event hasn't been default prefented within
@@ -298,38 +198,27 @@ var Dropzone = function (_React$Component) {
         // this is so react can handle state changes in the onClick prop above above
         // see: https://github.com/react-dropzone/react-dropzone/issues/450
         if (isIeOrEdge()) {
-          setTimeout(this.open, 0);
+          setTimeout(_this.open, 0);
         } else {
-          this.open();
+          _this.open();
         }
       }
-    }
-  }, {
-    key: 'onInputElementClick',
-    value: function onInputElementClick(evt) {
+    }, _this.onInputElementClick = function (evt) {
       evt.stopPropagation();
-      if (this.props.inputProps && this.props.inputProps.onClick) {
-        this.props.inputProps.onClick(evt);
-      }
-    }
-  }, {
-    key: 'onFileDialogCancel',
-    value: function onFileDialogCancel() {
-      var _this5 = this;
-
+    }, _this.onFileDialogCancel = function () {
       // timeout will not recognize context of this method
-      var onFileDialogCancel = this.props.onFileDialogCancel;
+      var onFileDialogCancel = _this.props.onFileDialogCancel;
       // execute the timeout only if the FileDialog is opened in the browser
 
-      if (this.isFileDialogActive) {
+      if (_this.isFileDialogActive) {
         setTimeout(function () {
-          if (_this5.fileInputEl != null) {
+          if (_this.input != null) {
             // Returns an object as FileList
-            var files = _this5.fileInputEl.files;
+            var files = _this.input.files;
 
 
             if (!files.length) {
-              _this5.isFileDialogActive = false;
+              _this.isFileDialogActive = false;
 
               if (typeof onFileDialogCancel === 'function') {
                 onFileDialogCancel();
@@ -338,162 +227,179 @@ var Dropzone = function (_React$Component) {
           }
         }, 300);
       }
+    }, _this.onFocus = function (evt) {
+      var onFocus = _this.props.onFocus;
+
+      if (onFocus) {
+        onFocus.call(_this, evt);
+      }
+      if (!evt.isDefaultPrevented()) {
+        _this.setState({ isFocused: true });
+      }
+    }, _this.onBlur = function (evt) {
+      var onBlur = _this.props.onBlur;
+
+      if (onBlur) {
+        onBlur.call(_this, evt);
+      }
+      if (!evt.isDefaultPrevented()) {
+        _this.setState({ isFocused: false });
+      }
+    }, _this.onKeyDown = function (evt) {
+      var onKeyDown = _this.props.onKeyDown;
+
+      if (!_this.node.isEqualNode(evt.target)) {
+        return;
+      }
+
+      if (onKeyDown) {
+        onKeyDown.call(_this, evt);
+      }
+
+      if (!evt.isDefaultPrevented() && (evt.keyCode === 32 || evt.keyCode === 13)) {
+        evt.preventDefault();
+        _this.open();
+      }
+    }, _this.composeHandler = function (handler) {
+      if (_this.props.disabled) {
+        return null;
+      }
+      return handler;
+    }, _this.getRootProps = function () {
+      var _extends2;
+
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var _ref2$refKey = _ref2.refKey,
+          refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
+          onKeyDown = _ref2.onKeyDown,
+          onFocus = _ref2.onFocus,
+          onBlur = _ref2.onBlur,
+          onClick = _ref2.onClick,
+          onDragStart = _ref2.onDragStart,
+          onDragEnter = _ref2.onDragEnter,
+          onDragOver = _ref2.onDragOver,
+          onDragLeave = _ref2.onDragLeave,
+          onDrop = _ref2.onDrop,
+          rest = _objectWithoutProperties(_ref2, ['refKey', 'onKeyDown', 'onFocus', 'onBlur', 'onClick', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop']);
+
+      return _extends((_extends2 = {
+        onKeyDown: _this.composeHandler(onKeyDown ? composeEventHandlers(onKeyDown, _this.onKeyDown) : _this.onKeyDown),
+        onFocus: _this.composeHandler(onFocus ? composeEventHandlers(onFocus, _this.onFocus) : _this.onFocus),
+        onBlur: _this.composeHandler(onBlur ? composeEventHandlers(onBlur, _this.onBlur) : _this.onBlur),
+        onClick: _this.composeHandler(onClick ? composeEventHandlers(onClick, _this.onClick) : _this.onClick),
+        onDragStart: _this.composeHandler(onDragStart ? composeEventHandlers(onDragStart, _this.onDragStart) : _this.onDragStart),
+        onDragEnter: _this.composeHandler(onDragEnter ? composeEventHandlers(onDragEnter, _this.onDragEnter) : _this.onDragEnter),
+        onDragOver: _this.composeHandler(onDragOver ? composeEventHandlers(onDragOver, _this.onDragOver) : _this.onDragOver),
+        onDragLeave: _this.composeHandler(onDragLeave ? composeEventHandlers(onDragLeave, _this.onDragLeave) : _this.onDragLeave),
+        onDrop: _this.composeHandler(onDrop ? composeEventHandlers(onDrop, _this.onDrop) : _this.onDrop)
+      }, _defineProperty(_extends2, refKey, _this.setNodeRef), _defineProperty(_extends2, 'tabIndex', _this.props.disabled ? -1 : 0), _extends2), rest);
+    }, _this.getInputProps = function () {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var _ref3$refKey = _ref3.refKey,
+          refKey = _ref3$refKey === undefined ? 'ref' : _ref3$refKey,
+          onChange = _ref3.onChange,
+          onClick = _ref3.onClick,
+          rest = _objectWithoutProperties(_ref3, ['refKey', 'onChange', 'onClick']);
+
+      var _this$props3 = _this.props,
+          accept = _this$props3.accept,
+          multiple = _this$props3.multiple,
+          name = _this$props3.name;
+
+      var inputProps = _defineProperty({
+        accept: accept,
+        type: 'file',
+        style: { display: 'none' },
+        multiple: supportMultiple && multiple,
+        onChange: composeEventHandlers(onChange, _this.onDrop),
+        onClick: composeEventHandlers(onClick, _this.onInputElementClick),
+        autoComplete: 'off',
+        tabIndex: -1
+      }, refKey, _this.setInputRef);
+      if (name && name.length) {
+        inputProps.name = name;
+      }
+      return _extends({}, inputProps, rest);
+    }, _this.setNodeRef = function (node) {
+      _this.node = node;
+    }, _this.setInputRef = function (input) {
+      _this.input = input;
+    }, _this.open = function () {
+      _this.isFileDialogActive = true;
+      if (_this.input) {
+        _this.input.value = null;
+        _this.input.click();
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Dropzone, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var preventDropOnDocument = this.props.preventDropOnDocument;
+
+      this.dragTargets = [];
+
+      if (preventDropOnDocument) {
+        document.addEventListener('dragover', onDocumentDragOver, false);
+        document.addEventListener('drop', this.onDocumentDrop, false);
+      }
+
+      window.addEventListener('focus', this.onFileDialogCancel, false);
     }
   }, {
-    key: 'setRef',
-    value: function setRef(ref) {
-      this.node = ref;
-    }
-  }, {
-    key: 'setRefs',
-    value: function setRefs(ref) {
-      this.fileInputEl = ref;
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      var preventDropOnDocument = this.props.preventDropOnDocument;
+
+      if (preventDropOnDocument) {
+        document.removeEventListener('dragover', onDocumentDragOver);
+        document.removeEventListener('drop', this.onDocumentDrop);
+      }
+
+      window.removeEventListener('focus', this.onFileDialogCancel, false);
     }
+
     /**
      * Open system file upload dialog.
      *
      * @public
      */
 
-  }, {
-    key: 'open',
-    value: function open() {
-      this.isFileDialogActive = true;
-      this.fileInputEl.value = null;
-      this.fileInputEl.click();
-    }
   }, {
     key: 'render',
     value: function render() {
-      var _props3 = this.props,
-          accept = _props3.accept,
-          acceptClassName = _props3.acceptClassName,
-          activeClassName = _props3.activeClassName,
-          children = _props3.children,
-          disabled = _props3.disabled,
-          disabledClassName = _props3.disabledClassName,
-          inputProps = _props3.inputProps,
-          multiple = _props3.multiple,
-          name = _props3.name,
-          rejectClassName = _props3.rejectClassName,
-          rest = _objectWithoutProperties(_props3, ['accept', 'acceptClassName', 'activeClassName', 'children', 'disabled', 'disabledClassName', 'inputProps', 'multiple', 'name', 'rejectClassName']);
-
-      var acceptStyle = rest.acceptStyle,
-          activeStyle = rest.activeStyle,
-          _rest$className = rest.className,
-          className = _rest$className === undefined ? '' : _rest$className,
-          disabledStyle = rest.disabledStyle,
-          rejectStyle = rest.rejectStyle,
-          style = rest.style,
-          props = _objectWithoutProperties(rest, ['acceptStyle', 'activeStyle', 'className', 'disabledStyle', 'rejectStyle', 'style']);
-
+      var _props = this.props,
+          children = _props.children,
+          multiple = _props.multiple,
+          disabled = _props.disabled;
       var _state = this.state,
           isDragActive = _state.isDragActive,
-          draggedFiles = _state.draggedFiles;
+          isFocused = _state.isFocused,
+          draggedFiles = _state.draggedFiles,
+          acceptedFiles = _state.acceptedFiles,
+          rejectedFiles = _state.rejectedFiles;
+
 
       var filesCount = draggedFiles.length;
       var isMultipleAllowed = multiple || filesCount <= 1;
       var isDragAccept = filesCount > 0 && allFilesAccepted(draggedFiles, this.props.accept);
       var isDragReject = filesCount > 0 && (!isDragAccept || !isMultipleAllowed);
-      var noStyles = !className && !style && !activeStyle && !acceptStyle && !rejectStyle && !disabledStyle;
-
-      if (isDragActive && activeClassName) {
-        className += ' ' + activeClassName;
-      }
-      if (isDragAccept && acceptClassName) {
-        className += ' ' + acceptClassName;
-      }
-      if (isDragReject && rejectClassName) {
-        className += ' ' + rejectClassName;
-      }
-      if (disabled && disabledClassName) {
-        className += ' ' + disabledClassName;
-      }
-
-      if (noStyles) {
-        style = styles.default;
-        activeStyle = styles.active;
-        acceptStyle = styles.accepted;
-        rejectStyle = styles.rejected;
-        disabledStyle = styles.disabled;
-      }
-
-      var appliedStyle = _extends({ position: 'relative' }, style);
-      if (activeStyle && isDragActive) {
-        appliedStyle = _extends({}, appliedStyle, activeStyle);
-      }
-      if (acceptStyle && isDragAccept) {
-        appliedStyle = _extends({}, appliedStyle, acceptStyle);
-      }
-      if (rejectStyle && isDragReject) {
-        appliedStyle = _extends({}, appliedStyle, rejectStyle);
-      }
-      if (disabledStyle && disabled) {
-        appliedStyle = _extends({}, appliedStyle, disabledStyle);
-      }
-
-      var inputAttributes = {
-        accept: accept,
-        disabled: disabled,
-        type: 'file',
-        style: _extends({
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          opacity: 0.00001,
-          pointerEvents: 'none'
-        }, inputProps.style),
-        multiple: supportMultiple && multiple,
-        ref: this.setRefs,
-        onChange: this.onDrop,
-        autoComplete: 'off'
-      };
-
-      if (name && name.length) {
-        inputAttributes.name = name;
-      }
 
-      // Destructure custom props away from props used for the div element
-      /* eslint-disable no-unused-vars */
-
-      var acceptedFiles = props.acceptedFiles,
-          preventDropOnDocument = props.preventDropOnDocument,
-          disableClick = props.disableClick,
-          onDropAccepted = props.onDropAccepted,
-          onDropRejected = props.onDropRejected,
-          onFileDialogCancel = props.onFileDialogCancel,
-          maxSize = props.maxSize,
-          minSize = props.minSize,
-          getDataTransferItems = props.getDataTransferItems,
-          divProps = _objectWithoutProperties(props, ['acceptedFiles', 'preventDropOnDocument', 'disableClick', 'onDropAccepted', 'onDropRejected', 'onFileDialogCancel', 'maxSize', 'minSize', 'getDataTransferItems']);
-      /* eslint-enable no-unused-vars */
-
-      /* eslint-disable jsx-a11y/no-static-element-interactions */
-      /* eslint-disable jsx-a11y/click-events-have-key-events */
-
-
-      return React.createElement(
-        'div',
-        _extends({
-          className: className,
-          style: appliedStyle
-        }, divProps /* expand user provided props first so event handlers are never overridden */
-        , {
-          onClick: this.composeHandlers(this.onClick),
-          onDragStart: this.composeHandlers(this.onDragStart),
-          onDragEnter: this.composeHandlers(this.onDragEnter),
-          onDragOver: this.composeHandlers(this.onDragOver),
-          onDragLeave: this.composeHandlers(this.onDragLeave),
-          onDrop: this.composeHandlers(this.onDrop),
-          ref: this.setRef,
-          'aria-disabled': disabled
-        }),
-        this.renderChildren(children, isDragActive, isDragAccept, isDragReject),
-        React.createElement('input', _extends({}, inputProps /* expand user provided inputProps first so inputAttributes override them */
-        , inputAttributes))
-      );
+      return children({
+        isDragActive: isDragActive,
+        isDragAccept: isDragAccept,
+        isDragReject: isDragReject,
+        draggedFiles: draggedFiles,
+        acceptedFiles: acceptedFiles,
+        rejectedFiles: rejectedFiles,
+        isFocused: isFocused && !disabled,
+        getRootProps: this.getRootProps,
+        getInputProps: this.getInputProps,
+        open: this.open
+      });
     }
   }]);
 
@@ -513,9 +419,21 @@ Dropzone.propTypes = {
   accept: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 
   /**
-   * Contents of the dropzone
+   * Render function that renders the actual component
+   *
+   * @param {Object} props
+   * @param {Function} props.getRootProps Returns the props you should apply to the root drop container you render
+   * @param {Function} props.getInputProps Returns the props you should apply to hidden file input you render
+   * @param {Function} props.open Open the native file selection dialog
+   * @param {Boolean} props.isFocused Dropzone area is in focus
+   * @param {Boolean} props.isDragActive Active drag is in progress
+   * @param {Boolean} props.isDragAccept Dragged files are accepted
+   * @param {Boolean} props.isDragReject Some dragged files are rejected
+   * @param {Array} props.draggedFiles Files in active drag
+   * @param {Array} props.acceptedFiles Accepted files
+   * @param {Array} props.rejectedFiles Rejected files
    */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  children: PropTypes.func,
 
   /**
    * Disallow clicking on the dropzone container to open file dialog
@@ -532,11 +450,6 @@ Dropzone.propTypes = {
    */
   preventDropOnDocument: PropTypes.bool,
 
-  /**
-   * Pass additional attributes to the `<input type="file"/>` tag
-   */
-  inputProps: PropTypes.object,
-
   /**
    * Allow dropping multiple files
    */
@@ -558,70 +471,61 @@ Dropzone.propTypes = {
   minSize: PropTypes.number,
 
   /**
-   * className
-   */
-  className: PropTypes.string,
-
-  /**
-   * className to apply when drag is active
-   */
-  activeClassName: PropTypes.string,
-
-  /**
-   * className to apply when drop will be accepted
-   */
-  acceptClassName: PropTypes.string,
-
-  /**
-   * className to apply when drop will be rejected
-   */
-  rejectClassName: PropTypes.string,
-
-  /**
-   * className to apply when dropzone is disabled
-   */
-  disabledClassName: PropTypes.string,
-
-  /**
-   * CSS styles to apply
-   */
-  style: PropTypes.object,
-
-  /**
-   * CSS styles to apply when drag is active
-   */
-  activeStyle: PropTypes.object,
-
-  /**
-   * CSS styles to apply when drop will be accepted
+   * getDataTransferItems handler
+   * @param {Event} event
+   * @returns {Array} array of File objects
    */
-  acceptStyle: PropTypes.object,
+  getDataTransferItems: PropTypes.func,
 
   /**
-   * CSS styles to apply when drop will be rejected
+   * onClick callback
+   * @param {Event} event
    */
-  rejectStyle: PropTypes.object,
+  onClick: PropTypes.func,
 
   /**
-   * CSS styles to apply when dropzone is disabled
+   * onFocus callback
    */
-  disabledStyle: PropTypes.object,
+  onFocus: PropTypes.func,
 
   /**
-   * getDataTransferItems handler
-   * @param {Event} event
-   * @returns {Array} array of File objects
+   * onBlur callback
    */
-  getDataTransferItems: PropTypes.func,
+  onBlur: PropTypes.func,
 
   /**
-   * onClick callback
-   * @param {Event} event
+   * onKeyDown callback
    */
-  onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
 
   /**
-   * onDrop callback
+   * The `onDrop` method that accepts two arguments.
+   * The first argument represents the accepted files and the second argument the rejected files.
+   *
+   * ```javascript
+   * function onDrop(acceptedFiles, rejectedFiles) {
+   *   // do stuff with files...
+   * }
+   * ```
+   *
+   * Files are accepted or rejected based on the `accept` prop.
+   * This must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
+   *
+   * Note that the `onDrop` callback will always be called regardless if the dropped files were accepted or rejected.
+   * You can use the `onDropAccepted`/`onDropRejected` props if you'd like to react to a specific event instead of the `onDrop` prop.
+   *
+   * The `onDrop` callback will provide you with an array of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then process and send to a server.
+   * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
+   *
+   * ```javascript
+   * function onDrop(acceptedFiles) {
+   *   const req = request.post('/upload')
+   *   acceptedFiles.forEach(file => {
+   *     req.attach(file.name, file)
+   *   })
+   *   req.end(callback)
+   * }
+   * ```
    */
   onDrop: PropTypes.func,
 
@@ -665,7 +569,6 @@ Dropzone.defaultProps = {
   preventDropOnDocument: true,
   disabled: false,
   disableClick: false,
-  inputProps: {},
   multiple: true,
   maxSize: Infinity,
   minSize: 0,