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

package/es/Transition/BaseTransition/index.js

@@ -1,322 +1,269 @@
-/*
- * 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 { Component } from 'react';
 import { getClassList, findDOMNode } from '@instructure/ui-dom-utils';
 import { ensureSingleChild, safeCloneElement } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { allowedProps } from './props.js';
 const STATES = {
-  EXITED: -2,
-  EXITING: -1,
-  ENTERING: 1,
-  ENTERED: 2
+    EXITED: -2,
+    EXITING: -1,
+    ENTERING: 1,
+    ENTERED: 2
 };
-
-/**
----
-private: true
----
-  Note: this is forked from https://github.com/react-bootstrap/react-overlays/blob/master/src/Transition.js
-  so that it works with css modules. The internals are pretty different now, but it has roughly the same api.
-**/
 class BaseTransition extends Component {
-  static displayName = 'BaseTransition';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    in: false,
-    unmountOnExit: false,
-    transitionOnMount: false,
-    transitionEnter: true,
-    transitionExit: true,
-    enterDelay: 300,
-    exitDelay: 300
-  };
-  static states = STATES;
-  _timeouts = [];
-  _unmounted = false;
-  state = {
-    transitioning: false
-  };
-  ref = null;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
+    static{
+        this.displayName = 'BaseTransition';
     }
-  };
-  componentDidMount() {
-    this.startTransition(this.props.in, this.props.transitionOnMount);
-    this._unmounted = false;
-  }
-  getSnapshotBeforeUpdate(prevProps, prevState) {
-    if (this.props.in !== prevProps.in && prevState.transitioning) {
-      // direction changed before previous transition finished
-      return true;
+    static{
+        this.allowedProps = allowedProps;
     }
-    return null;
-  }
-  componentDidUpdate(prevProps, _prevState, cancelPrematurely) {
-    if (cancelPrematurely) {
-      this.clearTransition(prevProps.transitionClassName);
-    }
-    if (this.props.transitionClassName !== prevProps.transitionClassName) {
-      this.clearTransition(prevProps.transitionClassName);
-    }
-    if (prevProps.in !== this.props.in) {
-      if (_prevState.transitioning) {
-        this.clearTransition(prevProps.transitionClassName);
-        clearTimeout(this._timeouts.pop());
-        this.setState({
-          transitioning: false
-        }, () => this.startTransition(this.props.in, true));
-      } else this.startTransition(this.props.in, true);
-    }
-  }
-  componentWillUnmount() {
-    this._timeouts.forEach(timeout => {
-      clearTimeout(timeout);
-    });
-    this._unmounted = true;
-  }
-  startTransition = (transitionIn, transitionOnStart) => {
-    const {
-      transitionEnter,
-      transitionExit
-    } = this.props;
-    if (transitionIn) {
-      this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null);
-    } else {
-      this.exit(transitionExit && transitionOnStart ? STATES.ENTERED : null);
-    }
-  };
-  transition = (toState, fromState, transitionCallback, transitionDuration = 0) => {
-    if (this._unmounted) return;
-    const {
-      onTransition
-    } = this.props;
-    const classList = getClassList(this.ref);
-    const transitionClassName = this.getTransitionClassName(toState);
-    const prevTransitionClassName = this.getTransitionClassName(fromState);
-    const baseTransitionClassName = this.props.transitionClassName;
-    if (fromState && transitionDuration && this.transitionEnabled(toState)) {
-      baseTransitionClassName && classList.add(baseTransitionClassName);
-    } else {
-      baseTransitionClassName && classList.remove(baseTransitionClassName);
-    }
-    if (prevTransitionClassName) {
-      classList.remove(prevTransitionClassName);
+    static{
+        this.defaultProps = {
+            in: false,
+            unmountOnExit: false,
+            transitionOnMount: false,
+            transitionEnter: true,
+            transitionExit: true,
+            enterDelay: 300,
+            exitDelay: 300
+        };
     }
-    if (transitionClassName) {
-      classList.add(transitionClassName);
+    static{
+        this.states = STATES;
     }
-    if (toState && fromState && typeof onTransition === 'function') {
-      onTransition(toState, fromState);
+    componentDidMount() {
+        this.startTransition(this.props.in, this.props.transitionOnMount);
+        this._unmounted = false;
     }
-    this._timeouts.push(setTimeout(() => {
-      if (this._unmounted) return;
-      if (typeof transitionCallback === 'function') {
-        transitionCallback();
-      }
-    }, transitionDuration));
-  };
-  clearTransition(transitionClassName) {
-    if (this._unmounted) return;
-    this.setState({
-      transitioning: false
-    }, () => {
-      if (this._unmounted) return;
-      const classList = getClassList(this.ref);
-      Object.values(STATES).forEach(state => {
-        const className = this.getTransitionClassName(state);
-        if (className) {
-          classList.remove(className);
+    getSnapshotBeforeUpdate(prevProps, prevState) {
+        if (this.props.in !== prevProps.in && prevState.transitioning) {
+            return true;
         }
-      });
-      classList.remove(transitionClassName);
-    });
-  }
-  enter = initialState => {
-    if (this.state.transitioning || this._unmounted) return;
-    const {
-      props
-    } = this;
-    if (typeof props.onEnter === 'function') {
-      props.onEnter();
+        return null;
     }
-    if (props.transitionEnter) {
-      this.setState({
-        transitioning: true
-      }, () => {
-        const enter = () => {
-          if (typeof props.onEntering === 'function') {
-            props.onEntering();
-          }
-          this.transition(STATES.ENTERED, STATES.ENTERING, () => {
-            this.setState({
-              transitioning: false
-            }, () => {
-              if (typeof props.onEntered === 'function') {
-                props.onEntered();
-              }
-            });
-          });
-        };
-        if (initialState) {
-          this.transition(initialState, null, () => {
-            this.transition(STATES.ENTERING, initialState, enter, props.enterDelay);
-          });
-        } else {
-          enter();
+    componentDidUpdate(prevProps, _prevState, cancelPrematurely) {
+        if (cancelPrematurely) {
+            this.clearTransition(prevProps.transitionClassName);
+        }
+        if (this.props.transitionClassName !== prevProps.transitionClassName) {
+            this.clearTransition(prevProps.transitionClassName);
         }
-      });
-    } else {
-      this.setState({
-        transitioning: false
-      }, () => {
-        this.transition(STATES.ENTERED, STATES.EXITED);
-        if (typeof props.onEntered === 'function') {
-          props.onEntered();
+        if (prevProps.in !== this.props.in) {
+            if (_prevState.transitioning) {
+                this.clearTransition(prevProps.transitionClassName);
+                clearTimeout(this._timeouts.pop());
+                this.setState({
+                    transitioning: false
+                }, ()=>this.startTransition(this.props.in, true));
+            } else this.startTransition(this.props.in, true);
         }
-      });
     }
-  };
-  exit = initialState => {
-    if (this.state.transitioning) return;
-    const {
-      props
-    } = this;
-    if (typeof props.onExit === 'function') {
-      props.onExit();
+    componentWillUnmount() {
+        this._timeouts.forEach((timeout)=>{
+            clearTimeout(timeout);
+        });
+        this._unmounted = true;
     }
-    if (props.transitionExit) {
-      this.setState({
-        transitioning: true
-      }, () => {
-        const exit = () => {
-          if (typeof props.onExiting === 'function') {
-            props.onExiting();
-          }
-          this.transition(STATES.EXITED, STATES.EXITING, () => {
-            this.setState({
-              transitioning: false
-            }, () => {
-              if (typeof props.onExited === 'function') {
-                props.onExited();
-              }
+    clearTransition(transitionClassName) {
+        if (this._unmounted) return;
+        this.setState({
+            transitioning: false
+        }, ()=>{
+            if (this._unmounted) return;
+            const classList = getClassList(this.ref);
+            Object.values(STATES).forEach((state)=>{
+                const className = this.getTransitionClassName(state);
+                if (className) {
+                    classList.remove(className);
+                }
             });
-          });
-        };
-        if (initialState) {
-          this.transition(initialState, null, () => {
-            this.transition(STATES.EXITING, initialState, exit, props.exitDelay);
-          });
-        } else {
-          exit();
-        }
-      });
-    } else {
-      this.setState({
-        transitioning: false
-      }, () => {
-        this.transition(STATES.EXITED, STATES.ENTERED);
-        if (typeof props.onExited === 'function') {
-          props.onExited();
-        }
-      });
+            classList.remove(transitionClassName);
+        });
     }
-  };
-  transitionEnabled(toState) {
-    const {
-      props
-    } = this;
-    switch (toState) {
-      case STATES.EXITED:
-      case STATES.EXITING:
-        return props.transitionExit;
-      case STATES.ENTERED:
-      case STATES.ENTERING:
-        return props.transitionEnter;
-      default:
-        return false;
+    transitionEnabled(toState) {
+        const { props } = this;
+        switch(toState){
+            case STATES.EXITED:
+            case STATES.EXITING:
+                return props.transitionExit;
+            case STATES.ENTERED:
+            case STATES.ENTERING:
+                return props.transitionEnter;
+            default:
+                return false;
+        }
     }
-  }
-  getTransitionClassName(transitionState) {
-    const {
-      props
-    } = this;
-    switch (transitionState) {
-      case STATES.EXITED:
-        return props.exitedClassName;
-      case STATES.ENTERING:
-        return props.enteringClassName;
-      case STATES.ENTERED:
-        return props.enteredClassName;
-      case STATES.EXITING:
-        return props.exitingClassName;
-      default:
-        return undefined;
+    getTransitionClassName(transitionState) {
+        const { props } = this;
+        switch(transitionState){
+            case STATES.EXITED:
+                return props.exitedClassName;
+            case STATES.ENTERING:
+                return props.enteringClassName;
+            case STATES.ENTERED:
+                return props.enteredClassName;
+            case STATES.EXITING:
+                return props.exitingClassName;
+            default:
+                return undefined;
+        }
     }
-  }
-  renderChildren() {
-    if (!this.props.children) {
-      return null;
+    renderChildren() {
+        if (!this.props.children) {
+            return null;
+        }
+        const child = ensureSingleChild(this.props.children);
+        const acceptsElementRef = child.type?.allowedProps?.includes('elementRef');
+        const refProps = acceptsElementRef ? {
+            elementRef: createChainedFunction(child.props?.elementRef, this.handleRef),
+            ref: (el)=>{
+                if (el instanceof Element) {
+                    this.handleRef(el);
+                }
+            }
+        } : {
+            ref: (el)=>this.handleRef(el instanceof Element ? el : findDOMNode(el) ?? null)
+        };
+        return safeCloneElement(child, {
+            'aria-hidden': !this.props.in ? true : undefined,
+            ...refProps
+        });
     }
-    const child = ensureSingleChild(this.props.children);
-
-    // Pass elementRef only to children that declare it. Emotion's wrapper
-    // around `<div css={...}>` accepts any prop and forwards it to the DOM
-    // node, so it must take the plain `ref` path.
-    const acceptsElementRef = child.type?.allowedProps?.includes('elementRef');
-    const refProps = acceptsElementRef ? {
-      // chain so the child's own elementRef still fires instead of being overwritten
-      elementRef: createChainedFunction(child.props?.elementRef, this.handleRef),
-      // fallback for forwardRef children that expose their node via `ref`, not elementRef
-      ref: el => {
-        if (el instanceof Element) {
-          this.handleRef(el);
+    render() {
+        if (!this.props.in && this.props.unmountOnExit && !this.state.transitioning) {
+            return null;
+        } else {
+            return this.renderChildren();
         }
-      }
-    } : {
-      // host el / plain class|fn: findDOMNode is the fallback
-      ref: el => this.handleRef(el instanceof Element ? el : findDOMNode(el) ?? null)
-    };
-    return safeCloneElement(child, {
-      'aria-hidden': !this.props.in ? true : undefined,
-      ...refProps
-    });
-  }
-  render() {
-    if (!this.props.in && this.props.unmountOnExit && !this.state.transitioning) {
-      return null;
-    } else {
-      return this.renderChildren();
     }
-  }
+    constructor(...args){
+        super(...args), this._timeouts = [], this._unmounted = false, this.state = {
+            transitioning: false
+        }, this.ref = null, this.handleRef = (el)=>{
+            const { elementRef } = this.props;
+            this.ref = el;
+            if (typeof elementRef === 'function') {
+                elementRef(el);
+            }
+        }, this.startTransition = (transitionIn, transitionOnStart)=>{
+            const { transitionEnter, transitionExit } = this.props;
+            if (transitionIn) {
+                this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null);
+            } else {
+                this.exit(transitionExit && transitionOnStart ? STATES.ENTERED : null);
+            }
+        }, this.transition = (toState, fromState, transitionCallback, transitionDuration = 0)=>{
+            if (this._unmounted) return;
+            const { onTransition } = this.props;
+            const classList = getClassList(this.ref);
+            const transitionClassName = this.getTransitionClassName(toState);
+            const prevTransitionClassName = this.getTransitionClassName(fromState);
+            const baseTransitionClassName = this.props.transitionClassName;
+            if (fromState && transitionDuration && this.transitionEnabled(toState)) {
+                baseTransitionClassName && classList.add(baseTransitionClassName);
+            } else {
+                baseTransitionClassName && classList.remove(baseTransitionClassName);
+            }
+            if (prevTransitionClassName) {
+                classList.remove(prevTransitionClassName);
+            }
+            if (transitionClassName) {
+                classList.add(transitionClassName);
+            }
+            if (toState && fromState && typeof onTransition === 'function') {
+                onTransition(toState, fromState);
+            }
+            this._timeouts.push(setTimeout(()=>{
+                if (this._unmounted) return;
+                if (typeof transitionCallback === 'function') {
+                    transitionCallback();
+                }
+            }, transitionDuration));
+        }, this.enter = (initialState)=>{
+            if (this.state.transitioning || this._unmounted) return;
+            const { props } = this;
+            if (typeof props.onEnter === 'function') {
+                props.onEnter();
+            }
+            if (props.transitionEnter) {
+                this.setState({
+                    transitioning: true
+                }, ()=>{
+                    const enter = ()=>{
+                        if (typeof props.onEntering === 'function') {
+                            props.onEntering();
+                        }
+                        this.transition(STATES.ENTERED, STATES.ENTERING, ()=>{
+                            this.setState({
+                                transitioning: false
+                            }, ()=>{
+                                if (typeof props.onEntered === 'function') {
+                                    props.onEntered();
+                                }
+                            });
+                        });
+                    };
+                    if (initialState) {
+                        this.transition(initialState, null, ()=>{
+                            this.transition(STATES.ENTERING, initialState, enter, props.enterDelay);
+                        });
+                    } else {
+                        enter();
+                    }
+                });
+            } else {
+                this.setState({
+                    transitioning: false
+                }, ()=>{
+                    this.transition(STATES.ENTERED, STATES.EXITED);
+                    if (typeof props.onEntered === 'function') {
+                        props.onEntered();
+                    }
+                });
+            }
+        }, this.exit = (initialState)=>{
+            if (this.state.transitioning) return;
+            const { props } = this;
+            if (typeof props.onExit === 'function') {
+                props.onExit();
+            }
+            if (props.transitionExit) {
+                this.setState({
+                    transitioning: true
+                }, ()=>{
+                    const exit = ()=>{
+                        if (typeof props.onExiting === 'function') {
+                            props.onExiting();
+                        }
+                        this.transition(STATES.EXITED, STATES.EXITING, ()=>{
+                            this.setState({
+                                transitioning: false
+                            }, ()=>{
+                                if (typeof props.onExited === 'function') {
+                                    props.onExited();
+                                }
+                            });
+                        });
+                    };
+                    if (initialState) {
+                        this.transition(initialState, null, ()=>{
+                            this.transition(STATES.EXITING, initialState, exit, props.exitDelay);
+                        });
+                    } else {
+                        exit();
+                    }
+                });
+            } else {
+                this.setState({
+                    transitioning: false
+                }, ()=>{
+                    this.transition(STATES.EXITED, STATES.ENTERED);
+                    if (typeof props.onExited === 'function') {
+                        props.onExited();
+                    }
+                });
+            }
+        };
+    }
 }
 export default BaseTransition;
-export { BaseTransition };
+export { BaseTransition };

package/es/Transition/BaseTransition/props.js

@@ -1,33 +1,25 @@
-/*
- * 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.
- */
-
-// These props get passed from Transition
-
-// This intersection is needed for calculating allowedProps
-
-// this is getting exported, might be extended later,
-// that's why it is separated from BaseTransitionOwnProps
-
-const allowedProps = ['in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'enterDelay', 'exitDelay', 'transitionClassName', 'exitedClassName', 'exitingClassName', 'enteredClassName', 'enteringClassName', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'children', 'className', 'elementRef'];
-export { allowedProps };
+const allowedProps = [
+    'in',
+    'unmountOnExit',
+    'transitionOnMount',
+    'transitionEnter',
+    'transitionExit',
+    'enterDelay',
+    'exitDelay',
+    'transitionClassName',
+    'exitedClassName',
+    'exitingClassName',
+    'enteredClassName',
+    'enteringClassName',
+    'onTransition',
+    'onEnter',
+    'onEntering',
+    'onEntered',
+    'onExit',
+    'onExiting',
+    'onExited',
+    'children',
+    'className',
+    'elementRef'
+];
+export { allowedProps };