@instructure/ui-motion 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-motion
+
+### 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/Transition/BaseTransition/index.js

@@ -41,146 +41,33 @@ private: true
   so that it works with css modules. The internals are pretty different now, but it has roughly the same api.
 **/
 class BaseTransition extends Component {
-  constructor(...args) {
-    super(...args);
-    this._timeouts = [];
-    this._unmounted = false;
-    this.state = {
-      transitioning: false
-    };
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.startTransition = (transitionIn, transitionOnStart) => {
-      const _this$props = this.props,
-        transitionEnter = _this$props.transitionEnter,
-        transitionExit = _this$props.transitionExit;
-      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.onTransition;
-      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.props;
-      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.props;
-      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();
-          }
-        });
-      }
-    };
-  }
+  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);
+    }
+  };
   componentDidMount() {
     this.startTransition(this.props.in, this.props.transitionOnMount);
     this._unmounted = false;
@@ -215,6 +102,47 @@ class BaseTransition extends Component {
     });
     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);
+    }
+    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));
+  };
   clearTransition(transitionClassName) {
     if (this._unmounted) return;
     this.setState({
@@ -231,8 +159,100 @@ class BaseTransition extends Component {
       classList.remove(transitionClassName);
     });
   }
+  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();
+        }
+      });
+    }
+  };
+  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();
+        }
+      });
+    }
+  };
   transitionEnabled(toState) {
-    const props = this.props;
+    const {
+      props
+    } = this;
     switch (toState) {
       case STATES.EXITED:
       case STATES.EXITING:
@@ -245,7 +265,9 @@ class BaseTransition extends Component {
     }
   }
   getTransitionClassName(transitionState) {
-    const props = this.props;
+    const {
+      props
+    } = this;
     switch (transitionState) {
       case STATES.EXITED:
         return props.exitedClassName;
@@ -256,12 +278,12 @@ class BaseTransition extends Component {
       case STATES.EXITING:
         return props.exitingClassName;
       default:
-        return void 0;
+        return undefined;
     }
   }
   renderChildren() {
     return this.props.children ? safeCloneElement(ensureSingleChild(this.props.children), {
-      'aria-hidden': !this.props.in ? true : void 0,
+      'aria-hidden': !this.props.in ? true : undefined,
       ref: el => {
         const ref = findDOMNode(el) || null;
         this.handleRef(ref);
@@ -276,17 +298,5 @@ class BaseTransition extends Component {
     }
   }
 }
-BaseTransition.displayName = "BaseTransition";
-BaseTransition.allowedProps = allowedProps;
-BaseTransition.defaultProps = {
-  in: false,
-  unmountOnExit: false,
-  transitionOnMount: false,
-  transitionEnter: true,
-  transitionExit: true,
-  enterDelay: 300,
-  exitDelay: 300
-};
-BaseTransition.states = STATES;
 export default BaseTransition;
 export { BaseTransition };

package/es/Transition/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["type", "children", "styles"];
-var _dec, _class, _Transition;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,53 +38,66 @@ category: components/utilities
 ---
 @module Transition
 **/
-let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Transition = class Transition extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.handleExited = () => {
-      if (typeof this.props.onExited === 'function') {
-        this.props.onExited(this.props.type);
-      }
-    };
-    this.handleEntered = () => {
-      if (typeof this.props.onEntered === 'function') {
-        this.props.onEntered(this.props.type);
-      }
-    };
-    // Transition helper:
-    // After emotion migration the only way to keep
-    // the old BaseTransition functionality with adding and removing
-    // classes was to add the `Global` helper of `emotion`
-    // Todo: try to refactor or replace Transition/BaseTransition component in v9.0.0. so that it is not class based
-    this.renderTransitionHelper = () => {
-      const styles = this.props.styles;
-      return _jsx(Global, {
-        styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
-      });
-    };
-  }
+let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Transition extends Component {
+  static displayName = "Transition";
+  static componentId = 'Transition';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'fade',
+    in: false,
+    unmountOnExit: false,
+    transitionOnMount: false,
+    transitionEnter: true,
+    transitionExit: true
+  };
+  static states = BaseTransition.states;
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
+  handleExited = () => {
+    if (typeof this.props.onExited === 'function') {
+      this.props.onExited(this.props.type);
+    }
+  };
+  handleEntered = () => {
+    if (typeof this.props.onEntered === 'function') {
+      this.props.onEntered(this.props.type);
+    }
+  };
+
+  // Transition helper:
+  // After emotion migration the only way to keep
+  // the old BaseTransition functionality with adding and removing
+  // classes was to add the `Global` helper of `emotion`
+  // Todo: try to refactor or replace Transition/BaseTransition component in v9.0.0. so that it is not class based
+  renderTransitionHelper = () => {
+    const {
+      styles
+    } = this.props;
+    return _jsx(Global, {
+      styles: styles?.globalStyles
+    });
+  };
   render() {
-    const _this$props3 = this.props,
-      type = _this$props3.type,
-      children = _this$props3.children,
-      styles = _this$props3.styles,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      type,
+      children,
+      styles,
+      ...props
+    } = this.props;
     const duration = ms(styles.duration);
     return _jsxs(_Fragment, {
       children: [this.renderTransitionHelper(), _jsx(BaseTransition, {
@@ -105,13 +116,6 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
       })]
     });
   }
-}, _Transition.displayName = "Transition", _Transition.componentId = 'Transition', _Transition.allowedProps = allowedProps, _Transition.defaultProps = {
-  type: 'fade',
-  in: false,
-  unmountOnExit: false,
-  transitionOnMount: false,
-  transitionEnter: true,
-  transitionExit: true
-}, _Transition.states = BaseTransition.states, _Transition)) || _class);
+}) || _class);
 export default Transition;
 export { Transition };

package/es/Transition/styles.js

@@ -37,7 +37,9 @@ const getClassNames = type => ({
  * @return The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const type = props.type;
+  const {
+    type
+  } = props;
 
   /**
    * After emotion migration the only way to keep

package/es/Transition/theme.js

@@ -28,10 +28,12 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  const transitions = theme.transitions;
+  const {
+    transitions
+  } = theme;
   const componentVariables = {
-    duration: transitions === null || transitions === void 0 ? void 0 : transitions.duration,
-    timing: transitions === null || transitions === void 0 ? void 0 : transitions.timing
+    duration: transitions?.duration,
+    timing: transitions?.timing
   };
   return {
     ...componentVariables