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

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.26.0](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.26.0) (2022-06-30)
+
+**Note:** Version bump only for package @instructure/ui-file-drop
+
 # [8.25.0](https://github.com/instructure/instructure-ui/compare/v8.24.5...v8.25.0) (2022-06-03)
 
 **Note:** Version bump only for package @instructure/ui-file-drop

package/es/FileDrop/index.js

@@ -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,27 +44,15 @@ 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);
@@ -96,6 +83,8 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     };
 
     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
@@ -109,10 +98,12 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         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();
 
@@ -122,12 +113,13 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       } 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
 
@@ -139,15 +131,15 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         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),
@@ -157,13 +149,13 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
 
       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);
       }
 
@@ -175,7 +167,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     };
 
     this.fileAccepted = file => {
-      return accepts(file, this.props.accept);
+      if (this.props.accept) return accepts(file, this.props.accept);else return true;
     };
 
     this.handleRef = el => {
@@ -197,12 +189,14 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     };
 
     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
@@ -213,16 +207,6 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       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();
         }
       }
     };
@@ -244,13 +228,19 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   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() {
@@ -274,7 +264,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]];
@@ -293,7 +287,9 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     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);
@@ -312,7 +308,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() {
@@ -325,16 +321,18 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   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 +347,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 +361,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 +379,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",
@@ -393,13 +391,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
 }, _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) {},
+  onClick: function (_e) {},
   shouldEnablePreview: false,
   shouldAllowMultiple: false,
   shouldAllowRepeats: true,

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'];

package/es/FileDrop/utils/getEventFiles.js

@@ -22,13 +22,15 @@
  * 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;