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

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-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **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;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -53,68 +53,196 @@ category: components
 **/
 
 
-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'
-  };
-
+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 => {
+      var _this$props$onDragEnt, _this$props;
+
+      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$props = this.props).onDragEnter) === null || _this$props$onDragEnt === void 0 ? void 0 : _this$props$onDragEnt.call(_this$props, e);
+    };
+
+    this.handleDragOver = e => {
+      var _this$props$onDragOve, _this$props2;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      try {
+        const event = e;
+        event.dataTransfer.dropEffect = 'copy';
+      } catch (err) {// continue regardless of error
+      }
+
+      (_this$props$onDragOve = (_this$props2 = this.props).onDragOver) === null || _this$props$onDragOve === void 0 ? void 0 : _this$props$onDragOve.call(_this$props2, e);
+      return false;
+    };
+
+    this.handleDragLeave = e => {
+      var _this$props$onDragLea, _this$props3;
+
+      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$props3 = this.props).onDragLeave) === null || _this$props$onDragLea === void 0 ? void 0 : _this$props$onDragLea.call(_this$props3, e);
+    };
+
+    this.handleChange = e => {
+      const _this$props4 = this.props,
+            onDrop = _this$props4.onDrop,
+            onDropAccepted = _this$props4.onDropAccepted,
+            onDropRejected = _this$props4.onDropRejected,
+            shouldEnablePreview = _this$props4.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
+      });
+    };
+
+    this.fileAccepted = file => {
+      if (this.props.accept) return accepts(file, this.props.accept);else return true;
+    };
+
+    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 => {
+      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
+      });
+    };
+
+    this.handleKeyDown = e => {
+      if (this.state.isFocused && keyEventIsClickButton(e)) {
+        if (this.props.shouldAllowRepeats) {
+          this.fileInputEl.value = null;
+        }
+      }
+    };
+
+    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
+        });
+      }
+    };
+
     this.defaultId = props.deterministicId();
     this.messagesId = props.deterministicId('FileDrop-messages');
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props5;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
+    (_this$props$makeStyle = (_this$props5 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props5, this.makeStyleProps());
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props6;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+    (_this$props$makeStyle2 = (_this$props6 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props6, 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';
   }
@@ -155,56 +283,6 @@ 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 = [];
@@ -220,41 +298,6 @@ 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;
   }
@@ -277,54 +320,6 @@ 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() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
 
@@ -395,6 +390,16 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     })) : null);
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "FileDrop", _class2.componentId = 'FileDrop', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.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'
+}, _class2)) || _class) || _class) || _class);
 export default FileDrop;
 export { FileDrop };

package/lib/FileDrop/index.js

@@ -45,7 +45,7 @@ var _props = require("./props");
 
 const _excluded = ["display", "height", "width", "minWidth", "maxWidth", "margin", "onDropAccepted", "onDropRejected"];
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 function keyEventIsClickButton(e) {
   return e.keyCode === _keycode.default.codes.space || e.keyCode === _keycode.default.codes.enter;
@@ -58,68 +58,196 @@ category: components
 **/
 
 
-let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class FileDrop extends _react.Component {
-  static displayName = "FileDrop";
-  static componentId = 'FileDrop';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.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'
-  };
-
+let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class FileDrop extends _react.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 => {
+      var _this$props$onDragEnt, _this$props;
+
+      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$props = this.props).onDragEnter) === null || _this$props$onDragEnt === void 0 ? void 0 : _this$props$onDragEnt.call(_this$props, e);
+    };
+
+    this.handleDragOver = e => {
+      var _this$props$onDragOve, _this$props2;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      try {
+        const event = e;
+        event.dataTransfer.dropEffect = 'copy';
+      } catch (err) {// continue regardless of error
+      }
+
+      (_this$props$onDragOve = (_this$props2 = this.props).onDragOver) === null || _this$props$onDragOve === void 0 ? void 0 : _this$props$onDragOve.call(_this$props2, e);
+      return false;
+    };
+
+    this.handleDragLeave = e => {
+      var _this$props$onDragLea, _this$props3;
+
+      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$props3 = this.props).onDragLeave) === null || _this$props$onDragLea === void 0 ? void 0 : _this$props$onDragLea.call(_this$props3, e);
+    };
+
+    this.handleChange = e => {
+      const _this$props4 = this.props,
+            onDrop = _this$props4.onDrop,
+            onDropAccepted = _this$props4.onDropAccepted,
+            onDropRejected = _this$props4.onDropRejected,
+            shouldEnablePreview = _this$props4.shouldEnablePreview;
+      const fileList = this.getDataTransferItems(e, shouldEnablePreview);
+
+      const _this$parseFiles = this.parseFiles(fileList),
+            _this$parseFiles2 = (0, _slicedToArray2.default)(_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
+      });
+    };
+
+    this.fileAccepted = file => {
+      if (this.props.accept) return (0, _accepts.accepts)(file, this.props.accept);else return true;
+    };
+
+    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 => {
+      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
+      });
+    };
+
+    this.handleKeyDown = e => {
+      if (this.state.isFocused && keyEventIsClickButton(e)) {
+        if (this.props.shouldAllowRepeats) {
+          this.fileInputEl.value = null;
+        }
+      }
+    };
+
+    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.default.codes.esc && this.state.isFileBrowserDisplayed) {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+        this.setState({
+          isFileBrowserDisplayed: false
+        });
+      }
+    };
+
     this.defaultId = props.deterministicId();
     this.messagesId = props.deterministicId('FileDrop-messages');
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props5;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
+    (_this$props$makeStyle = (_this$props5 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props5, this.makeStyleProps());
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props6;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+    (_this$props$makeStyle2 = (_this$props6 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props6, 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';
   }
@@ -160,56 +288,6 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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 = [];
@@ -225,41 +303,6 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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 = (0, _slicedToArray2.default)(_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 (0, _accepts.accepts)(file, this.props.accept);else return true;
-  };
-
   fileMatchSize(file) {
     return file.size <= this.props.maxSize && file.size >= this.props.minSize;
   }
@@ -282,54 +325,6 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     });
   }
 
-  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.default.codes.esc && this.state.isFileBrowserDisplayed) {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-      this.setState({
-        isFileBrowserDisplayed: false
-      });
-    }
-  };
-
   render() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
 
@@ -399,7 +394,17 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     })) : null);
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "FileDrop", _class2.componentId = 'FileDrop', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.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'
+}, _class2)) || _class) || _class) || _class);
 exports.FileDrop = FileDrop;
 var _default = FileDrop;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-file-drop",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "A flexible facade for an HTML file input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-form-field": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-view": "8.25.1-snapshot-10",
-    "@instructure/uid": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-form-field": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-view": "8.25.1-snapshot-13",
+    "@instructure/uid": "8.25.1-snapshot-13",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"