@instructure/ui-file-drop 8.8.1-snapshot.7 → 8.9.1-snapshot.2

package/lib/FileDrop/props.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
+
+var _emotion = require("@instructure/emotion");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * 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.string,
+   * 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;
+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'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-file-drop",
-  "version": "8.8.1-snapshot.7+90b251d58",
+  "version": "8.9.1-snapshot.2+7f5faa3df",
   "description": "A flexible facade for an HTML file input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/emotion": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-color-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-form-field": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-testable": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-view": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/uid": "8.8.1-snapshot.7+90b251d58",
+    "@instructure/console": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/emotion": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/shared-types": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-color-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-form-field": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-react-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-testable": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-view": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/uid": "8.9.1-snapshot.2+7f5faa3df",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/shared-types": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.7+90b251d58",
-    "@instructure/ui-themes": "8.8.1-snapshot.7+90b251d58"
+    "@instructure/ui-babel-preset": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-test-locator": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-test-utils": "8.9.1-snapshot.2+7f5faa3df",
+    "@instructure/ui-themes": "8.9.1-snapshot.2+7f5faa3df"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "90b251d580c75205b6cbb884fe922059cfc494dd"
+  "gitHead": "7f5faa3df83667636304e0901ef1008d98dffc9a"
 }

package/src/FileDrop/index.tsx

@@ -23,9 +23,9 @@
  */
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 import keycode from 'keycode'
-import { FormPropTypes, FormFieldMessages } from '@instructure/ui-form-field'
+
+import { FormFieldMessages } from '@instructure/ui-form-field'
 import { View } from '@instructure/ui-view'
 import { uid } from '@instructure/uid'
 import { testable } from '@instructure/ui-testable'
@@ -35,12 +35,16 @@ import {
   getInteraction
 } 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, ThemeablePropTypes } from '@instructure/emotion'
+
+import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { FileDropProps, FileDropState, FileDropStyleProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { FileDropProps, FileDropState, FileDropStyleProps } from './props'
 
 function keyEventIsClickButton(e: any) {
   return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter
@@ -68,116 +72,8 @@ category: components
 class FileDrop extends Component<FileDropProps, FileDropState> {
   static readonly componentId = 'FileDrop'
 
-  static 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.string,
-     * 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,
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
     onClick: function (e: any) {},
@@ -199,29 +95,25 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     maxSize: Infinity,
     minSize: 0,
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: undefined,
     messages: [],
-    id: undefined,
-    accept: undefined,
-    display: 'block',
-    height: undefined,
-    width: undefined,
-    minWidth: undefined,
-    maxWidth: undefined,
-    margin: undefined
+    display: 'block'
   }
+
   constructor(props: FileDropProps) {
     super(props)
     // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'null'.
     this.defaultId = uid('FileDrop')
     ;(this as any).messagesId = uid('FileDrop-messages')
   }
+
   componentDidMount() {
     ;(this.props as any).makeStyles(this.makeStyleProps())
   }
+
   componentDidUpdate() {
     ;(this.props as any).makeStyles(this.makeStyleProps())
   }
+
   makeStyleProps = (): FileDropStyleProps => {
     return {
       functionallyDisabled: this.functionallyDisabled,
@@ -230,26 +122,32 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       dragAccepted: this.state.isDragAccepted
     }
   }
+
   state: FileDropState = {
     isDragAccepted: false,
     isDragRejected: false,
     isFocused: false,
     isFileBrowserDisplayed: false
   }
+
   enterCounter = 0
   fileInputEl = null
   defaultId = null
+
   get functionallyDisabled() {
     return this.interaction === 'disabled' || this.interaction === 'readonly'
   }
+
   get hasMessages() {
     return (
       (this.props as any).messages && (this.props as any).messages.length > 0
     )
   }
+
   get interaction() {
     return getInteraction({ props: this.props })
   }
+
   get invalid() {
     return (
       this.hasMessages &&
@@ -258,6 +156,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       }) >= 0
     )
   }
+
   getDataTransferItems(e: any, shouldEnablePreview: any) {
     let list = Array.from(getEventFiles(e, this.fileInputEl))
     if (list.length > 1) {
@@ -270,6 +169,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     }
     return list
   }
+
   handleDragEnter = (e: any) => {
     e.preventDefault()
     // Count the dropzone and any children that are entered.
@@ -286,6 +186,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     })
     ;(this.props as any).onDragEnter(e)
   }
+
   handleDragOver = (e: any) => {
     e.preventDefault()
     e.stopPropagation()
@@ -298,6 +199,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     ;(this.props as any).onDragOver(e)
     return false
   }
+
   handleDragLeave = (e: any) => {
     e.preventDefault()
     this.enterCounter -= 1
@@ -311,6 +213,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     })
     ;(this.props as any).onDragLeave(e)
   }
+
   parseFiles(fileList: any) {
     const accepted: any = []
     const rejected: any = []
@@ -323,6 +226,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     })
     return [accepted, rejected]
   }
+
   handleChange = (e: any) => {
     const {
       onDrop,
@@ -350,22 +254,27 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       isFileBrowserDisplayed: false
     })
   }
+
   fileAccepted = (file: any) => {
     return accepts(file, (this.props as any).accept)
   }
+
   fileMatchSize(file: any) {
     return (
       file.size <= (this.props as any).maxSize &&
       file.size >= (this.props as any).minSize
     )
   }
+
   allFilesAccepted(files: any) {
     return files.every(this.fileAccepted)
   }
+
   acceptStr() {
     const { accept } = this.props
     return accept ? getAcceptList(accept).join(',') : null
   }
+
   renderLabel() {
     const { renderLabel } = this.props
     return callRenderProp(renderLabel, {
@@ -374,21 +283,25 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       interaction: this.interaction
     })
   }
+
   handleRef = (el: any) => {
     this.fileInputEl = el
   }
+
   handleBlur = () => {
     this.setState({
       isFocused: false,
       isFileBrowserDisplayed: false
     })
   }
+
   handleFocus = () => {
     this.setState({
       isFocused: true,
       isFileBrowserDisplayed: false
     })
   }
+
   handleClick = (e: any) => {
     // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
     if (this.fileInputEl.value && (this.props as any).shouldAllowRepeats) {
@@ -403,6 +316,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       isFileBrowserDisplayed: true
     })
   }
+
   handleKeyDown = (e: any) => {
     if (this.state.isFocused && keyEventIsClickButton(e)) {
       if ((this.props as any).shouldAllowRepeats) {
@@ -420,6 +334,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       }
     }
   }
+
   handleKeyUp = (e: any) => {
     // 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.
@@ -431,6 +346,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       })
     }
   }
+
   render() {
     const {
       display,
@@ -446,6 +362,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     const id = (this.props as any).id || this.defaultId
     const focusColor =
       this.state.isDragRejected || this.invalid ? 'danger' : undefined
+
     return (
       <View
         display={display}
@@ -509,5 +426,6 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     )
   }
 }
+
 export default FileDrop
 export { FileDrop }