@instructure/ui-tray 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-tray

package/es/Tray/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 } from "@emotion/react/jsx-runtime";
 import { Component, createRef } from 'react';
 import { Dialog } from '@instructure/ui-dialog';
 import { omitProps } from '@instructure/ui-react-utils';
@@ -36,186 +13,147 @@ import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
 import { Mask } from '@instructure/ui-overlays/v11_6';
-
-/**
----
-category: components
----
-**/
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let Tray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = class Tray extends Component {
-  static displayName = 'Tray';
-  static componentId = 'Tray';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    defaultFocusElement: null,
-    open: false,
-    insertAt: 'bottom',
-    shouldCloseOnDocumentClick: false,
-    shouldContainFocus: true,
-    shouldReturnFocus: true,
-    size: 'small',
-    placement: 'start',
-    transitionOnMount: true,
-    transitionEnter: true,
-    transitionExit: true,
-    shadow: true,
-    border: false,
-    enableMask: false
-  };
-  ref = null;
-  dialogRef = /*#__PURE__*/createRef();
-  state;
-  constructor(props) {
-    super(props);
-    this.state = {
-      transitioning: false,
-      open: props.open ?? false
-    };
-  }
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate(prevProps, _prevState) {
-    if (this.props.open !== prevProps.open) {
-      if (!this.props.open) {
-        // calling Dialog.close() to remove focusregion immediately when transition starts
-        // so if a new Tray is opened (during transition) the new focusregion won't get treated as a child of this one
-        this.dialogRef.current?.close();
-      }
-      this.setState({
-        transitioning: true,
-        open: this.props.open
-      });
+class Tray extends Component {
+    static{
+        this.displayName = 'Tray';
+    }
+    static{
+        this.componentId = 'Tray';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            defaultFocusElement: null,
+            open: false,
+            insertAt: 'bottom',
+            shouldCloseOnDocumentClick: false,
+            shouldContainFocus: true,
+            shouldReturnFocus: true,
+            size: 'small',
+            placement: 'start',
+            transitionOnMount: true,
+            transitionEnter: true,
+            transitionExit: true,
+            shadow: true,
+            border: false,
+            enableMask: false
+        };
+    }
+    constructor(props){
+        super(props), this.ref = null, this.dialogRef = /*#__PURE__*/ createRef(), this.handleTransitionComplete = (_type)=>{
+            this.setState({
+                transitioning: false
+            });
+        }, this.handlePortalOpen = (DOMNode)=>{
+            if (DOMNode) {
+                this.DOMNode = DOMNode;
+            }
+        };
+        this.state = {
+            transitioning: false,
+            open: props.open ?? false
+        };
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate(prevProps, _prevState) {
+        if (this.props.open !== prevProps.open) {
+            if (!this.props.open) {
+                this.dialogRef.current?.close();
+            }
+            this.setState({
+                transitioning: true,
+                open: this.props.open
+            });
+        }
+        this.props.makeStyles?.();
+    }
+    get placement() {
+        const { placement, dir } = this.props;
+        const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
+        return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
+    }
+    get direction() {
+        switch(this.placement){
+            case 'top':
+                return 'up';
+            case 'bottom':
+                return 'down';
+            case 'end':
+                return 'right';
+            default:
+                return 'left';
+        }
+    }
+    get transition() {
+        return `slide-${this.direction}`;
+    }
+    get DOMNode() {
+        return this.ref;
     }
-    this.props.makeStyles?.();
-  }
-  get placement() {
-    const {
-      placement,
-      dir
-    } = this.props;
-    const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
-    return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
-  }
-  get direction() {
-    switch (this.placement) {
-      case 'top':
-        return 'up';
-      case 'bottom':
-        return 'down';
-      case 'end':
-        return 'right';
-      default:
-        // start
-        return 'left';
+    set DOMNode(el) {
+        this.ref = el ? el : null;
     }
-  }
-  get transition() {
-    return `slide-${this.direction}`;
-  }
-  handleTransitionComplete = _type => {
-    this.setState({
-      transitioning: false
-    });
-  };
-  get DOMNode() {
-    // The DOMNode property is needed for Portal type components
-    return this.ref;
-  }
-  set DOMNode(el) {
-    this.ref = el ? el : null;
-  }
-  handlePortalOpen = DOMNode => {
-    if (DOMNode) {
-      this.DOMNode = DOMNode;
+    render() {
+        const { label, children, size, placement, open, defaultFocusElement, contentRef, shouldContainFocus, shouldReturnFocus, shouldCloseOnDocumentClick, onOpen, onClose, onDismiss, mountNode, insertAt, liveRegion, onEnter, onEntering, onEntered, onExit, onExiting, onExited, onTransition, transitionOnMount, transitionEnter, transitionExit, border, shadow, role, enableMask, ...props } = this.props;
+        const portalIsOpen = this.state.open || this.state.transitioning;
+        const content = /*#__PURE__*/ _jsx(Transition, {
+            in: open,
+            type: this.transition,
+            onTransition: onTransition,
+            onEnter: onEnter,
+            onEntering: onEntering,
+            onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
+            onExit: onExit,
+            onExiting: onExiting,
+            onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
+            transitionOnMount: transitionOnMount,
+            transitionEnter: transitionEnter,
+            transitionExit: transitionExit,
+            children: /*#__PURE__*/ _jsx("span", {
+                ...omitProps(props, Tray.allowedProps),
+                css: this.props.styles?.tray,
+                ref: contentRef,
+                children: /*#__PURE__*/ _jsx(Dialog, {
+                    ref: this.dialogRef,
+                    as: "div",
+                    label: label,
+                    defaultFocusElement: defaultFocusElement,
+                    open: true,
+                    shouldContainFocus: shouldContainFocus,
+                    shouldReturnFocus: shouldReturnFocus,
+                    shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+                    shouldCloseOnEscape: true,
+                    liveRegion: liveRegion,
+                    onDismiss: onDismiss,
+                    role: role,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        css: this.props.styles?.content,
+                        children: children
+                    })
+                })
+            })
+        });
+        return /*#__PURE__*/ _jsx(Portal, {
+            open: portalIsOpen,
+            onOpen: this.handlePortalOpen,
+            insertAt: insertAt,
+            mountNode: mountNode,
+            "data-cid": "Tray",
+            children: enableMask ? /*#__PURE__*/ _jsx(Mask, {
+                placement: 'center',
+                fullscreen: true,
+                children: content
+            }) : content
+        });
     }
-  };
-  render() {
-    const {
-      label,
-      children,
-      size,
-      placement,
-      open,
-      defaultFocusElement,
-      contentRef,
-      shouldContainFocus,
-      shouldReturnFocus,
-      shouldCloseOnDocumentClick,
-      onOpen,
-      onClose,
-      onDismiss,
-      mountNode,
-      insertAt,
-      liveRegion,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      onTransition,
-      transitionOnMount,
-      transitionEnter,
-      transitionExit,
-      border,
-      shadow,
-      role,
-      enableMask,
-      ...props
-    } = this.props;
-    const portalIsOpen = this.state.open || this.state.transitioning;
-    const content = _jsx(Transition, {
-      in: open,
-      type: this.transition,
-      onTransition: onTransition,
-      onEnter: onEnter,
-      onEntering: onEntering,
-      onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
-      onExit: onExit,
-      onExiting: onExiting,
-      onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
-      transitionOnMount: transitionOnMount,
-      transitionEnter: transitionEnter,
-      transitionExit: transitionExit,
-      children: _jsx("span", {
-        ...omitProps(props, Tray.allowedProps),
-        css: this.props.styles?.tray,
-        ref: contentRef,
-        children: _jsx(Dialog, {
-          ref: this.dialogRef,
-          as: "div",
-          label: label,
-          defaultFocusElement: defaultFocusElement,
-          open: true,
-          shouldContainFocus: shouldContainFocus,
-          shouldReturnFocus: shouldReturnFocus,
-          shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
-          shouldCloseOnEscape: true,
-          liveRegion: liveRegion,
-          onDismiss: onDismiss,
-          role: role,
-          children: _jsx("div", {
-            css: this.props.styles?.content,
-            children: children
-          })
-        })
-      })
-    });
-    return _jsx(Portal, {
-      open: portalIsOpen,
-      onOpen: this.handlePortalOpen,
-      insertAt: insertAt,
-      mountNode: mountNode,
-      "data-cid": "Tray",
-      children: enableMask ? _jsx(Mask, {
-        placement: 'center',
-        fullscreen: true,
-        children: content
-      }) : content
-    });
-  }
-}) || _class) || _class);
+}
+Tray = _ts_decorate([
+    withStyle(generateStyle, generateComponentTheme),
+    textDirectionContextConsumer()
+], Tray);
 export default Tray;
-export { Tray };
+export { Tray };

package/es/Tray/v1/props.js

@@ -1,26 +1,32 @@
-/*
- * 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 allowedProps = ['label', 'children', 'size', 'placement', 'open', 'defaultFocusElement', 'contentRef', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'onOpen', 'onClose', 'onDismiss', 'mountNode', 'insertAt', 'liveRegion', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'border', 'shadow', 'enableMask'];
-export { allowedProps };
+const allowedProps = [
+    'label',
+    'children',
+    'size',
+    'placement',
+    'open',
+    'defaultFocusElement',
+    'contentRef',
+    'shouldContainFocus',
+    'shouldReturnFocus',
+    'shouldCloseOnDocumentClick',
+    'onOpen',
+    'onClose',
+    'onDismiss',
+    'mountNode',
+    'insertAt',
+    'liveRegion',
+    'onTransition',
+    'onEnter',
+    'onEntering',
+    'onEntered',
+    'onExit',
+    'onExiting',
+    'onExited',
+    'transitionOnMount',
+    'transitionEnter',
+    'transitionExit',
+    'border',
+    'shadow',
+    'enableMask'
+];
+export { allowedProps };

package/es/Tray/v1/styles.js

@@ -1,132 +1,93 @@
-/*
- * 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.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props) => {
-  const {
-    border,
-    shadow,
-    size,
-    placement
-  } = props;
-  const borderStyle = {
-    borderWidth: 0,
-    borderColor: componentTheme.borderColor,
-    borderStyle: componentTheme.borderStyle
-  };
-  const shadowStyle = shadow ? {
-    boxShadow: componentTheme.boxShadow
-  } : {};
-  const contentStyle = placement === 'start' || placement === 'end' || placement === 'center' ? {
-    label: 'tray__content',
-    minHeight: '100vh'
-  } : {};
-  const placementStyles = {
-    top: {
-      insetInlineStart: 0,
-      insetInlineEnd: 0,
-      top: 0
-    },
-    bottom: {
-      insetInlineStart: 0,
-      insetInlineEnd: 0,
-      bottom: 0
-    },
-    start: {
-      top: 0,
-      bottom: 0,
-      insetInlineStart: 0,
-      insetInlineEnd: 'auto'
-    },
-    end: {
-      top: 0,
-      bottom: 0,
-      insetInlineEnd: 0,
-      insetInlineStart: 'auto'
-    },
-    center: {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    }
-  };
-  const borderPlacementStyle = border ? {
-    start: {
-      borderInlineEndWidth: componentTheme.borderWidth
-    },
-    end: {
-      borderInlineStartWidth: componentTheme.borderWidth
-    },
-    top: {
-      borderBottomWidth: componentTheme.borderWidth
-    },
-    bottom: {
-      borderTopWidth: componentTheme.borderWidth
-    },
-    center: {}
-  } : {};
-  const sizeVariants = {
-    'x-small': componentTheme.xSmallWidth,
-    small: componentTheme.smallWidth,
-    regular: componentTheme.regularWidth,
-    medium: componentTheme.mediumWidth,
-    large: componentTheme.largeWidth
-  };
-  const sizeStyle = placement === 'start' || placement === 'end' ? {
-    width: sizeVariants[size]
-  } : {};
-  return {
-    tray: {
-      label: 'tray',
-      backgroundColor: componentTheme.background,
-      position: componentTheme.position,
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      boxSizing: 'border-box',
-      zIndex: componentTheme.zIndex,
-      maxWidth: '100vw',
-      maxHeight: '100vh',
-      ...shadowStyle,
-      ...placementStyles[placement],
-      ...(border && borderStyle),
-      ...(border && borderPlacementStyle[placement]),
-      ...sizeStyle
-    },
-    content: {
-      label: 'tray__content',
-      ...contentStyle
-    }
-  };
+const generateStyle = (componentTheme, props)=>{
+    const { border, shadow, size, placement } = props;
+    const borderStyle = {
+        borderWidth: 0,
+        borderColor: componentTheme.borderColor,
+        borderStyle: componentTheme.borderStyle
+    };
+    const shadowStyle = shadow ? {
+        boxShadow: componentTheme.boxShadow
+    } : {};
+    const contentStyle = placement === 'start' || placement === 'end' || placement === 'center' ? {
+        label: 'tray__content',
+        minHeight: '100vh'
+    } : {};
+    const placementStyles = {
+        top: {
+            insetInlineStart: 0,
+            insetInlineEnd: 0,
+            top: 0
+        },
+        bottom: {
+            insetInlineStart: 0,
+            insetInlineEnd: 0,
+            bottom: 0
+        },
+        start: {
+            top: 0,
+            bottom: 0,
+            insetInlineStart: 0,
+            insetInlineEnd: 'auto'
+        },
+        end: {
+            top: 0,
+            bottom: 0,
+            insetInlineEnd: 0,
+            insetInlineStart: 'auto'
+        },
+        center: {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0
+        }
+    };
+    const borderPlacementStyle = border ? {
+        start: {
+            borderInlineEndWidth: componentTheme.borderWidth
+        },
+        end: {
+            borderInlineStartWidth: componentTheme.borderWidth
+        },
+        top: {
+            borderBottomWidth: componentTheme.borderWidth
+        },
+        bottom: {
+            borderTopWidth: componentTheme.borderWidth
+        },
+        center: {}
+    } : {};
+    const sizeVariants = {
+        'x-small': componentTheme.xSmallWidth,
+        small: componentTheme.smallWidth,
+        regular: componentTheme.regularWidth,
+        medium: componentTheme.mediumWidth,
+        large: componentTheme.largeWidth
+    };
+    const sizeStyle = placement === 'start' || placement === 'end' ? {
+        width: sizeVariants[size]
+    } : {};
+    return {
+        tray: {
+            label: 'tray',
+            backgroundColor: componentTheme.background,
+            position: componentTheme.position,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            boxSizing: 'border-box',
+            zIndex: componentTheme.zIndex,
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            ...shadowStyle,
+            ...placementStyles[placement],
+            ...border && borderStyle,
+            ...border && borderPlacementStyle[placement],
+            ...sizeStyle
+        },
+        content: {
+            label: 'tray__content',
+            ...contentStyle
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;