@instructure/ui-file-drop 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-pr-snapshot-1792147648392](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-pr-snapshot-1792147648392) (2026-10-16)
+
+### Build System
+
+* **many:** replace babel with swc ([7e36c54](https://github.com/instructure/instructure-ui/commit/7e36c54d240b4fa483801c03ab18e7f860f561e2))
+
+### BREAKING CHANGES
+
+* **many:** `@instructure/ui-babel-preset` and
+  `@instructure/browserslist-config-instui` are removed and will no longer be
+  published. Packages depend on `@swc/helpers` instead of `@babel/runtime`.
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 **Note:** Version bump only for package @instructure/ui-file-drop

package/es/FileDrop/v1/index.js

@@ -1,28 +1,5 @@
-var _dec, _dec2, _class;
-/*
- * 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.
- */
-
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Component } from 'react';
 import keycode from 'keycode';
 import { FormFieldMessages } from '@instructure/ui-form-field/v11_6';
@@ -34,346 +11,307 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 function keyEventIsClickButton(e) {
-  return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter;
+    return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter;
 }
-
-/**
----
-category: components
----
-**/
-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.defaultId = props.deterministicId();
-    this.messagesId = props.deterministicId('FileDrop-messages');
-  }
-  componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.(this.makeStyleProps());
-  }
-  componentWillUnmount() {
-    // Release any preview blob URLs we minted; otherwise the browser pins
-    // each File in memory until the document goes away.
-    this._objectUrls.forEach(url => window.URL.revokeObjectURL(url));
-    this._objectUrls = [];
-  }
-  _objectUrls = [];
-  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';
-  }
-  get interaction() {
-    return getInteraction({
-      props: this.props
-    });
-  }
-  get hasMessages() {
-    return this.props.messages ? this.props.messages.length > 0 : false;
-  }
-  get invalid() {
-    if (this.hasMessages) {
-      return this.props.messages.findIndex(message => {
-        return message.type === 'error' || message.type === 'newError';
-      }) >= 0;
+class FileDrop extends Component {
+    static{
+        this.displayName = 'FileDrop';
     }
-    return false;
-  }
-  getDataTransferItems(e, shouldEnablePreview) {
-    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]];
+    static{
+        this.componentId = 'FileDrop';
     }
-    if (shouldEnablePreview) {
-      return list.map(file => {
-        const preview = window.URL.createObjectURL(file);
-        this._objectUrls.push(preview);
-        return Object.assign(file, {
-          preview
-        });
-      });
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            onClick: function(_e) {},
+            shouldEnablePreview: false,
+            shouldAllowMultiple: false,
+            shouldAllowRepeats: true,
+            maxSize: Infinity,
+            minSize: 0,
+            messages: [],
+            display: 'block'
+        };
+    }
+    constructor(props){
+        super(props), this._objectUrls = [], 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.defaultId = null, this.messagesId = '', this.ref = null, this.handleElementRef = (el)=>{
+            this.ref = el;
+        }, this.handleDragEnter = (e)=>{
+            e.preventDefault();
+            this.enterCounter += 1;
+            if (this.enterCounter > 1) {
+                return;
+            }
+            const allFilesAccepted = this.allFilesAccepted(this.getDataTransferItems(e));
+            this.setState({
+                isDragAccepted: allFilesAccepted,
+                isDragRejected: !allFilesAccepted
+            });
+            this.props.onDragEnter?.(e);
+        }, this.handleDragOver = (e)=>{
+            e.preventDefault();
+            e.stopPropagation();
+            try {
+                const event = e;
+                event.dataTransfer.dropEffect = 'copy';
+            } catch (err) {}
+            this.props.onDragOver?.(e);
+            return false;
+        }, this.handleDragLeave = (e)=>{
+            e.preventDefault();
+            this.enterCounter -= 1;
+            if (this.enterCounter > 0) {
+                return;
+            }
+            this.setState({
+                isDragAccepted: false,
+                isDragRejected: false
+            });
+            this.props.onDragLeave?.(e);
+        }, this.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;
+            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)=>{
+            if (this.fileInputEl.value && this.props.shouldAllowRepeats) {
+                this.fileInputEl.value = null;
+            }
+            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)=>{
+            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() {
+        this.props.makeStyles?.(this.makeStyleProps());
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.(this.makeStyleProps());
+    }
+    componentWillUnmount() {
+        this._objectUrls.forEach((url)=>window.URL.revokeObjectURL(url));
+        this._objectUrls = [];
     }
-    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;
+    convertToFile(fileLikeItem) {
+        if (fileLikeItem instanceof DataTransferItem) return fileLikeItem.getAsFile();
+        else return fileLikeItem;
     }
-    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
+    get functionallyDisabled() {
+        return this.interaction === 'disabled' || this.interaction === 'readonly';
     }
-    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;
+    get interaction() {
+        return getInteraction({
+            props: this.props
+        });
+    }
+    get hasMessages() {
+        return this.props.messages ? this.props.messages.length > 0 : false;
     }
-    this.setState({
-      isDragAccepted: false,
-      isDragRejected: false
-    });
-    this.props.onDragLeave?.(e);
-  };
-  parseFiles(fileList) {
-    const accepted = [];
-    const rejected = [];
-    fileList.forEach(file => {
-      const fileObj = this.convertToFile(file);
-      if (fileObj && this.fileAccepted(fileObj) && this.fileMatchSize(fileObj)) {
-        accepted.push(file);
-      } else {
-        rejected.push(file);
-      }
-    });
-    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;
+    get invalid() {
+        if (this.hasMessages) {
+            return this.props.messages.findIndex((message)=>{
+                return message.type === 'error' || message.type === 'newError';
+            }) >= 0;
+        }
+        return false;
+    }
+    getDataTransferItems(e, shouldEnablePreview) {
+        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]
+            ];
+        }
+        if (shouldEnablePreview) {
+            return list.map((file)=>{
+                const preview = window.URL.createObjectURL(file);
+                this._objectUrls.push(preview);
+                return Object.assign(file, {
+                    preview
+                });
+            });
+        }
+        return list;
     }
-    onDrop && onDrop(accepted, rejected, e);
-    if (rejected.length > 0 && onDropRejected) {
-      onDropRejected(rejected, e);
+    parseFiles(fileList) {
+        const accepted = [];
+        const rejected = [];
+        fileList.forEach((file)=>{
+            const fileObj = this.convertToFile(file);
+            if (fileObj && this.fileAccepted(fileObj) && this.fileMatchSize(fileObj)) {
+                accepted.push(file);
+            } else {
+                rejected.push(file);
+            }
+        });
+        return [
+            accepted,
+            rejected
+        ];
     }
-    if (accepted.length > 0 && onDropAccepted) {
-      onDropAccepted(accepted, e);
+    fileMatchSize(file) {
+        return file.size <= this.props.maxSize && file.size >= this.props.minSize;
     }
-    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;
-  }
-  allFilesAccepted(files) {
-    return files.every(this.fileAccepted);
-  }
-  acceptStr() {
-    const {
-      accept
-    } = this.props;
-    return accept ? getAcceptList(accept).join(',') : undefined;
-  }
-  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);
+    allFilesAccepted(files) {
+        return files.every(this.fileAccepted);
     }
-  };
-  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;
+    acceptStr() {
+        const { accept } = this.props;
+        return accept ? getAcceptList(accept).join(',') : undefined;
     }
-    // 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;
-      }
+    renderLabel() {
+        const { renderLabel } = this.props;
+        return callRenderProp(renderLabel, {
+            isDragAccepted: this.state.isDragAccepted,
+            isDragRejected: this.state.isDragRejected,
+            interaction: this.interaction
+        });
     }
-  };
-  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() {
+        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' : undefined;
+        return /*#__PURE__*/ _jsxs(View, {
+            display: display,
+            position: "relative",
+            width: width,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
+            margin: margin,
+            height: height,
+            elementRef: this.handleElementRef,
+            "data-cid": "FileDrop",
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    css: this.props.styles?.fileDropLabel,
+                    htmlFor: id,
+                    onDragEnter: this.handleDragEnter,
+                    onDragOver: this.handleDragOver,
+                    onDragLeave: this.handleDragLeave,
+                    onDrop: this.handleChange,
+                    children: /*#__PURE__*/ _jsx(View, {
+                        borderRadius: String(styles?.fileDropLayout?.borderRadius),
+                        display: "block",
+                        position: "relative",
+                        withFocusOutline: this.state.isFocused,
+                        focusColor: focusColor,
+                        height: height,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            css: this.props.styles?.fileDropLabelContent,
+                            children: /*#__PURE__*/ _jsx("span", {
+                                css: this.props.styles?.fileDropLayout,
+                                children: /*#__PURE__*/ _jsx(View, {
+                                    height: height,
+                                    children: this.renderLabel()
+                                })
+                            })
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    ...passthroughProps(props),
+                    onClick: this.handleClick,
+                    type: "file",
+                    css: this.props.styles?.fileDropInput,
+                    id: id,
+                    ref: this.handleRef,
+                    onFocus: this.handleFocus,
+                    onBlur: this.handleBlur,
+                    onKeyDown: this.handleKeyDown,
+                    onKeyUp: this.handleKeyUp,
+                    multiple: this.props.shouldAllowMultiple,
+                    accept: this.acceptStr(),
+                    onChange: this.handleChange,
+                    "aria-describedby": this.hasMessages ? this.messagesId : undefined,
+                    "aria-invalid": this.invalid,
+                    disabled: this.functionallyDisabled
+                }),
+                this.hasMessages ? /*#__PURE__*/ _jsx(View, {
+                    display: "block",
+                    margin: "small 0 0",
+                    children: /*#__PURE__*/ _jsx(FormFieldMessages, {
+                        id: this.messagesId,
+                        messages: this.props.messages
+                    })
+                }) : null
+            ]
+        });
     }
-  };
-  render() {
-    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' : undefined;
-    return _jsxs(View, {
-      display: display,
-      position: "relative" // contain visually hidden file input element
-      ,
-      width: width,
-      minWidth: minWidth,
-      maxWidth: maxWidth,
-      margin: margin,
-      height: height,
-      elementRef: this.handleElementRef,
-      "data-cid": "FileDrop",
-      children: [_jsx("label", {
-        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?.fileDropLayout?.borderRadius),
-          display: "block",
-          position: "relative",
-          withFocusOutline: this.state.isFocused,
-          focusColor: focusColor,
-          height: height,
-          children: _jsx("span", {
-            css: this.props.styles?.fileDropLabelContent,
-            children: _jsx("span", {
-              css: this.props.styles?.fileDropLayout,
-              children: _jsx(View, {
-                height: height,
-                children: this.renderLabel()
-              })
-            })
-          })
-        })
-      }), _jsx("input", {
-        ...passthroughProps(props),
-        onClick: this.handleClick,
-        type: "file",
-        css: this.props.styles?.fileDropInput,
-        id: id,
-        ref: this.handleRef,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: this.handleKeyUp,
-        multiple: this.props.shouldAllowMultiple,
-        accept: this.acceptStr(),
-        onChange: this.handleChange,
-        "aria-describedby": this.hasMessages ? this.messagesId : undefined,
-        "aria-invalid": this.invalid,
-        disabled: this.functionallyDisabled
-      }), this.hasMessages ? _jsx(View, {
-        display: "block",
-        margin: "small 0 0",
-        children: _jsx(FormFieldMessages, {
-          id: this.messagesId,
-          messages: this.props.messages
-        })
-      }) : null]
-    });
-  }
-}) || _class) || _class);
+}
+FileDrop = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyle, generateComponentTheme)
+], FileDrop);
 export default FileDrop;
-export { FileDrop };
+export { FileDrop };