@instructure/ui-file-drop 11.7.3-snapshot-25 → 11.7.3-snapshot-27

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
+## [11.7.3-snapshot-27](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-27) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-file-drop
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/FileDrop/v1/index.js

@@ -1,7 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-const _excluded = ["display", "height", "width", "minWidth", "maxWidth", "margin", "onDropAccepted", "onDropRejected", "styles"];
-var _dec, _dec2, _class, _FileDrop;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -47,171 +44,57 @@ function keyEventIsClickButton(e) {
 category: components
 ---
 **/
-let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_FileDrop = class FileDrop extends Component {
+let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class FileDrop extends Component {
+  static displayName = "FileDrop";
+  static componentId = 'FileDrop';
+  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'
+  };
   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 = void 0;
-    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;
-      // When dropping a file the browser does not populate the input's
-      // 'files' property, so we need to do it manually. This will also populate
-      // the input's 'value' prop, which contains the first file's path
-      if (accepted.length > 0 && 'dataTransfer' in e) {
-        this.fileInputEl.files = e.dataTransfer.files;
-      }
-      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;
-      if (typeof this.props.inputRef === 'function') {
-        this.props.inputRef(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$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());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   componentDidUpdate() {
-    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());
+    this.props.makeStyles?.(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;
+  defaultId = null;
+  messagesId = '';
+  ref = null;
+  handleElementRef = el => {
+    this.ref = el;
+  };
   get functionallyDisabled() {
     return this.interaction === 'disabled' || this.interaction === 'readonly';
   }
@@ -247,6 +130,46 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
     return list;
   }
+  handleDragEnter = e => {
+    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.onDragEnter?.(e);
+  };
+  handleDragOver = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const event = e;
+      event.dataTransfer.dropEffect = 'copy';
+    } catch (err) {
+      // continue regardless of error
+    }
+    this.props.onDragOver?.(e);
+    return false;
+  };
+  handleDragLeave = e => {
+    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.onDragLeave?.(e);
+  };
   parseFiles(fileList) {
     const accepted = [];
     const rejected = [];
@@ -260,6 +183,39 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     });
     return [accepted, rejected];
   }
+  handleChange = e => {
+    const {
+      onDrop,
+      onDropAccepted,
+      onDropRejected,
+      shouldEnablePreview
+    } = this.props;
+    const fileList = this.getDataTransferItems(e, shouldEnablePreview);
+    const [accepted, rejected] = this.parseFiles(fileList);
+    e.preventDefault();
+    this.enterCounter = 0;
+    // When dropping a file the browser does not populate the input's
+    // 'files' property, so we need to do it manually. This will also populate
+    // the input's 'value' prop, which contains the first file's path
+    if (accepted.length > 0 && 'dataTransfer' in e) {
+      this.fileInputEl.files = e.dataTransfer.files;
+    }
+    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;
   }
@@ -267,32 +223,83 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return files.every(this.fileAccepted);
   }
   acceptStr() {
-    const accept = this.props.accept;
-    return accept ? getAcceptList(accept).join(',') : void 0;
+    const {
+      accept
+    } = this.props;
+    return accept ? getAcceptList(accept).join(',') : undefined;
   }
   renderLabel() {
-    const renderLabel = this.props.renderLabel;
+    const {
+      renderLabel
+    } = this.props;
     return callRenderProp(renderLabel, {
       isDragAccepted: this.state.isDragAccepted,
       isDragRejected: this.state.isDragRejected,
       interaction: this.interaction
     });
   }
+  handleRef = el => {
+    this.fileInputEl = el;
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el);
+    }
+  };
+  handleBlur = () => {
+    this.setState({
+      isFocused: false,
+      isFileBrowserDisplayed: false
+    });
+  };
+  handleFocus = () => {
+    this.setState({
+      isFocused: true,
+      isFileBrowserDisplayed: false
+    });
+  };
+  handleClick = e => {
+    if (this.fileInputEl.value && this.props.shouldAllowRepeats) {
+      this.fileInputEl.value = null;
+    }
+    // focus the input (because FF won't)
+    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, _styles$fileDropLayou, _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,
-      styles = _this$props7.styles,
-      props = _objectWithoutProperties(_this$props7, _excluded);
+    const {
+      display,
+      height,
+      width,
+      minWidth,
+      maxWidth,
+      margin,
+      onDropAccepted,
+      onDropRejected,
+      styles,
+      ...props
+    } = this.props;
     const id = this.props.id || this.defaultId;
-    const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : void 0;
+    const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : undefined;
     return _jsxs(View, {
       display: display,
       position: "relative" // contain visually hidden file input element
@@ -305,23 +312,23 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       elementRef: this.handleElementRef,
       "data-cid": "FileDrop",
       children: [_jsx("label", {
-        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.fileDropLabel,
+        css: this.props.styles?.fileDropLabel,
         htmlFor: id,
         onDragEnter: this.handleDragEnter,
         onDragOver: this.handleDragOver,
         onDragLeave: this.handleDragLeave,
         onDrop: this.handleChange,
         children: _jsx(View, {
-          borderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$fileDropLayou = styles.fileDropLayout) === null || _styles$fileDropLayou === void 0 ? void 0 : _styles$fileDropLayou.borderRadius),
+          borderRadius: String(styles?.fileDropLayout?.borderRadius),
           display: "block",
           position: "relative",
           withFocusOutline: this.state.isFocused,
           focusColor: focusColor,
           height: height,
           children: _jsx("span", {
-            css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent,
+            css: this.props.styles?.fileDropLabelContent,
             children: _jsx("span", {
-              css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout,
+              css: this.props.styles?.fileDropLayout,
               children: _jsx(View, {
                 height: height,
                 children: this.renderLabel()
@@ -333,7 +340,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         ...passthroughProps(props),
         onClick: this.handleClick,
         type: "file",
-        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
+        css: this.props.styles?.fileDropInput,
         id: id,
         ref: this.handleRef,
         onFocus: this.handleFocus,
@@ -343,7 +350,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 : void 0,
+        "aria-describedby": this.hasMessages ? this.messagesId : undefined,
         "aria-invalid": this.invalid,
         disabled: this.functionallyDisabled
       }), this.hasMessages ? _jsx(View, {
@@ -356,16 +363,6 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       }) : null]
     });
   }
-}, _FileDrop.displayName = "FileDrop", _FileDrop.componentId = 'FileDrop', _FileDrop.allowedProps = allowedProps, _FileDrop.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'
-}, _FileDrop)) || _class) || _class);
+}) || _class) || _class);
 export default FileDrop;
 export { FileDrop };

package/es/FileDrop/v1/styles.js

@@ -33,11 +33,15 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const height = props.height;
-  const functionallyDisabled = state.functionallyDisabled,
-    visuallyDisabled = state.visuallyDisabled,
-    dragRejected = state.dragRejected,
-    dragAccepted = state.dragAccepted;
+  const {
+    height
+  } = props;
+  const {
+    functionallyDisabled,
+    visuallyDisabled,
+    dragRejected,
+    dragAccepted
+  } = state;
   const dragAcceptedStyle = dragAccepted ? {
     borderColor: componentTheme.acceptedColor
   } : {};

package/es/FileDrop/v1/theme.js

@@ -28,10 +28,11 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
-  const colors = theme.colors,
-    borders = theme.borders,
-    themeName = theme.key;
+  const {
+    colors,
+    borders,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       hoverBorderColor: theme['ic-brand-primary'],
@@ -39,14 +40,14 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusLarge,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    backgroundColor: colors?.contrasts?.white1010,
+    borderRadius: borders?.radiusLarge,
+    borderWidth: borders?.widthMedium,
     borderStyle: 'dashed',
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1424,
-    hoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
-    acceptedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
-    rejectedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.red4570
+    borderColor: colors?.contrasts?.grey1424,
+    hoverBorderColor: colors?.contrasts?.blue4570,
+    acceptedColor: colors?.contrasts?.blue4570,
+    rejectedColor: colors?.contrasts?.red4570
   };
   return {
     ...componentVariables,