@instructure/ui-file-drop 8.25.1-snapshot.0 → 8.26.0

package/lib/FileDrop/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
@@ -29,8 +31,6 @@ var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js
 
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 
-var _isEdge = require("@instructure/ui-utils/lib/isEdge.js");
-
 var _accepts = require("./utils/accepts");
 
 var _getEventFiles = require("./utils/getEventFiles");
@@ -49,27 +49,15 @@ var _dec, _dec2, _dec3, _class, _class2;
 
 function keyEventIsClickButton(e) {
   return e.keyCode === _keycode.default.codes.space || e.keyCode === _keycode.default.codes.enter;
-} // Used try-catch due to missing document/navigator references in Jenkins
-
-
-function isBrowserMS() {
-  let result = false;
-
-  try {
-    result = document.documentMode || _isEdge.isEdge;
-  } catch (e) {} // eslint-disable-line no-empty
-
-
-  return result;
 }
-
-const IS_MS = isBrowserMS();
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 
+
 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);
@@ -100,6 +88,8 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     };
 
     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
@@ -113,10 +103,12 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         isDragAccepted: allFilesAccepted,
         isDragRejected: !allFilesAccepted
       });
-      this.props.onDragEnter(e);
+      (_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();
 
@@ -126,12 +118,13 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       } catch (err) {// continue regardless of error
       }
 
-      ;
-      this.props.onDragOver(e);
+      (_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
 
@@ -143,15 +136,15 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         isDragAccepted: false,
         isDragRejected: false
       });
-      this.props.onDragLeave(e);
+      (_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$props = this.props,
-            onDrop = _this$props.onDrop,
-            onDropAccepted = _this$props.onDropAccepted,
-            onDropRejected = _this$props.onDropRejected,
-            shouldEnablePreview = _this$props.shouldEnablePreview;
+      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),
@@ -161,13 +154,13 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
 
       e.preventDefault();
       this.enterCounter = 0;
-      onDrop(accepted, rejected, e);
+      onDrop && onDrop(accepted, rejected, e);
 
-      if (rejected.length > 0) {
+      if (rejected.length > 0 && onDropRejected) {
         onDropRejected(rejected, e);
       }
 
-      if (accepted.length > 0) {
+      if (accepted.length > 0 && onDropAccepted) {
         onDropAccepted(accepted, e);
       }
 
@@ -179,7 +172,7 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     };
 
     this.fileAccepted = file => {
-      return (0, _accepts.accepts)(file, this.props.accept);
+      if (this.props.accept) return (0, _accepts.accepts)(file, this.props.accept);else return true;
     };
 
     this.handleRef = el => {
@@ -201,12 +194,14 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     };
 
     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.focus();
+      (_this$fileInputEl = this.fileInputEl) === null || _this$fileInputEl === void 0 ? void 0 : _this$fileInputEl.focus();
       this.props.onClick(e);
       this.setState({
         isFileBrowserDisplayed: true
@@ -217,16 +212,6 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       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  */
-
-
-        if (IS_MS) {
-          e.stopPropagation();
-          e.preventDefault();
-          this.fileInputEl.click();
         }
       }
     };
@@ -248,13 +233,19 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   componentDidMount() {
-    ;
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle, _this$props5;
+
+    (_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() {
-    ;
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle2, _this$props6;
+
+    (_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;
   }
 
   get functionallyDisabled() {
@@ -278,7 +269,11 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   getDataTransferItems(e, shouldEnablePreview) {
-    let list = Array.from((0, _getEventFiles.getEventFiles)(e, this.fileInputEl));
+    let list = [];
+    Array.from((0, _getEventFiles.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]];
@@ -297,7 +292,9 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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);
@@ -316,7 +313,7 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
 
   acceptStr() {
     const accept = this.props.accept;
-    return accept ? (0, _accepts.getAcceptList)(accept).join(',') : null;
+    return accept ? (0, _accepts.getAcceptList)(accept).join(',') : void 0;
   }
 
   renderLabel() {
@@ -329,16 +326,18 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
     const id = this.props.id || this.defaultId;
     const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : void 0;
     return (0, _emotion.jsx)(_View.View, {
@@ -352,7 +351,7 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       height: height,
       elementRef: this.handleElementRef
     }, (0, _emotion.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,
@@ -366,15 +365,15 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       focusColor: focusColor,
       height: height
     }, (0, _emotion.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
     }, (0, _emotion.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
     }, (0, _emotion.jsx)(_View.View, {
       height: height
     }, this.renderLabel()))))), (0, _emotion.jsx)("input", Object.assign({}, (0, _passthroughProps.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,
@@ -384,7 +383,7 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       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 ? (0, _emotion.jsx)(_View.View, {
       display: "block",
@@ -396,13 +395,7 @@ let FileDrop = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
 }, _class2.displayName = "FileDrop", _class2.componentId = 'FileDrop', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.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) {},
+  onClick: function (_e) {},
   shouldEnablePreview: false,
   shouldAllowMultiple: false,
   shouldAllowRepeats: true,

package/lib/FileDrop/props.js

@@ -37,126 +37,28 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The id of the input (to link it to its label for a11y)
-   */
   id: _propTypes.default.string,
-
-  /**
-   * The content of FileDrop; can be a component or React node.
-   * Components receive `isDragAccepted` and `isDragRejected` as props.
-   */
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
-
-  /**
-   * The mime media type/s or file extension/s allowed to be dropped inside
-   */
   accept: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * Called when clicking on drop area to select files to upload
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * Called when dropping files or when file dialog window exits successfully
-   */
   onDrop: _propTypes.default.func,
-
-  /**
-   * Called when dropping allowed files
-   */
   onDropAccepted: _propTypes.default.func,
-
-  /**
-   * Called when dropping rejected files
-   */
   onDropRejected: _propTypes.default.func,
-
-  /**
-   * Called when dragging files
-   * and passing through FileDrop's content for the first time
-   */
   onDragEnter: _propTypes.default.func,
-
-  /**
-   * Called when dragging files and passing through FileDrop's content
-   */
   onDragOver: _propTypes.default.func,
-
-  /**
-   * Called when dragging files and leaving FileDrop's content
-   */
   onDragLeave: _propTypes.default.func,
-
-  /**
-   * Flag to use window.URL.createObjectURL for each dropped file and pass it through file.preview
-   */
   shouldEnablePreview: _propTypes.default.bool,
-
-  /**
-   * Flag to allow multiple files to drop at once
-   */
   shouldAllowMultiple: _propTypes.default.bool,
-
-  /**
-   * Flag to allow upload of the same file more than once
-   */
   shouldAllowRepeats: _propTypes.default.bool,
-
-  /**
-   * the maximum file size allowed
-   */
   maxSize: _propTypes.default.number,
-
-  /**
-   * the minimum file size allowed
-   */
   minSize: _propTypes.default.number,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   */
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * Set the CSS `display` property on FileInput's outermost element
-   */
   display: _propTypes.default.oneOf(['block', 'inline-block']),
-
-  /**
-   * Set the CSS `height` property on FileInput's outermost element
-   */
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * Set the CSS `width` property on FileInput's outermost element
-   */
   width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * Set the CSS `maxWidth` property on FileInput's outermost element
-   */
   maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * Set the CSS `minWidth` property on FileInput's outermost element
-   */
   minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.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: _emotion.ThemeablePropTypes.spacing
 };
 exports.propTypes = propTypes;

package/lib/FileDrop/utils/getEventFiles.js

@@ -30,13 +30,15 @@ exports.getEventFiles = getEventFiles;
  * SOFTWARE.
  */
 function getEventFiles(event, inputEl) {
-  const dt = event.dataTransfer;
+  if ('dataTransfer' in event) {
+    const dt = event.dataTransfer;
 
-  if (dt) {
-    if (dt.files && dt.files.length) {
-      return dt.files;
-    } else if (dt.items && dt.items.length) {
-      return dt.items;
+    if (dt) {
+      if (dt.files && dt.files.length) {
+        return dt.files;
+      } else if (dt.items && dt.items.length) {
+        return dt.items;
+      }
     }
   } else if (inputEl && inputEl.files) {
     return inputEl.files;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-file-drop",
-  "version": "8.25.1-snapshot.0+59b6babce",
+  "version": "8.26.0",
   "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.0+59b6babce",
-    "@instructure/emotion": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/shared-types": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-color-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-form-field": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-react-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-testable": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-view": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/uid": "8.25.1-snapshot.0+59b6babce",
+    "@instructure/console": "8.26.0",
+    "@instructure/emotion": "8.26.0",
+    "@instructure/shared-types": "8.26.0",
+    "@instructure/ui-color-utils": "8.26.0",
+    "@instructure/ui-form-field": "8.26.0",
+    "@instructure/ui-react-utils": "8.26.0",
+    "@instructure/ui-testable": "8.26.0",
+    "@instructure/ui-utils": "8.26.0",
+    "@instructure/ui-view": "8.26.0",
+    "@instructure/uid": "8.26.0",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-test-locator": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-test-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-themes": "8.25.1-snapshot.0+59b6babce"
+    "@instructure/ui-babel-preset": "8.26.0",
+    "@instructure/ui-test-locator": "8.26.0",
+    "@instructure/ui-test-utils": "8.26.0",
+    "@instructure/ui-themes": "8.26.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,6 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "59b6babce07a9242111475156f544ec11c1a9283"
+  "sideEffects": false
 }