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

package/es/Spinner/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 { View } from '@instructure/ui-view/v11_6';
 import { callRenderProp, omitProps, withDeterministicId } from '@instructure/ui-react-utils';
@@ -31,111 +8,114 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-
-/**
----
-category: components
----
-**/
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-let Spinner = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Spinner extends Component {
-  static displayName = 'Spinner';
-  static componentId = 'Spinner';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    as: 'div',
-    size: 'medium',
-    variant: 'default'
-  };
-  ref = null;
-  titleId;
-  delayTimeout;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+class Spinner extends Component {
+    static{
+        this.displayName = 'Spinner';
+    }
+    static{
+        this.componentId = 'Spinner';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            as: 'div',
+            size: 'medium',
+            variant: 'default'
+        };
+    }
+    constructor(props){
+        super(props), this.ref = null, this.handleRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        };
+        this.titleId = props.deterministicId();
+        this.state = {
+            shouldRender: !props.delay
+        };
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+        const { delay } = this.props;
+        if (delay) {
+            this.delayTimeout = setTimeout(()=>{
+                this.setState({
+                    shouldRender: true
+                });
+            }, delay);
+        }
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    componentWillUnmount() {
+        clearTimeout(this.delayTimeout);
+    }
+    radius() {
+        switch(this.props.size){
+            case 'x-small':
+                return '0.5em';
+            case 'small':
+                return '1em';
+            case 'large':
+                return '2.25em';
+            default:
+                return '1.75em';
+        }
     }
-  };
-  constructor(props) {
-    super(props);
-    this.titleId = props.deterministicId();
-    this.state = {
-      shouldRender: !props.delay
-    };
-  }
-  componentDidMount() {
-    this.props.makeStyles?.();
-    const {
-      delay
-    } = this.props;
-    if (delay) {
-      this.delayTimeout = setTimeout(() => {
-        this.setState({
-          shouldRender: true
+    renderSpinner() {
+        const passthroughProps = View.omitViewProps(omitProps(this.props, Spinner.allowedProps), Spinner);
+        const hasTitle = this.props.renderTitle;
+        error(!!hasTitle, '[Spinner] The renderTitle prop is necessary for screen reader support.');
+        return /*#__PURE__*/ _jsx(View, {
+            ...passthroughProps,
+            as: this.props.as,
+            elementRef: this.handleRef,
+            css: this.props.styles?.spinner,
+            margin: this.props.margin,
+            "data-cid": "Spinner",
+            children: /*#__PURE__*/ _jsxs("svg", {
+                css: this.props.styles?.circle,
+                role: "img",
+                "aria-labelledby": this.titleId,
+                focusable: "false",
+                children: [
+                    /*#__PURE__*/ _jsx("title", {
+                        id: this.titleId,
+                        children: callRenderProp(this.props.renderTitle)
+                    }),
+                    /*#__PURE__*/ _jsxs("g", {
+                        role: "presentation",
+                        children: [
+                            this.props.variant !== 'inverse' && /*#__PURE__*/ _jsx("circle", {
+                                css: this.props.styles?.circleTrack,
+                                cx: "50%",
+                                cy: "50%",
+                                r: this.radius()
+                            }),
+                            /*#__PURE__*/ _jsx("circle", {
+                                css: this.props.styles?.circleSpin,
+                                cx: "50%",
+                                cy: "50%",
+                                r: this.radius()
+                            })
+                        ]
+                    })
+                ]
+            })
         });
-      }, delay);
     }
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  componentWillUnmount() {
-    clearTimeout(this.delayTimeout);
-  }
-  radius() {
-    switch (this.props.size) {
-      case 'x-small':
-        return '0.5em';
-      case 'small':
-        return '1em';
-      case 'large':
-        return '2.25em';
-      default:
-        return '1.75em';
+    render() {
+        return this.state.shouldRender ? this.renderSpinner() : null;
     }
-  }
-  renderSpinner() {
-    const passthroughProps = View.omitViewProps(omitProps(this.props, Spinner.allowedProps), Spinner);
-    const hasTitle = this.props.renderTitle;
-    error(!!hasTitle, '[Spinner] The renderTitle prop is necessary for screen reader support.');
-    return _jsx(View, {
-      ...passthroughProps,
-      as: this.props.as,
-      elementRef: this.handleRef,
-      css: this.props.styles?.spinner,
-      margin: this.props.margin,
-      "data-cid": "Spinner",
-      children: _jsxs("svg", {
-        css: this.props.styles?.circle,
-        role: "img",
-        "aria-labelledby": this.titleId,
-        focusable: "false",
-        children: [_jsx("title", {
-          id: this.titleId,
-          children: callRenderProp(this.props.renderTitle)
-        }), _jsxs("g", {
-          role: "presentation",
-          children: [this.props.variant !== 'inverse' && _jsx("circle", {
-            css: this.props.styles?.circleTrack,
-            cx: "50%",
-            cy: "50%",
-            r: this.radius()
-          }), _jsx("circle", {
-            css: this.props.styles?.circleSpin,
-            cx: "50%",
-            cy: "50%",
-            r: this.radius()
-          })]
-        })]
-      })
-    });
-  }
-  render() {
-    return this.state.shouldRender ? this.renderSpinner() : null;
-  }
-}) || _class) || _class);
+}
+Spinner = _ts_decorate([
+    withDeterministicId(),
+    withStyle(generateStyle, generateComponentTheme)
+], Spinner);
 export default Spinner;
-export { Spinner };
+export { Spinner };

package/es/Spinner/v1/props.js

@@ -1,26 +1,10 @@
-/*
- * 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 = ['delay', 'renderTitle', 'size', 'variant', 'margin', 'elementRef', 'as'];
-export { allowedProps };
+const allowedProps = [
+    'delay',
+    'renderTitle',
+    'size',
+    'variant',
+    'margin',
+    'elementRef',
+    'as'
+];
+export { allowedProps };

package/es/Spinner/v1/styles.js

@@ -1,30 +1,4 @@
-/*
- * 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 { keyframes } from '@instructure/emotion';
-// keyframes have to be outside of 'generateStyle',
-// since it is causing problems in style recalculation
 const rotate = keyframes`
     to {
       transform: rotate(360deg)
@@ -43,141 +17,127 @@ const morph = keyframes`
       stroke-dashoffset: 190%;
       transform: rotate(360deg);
     }`;
-
-/**
- * ---
- * 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 {
-    size,
-    variant
-  } = props;
-  const spinnerSizes = {
-    'x-small': {
-      width: componentTheme.xSmallSize,
-      height: componentTheme.xSmallSize
-    },
-    small: {
-      width: componentTheme.smallSize,
-      height: componentTheme.smallSize
-    },
-    medium: {
-      width: componentTheme.mediumSize,
-      height: componentTheme.mediumSize
-    },
-    large: {
-      width: componentTheme.largeSize,
-      height: componentTheme.largeSize
-    }
-  };
-  const circleSizes = {
-    'x-small': {
-      width: componentTheme.xSmallSize,
-      height: componentTheme.xSmallSize
-    },
-    small: {
-      width: componentTheme.smallSize,
-      height: componentTheme.smallSize
-    },
-    medium: {
-      width: componentTheme.mediumSize,
-      height: componentTheme.mediumSize
-    },
-    large: {
-      width: componentTheme.largeSize,
-      height: componentTheme.largeSize
-    }
-  };
-  const circleTrackSizes = {
-    'x-small': {
-      strokeWidth: componentTheme.xSmallBorderWidth
-    },
-    small: {
-      strokeWidth: componentTheme.smallBorderWidth
-    },
-    medium: {
-      strokeWidth: componentTheme.mediumBorderWidth
-    },
-    large: {
-      strokeWidth: componentTheme.largeBorderWidth
-    }
-  };
-  const circleSpinSizes = {
-    'x-small': {
-      strokeWidth: componentTheme.xSmallBorderWidth,
-      strokeDasharray: '3em',
-      transformOrigin: `calc(${componentTheme.xSmallSize} / 2) calc(${componentTheme.xSmallSize} / 2)`
-    },
-    small: {
-      strokeWidth: componentTheme.smallBorderWidth,
-      strokeDasharray: '6em',
-      transformOrigin: `calc(${componentTheme.smallSize} / 2) calc(${componentTheme.smallSize} / 2)`
-    },
-    medium: {
-      strokeWidth: componentTheme.mediumBorderWidth,
-      strokeDasharray: '10.5em',
-      transformOrigin: `calc(${componentTheme.mediumSize} / 2) calc(${componentTheme.mediumSize} / 2)`
-    },
-    large: {
-      strokeWidth: componentTheme.largeBorderWidth,
-      strokeDasharray: '14em',
-      transformOrigin: `calc(${componentTheme.largeSize} / 2) calc(${componentTheme.largeSize} / 2)`
-    }
-  };
-  const circleSpinVariant = {
-    default: {
-      stroke: componentTheme.color
-    },
-    inverse: {
-      stroke: componentTheme.inverseColor
-    }
-  };
-  return {
-    spinner: {
-      label: 'spinner',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      position: 'relative',
-      boxSizing: 'border-box',
-      overflow: 'hidden',
-      ...spinnerSizes[size]
-    },
-    circle: {
-      label: 'spinner__circle',
-      display: 'block',
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      animationName: rotate,
-      animationDuration: '2.25s',
-      animationIterationCount: 'infinite',
-      animationTimingFunction: 'linear',
-      ...circleSizes[size]
-    },
-    circleTrack: {
-      label: 'spinner__circleTrack',
-      stroke: componentTheme.trackColor,
-      fill: 'none',
-      ...circleTrackSizes[size]
-    },
-    circleSpin: {
-      label: 'spinner__circleSpin',
-      fill: 'none',
-      strokeLinecap: 'round',
-      animationName: morph,
-      animationDuration: '1.75s',
-      animationIterationCount: 'infinite',
-      animationTimingFunction: 'ease',
-      ...circleSpinSizes[size],
-      ...circleSpinVariant[variant]
-    }
-  };
+const generateStyle = (componentTheme, props)=>{
+    const { size, variant } = props;
+    const spinnerSizes = {
+        'x-small': {
+            width: componentTheme.xSmallSize,
+            height: componentTheme.xSmallSize
+        },
+        small: {
+            width: componentTheme.smallSize,
+            height: componentTheme.smallSize
+        },
+        medium: {
+            width: componentTheme.mediumSize,
+            height: componentTheme.mediumSize
+        },
+        large: {
+            width: componentTheme.largeSize,
+            height: componentTheme.largeSize
+        }
+    };
+    const circleSizes = {
+        'x-small': {
+            width: componentTheme.xSmallSize,
+            height: componentTheme.xSmallSize
+        },
+        small: {
+            width: componentTheme.smallSize,
+            height: componentTheme.smallSize
+        },
+        medium: {
+            width: componentTheme.mediumSize,
+            height: componentTheme.mediumSize
+        },
+        large: {
+            width: componentTheme.largeSize,
+            height: componentTheme.largeSize
+        }
+    };
+    const circleTrackSizes = {
+        'x-small': {
+            strokeWidth: componentTheme.xSmallBorderWidth
+        },
+        small: {
+            strokeWidth: componentTheme.smallBorderWidth
+        },
+        medium: {
+            strokeWidth: componentTheme.mediumBorderWidth
+        },
+        large: {
+            strokeWidth: componentTheme.largeBorderWidth
+        }
+    };
+    const circleSpinSizes = {
+        'x-small': {
+            strokeWidth: componentTheme.xSmallBorderWidth,
+            strokeDasharray: '3em',
+            transformOrigin: `calc(${componentTheme.xSmallSize} / 2) calc(${componentTheme.xSmallSize} / 2)`
+        },
+        small: {
+            strokeWidth: componentTheme.smallBorderWidth,
+            strokeDasharray: '6em',
+            transformOrigin: `calc(${componentTheme.smallSize} / 2) calc(${componentTheme.smallSize} / 2)`
+        },
+        medium: {
+            strokeWidth: componentTheme.mediumBorderWidth,
+            strokeDasharray: '10.5em',
+            transformOrigin: `calc(${componentTheme.mediumSize} / 2) calc(${componentTheme.mediumSize} / 2)`
+        },
+        large: {
+            strokeWidth: componentTheme.largeBorderWidth,
+            strokeDasharray: '14em',
+            transformOrigin: `calc(${componentTheme.largeSize} / 2) calc(${componentTheme.largeSize} / 2)`
+        }
+    };
+    const circleSpinVariant = {
+        default: {
+            stroke: componentTheme.color
+        },
+        inverse: {
+            stroke: componentTheme.inverseColor
+        }
+    };
+    return {
+        spinner: {
+            label: 'spinner',
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            position: 'relative',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            ...spinnerSizes[size]
+        },
+        circle: {
+            label: 'spinner__circle',
+            display: 'block',
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            animationName: rotate,
+            animationDuration: '2.25s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'linear',
+            ...circleSizes[size]
+        },
+        circleTrack: {
+            label: 'spinner__circleTrack',
+            stroke: componentTheme.trackColor,
+            fill: 'none',
+            ...circleTrackSizes[size]
+        },
+        circleSpin: {
+            label: 'spinner__circleSpin',
+            fill: 'none',
+            strokeLinecap: 'round',
+            animationName: morph,
+            animationDuration: '1.75s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'ease',
+            ...circleSpinSizes[size],
+            ...circleSpinVariant[variant]
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;