@instructure/ui-motion 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-motion
 

package/es/Transition/BaseTransition/index.js

@@ -40,84 +40,40 @@ private: true
 **/
 
 class BaseTransition extends React.Component {
-  static displayName = "BaseTransition";
-  static propTypes = propTypes;
-  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.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
-  componentDidMount() {
-    this.startTransition(this.props.in, this.props.transitionOnMount);
-  }
-
-  getSnapshotBeforeUpdate(prevProps, prevState) {
-    if (this.props.in !== prevProps.in && prevState.transitioning) {
-      // direction changed before previous transition finished
-      return true;
-    }
-
-    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) {
-      this.startTransition(this.props.in, true);
-    }
-  }
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+    this._timeouts = [];
+    this._unmounted = false;
+    this.state = {
+      transitioning: false
+    };
+    this.ref = null;
 
-  componentWillUnmount() {
-    this._timeouts.forEach(timeout => {
-      clearTimeout(timeout);
-    });
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
 
-    this._unmounted = true;
-  }
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
 
-  startTransition = (transitionIn, transitionOnStart) => {
-    const _this$props = this.props,
-          transitionEnter = _this$props.transitionEnter,
-          transitionExit = _this$props.transitionExit;
+    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);
-    }
-  };
-  transition = (() => {
-    var _this = this;
+      if (transitionIn) {
+        this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null);
+      } else {
+        this.exit(transitionExit && transitionOnStart ? STATES.ENTERED : null);
+      }
+    };
 
-    return function (toState, fromState, transitionCallback) {
+    this.transition = function (toState, fromState, transitionCallback) {
       let transitionDuration = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
       if (_this._unmounted) return;
       const onTransition = _this.props.onTransition;
@@ -155,7 +111,140 @@ class BaseTransition extends React.Component {
         }
       }, 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();
+          }
+        });
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.startTransition(this.props.in, this.props.transitionOnMount);
+  }
+
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    if (this.props.in !== prevProps.in && prevState.transitioning) {
+      // direction changed before previous transition finished
+      return true;
+    }
+
+    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) {
+      this.startTransition(this.props.in, true);
+    }
+  }
+
+  componentWillUnmount() {
+    this._timeouts.forEach(timeout => {
+      clearTimeout(timeout);
+    });
+
+    this._unmounted = true;
+  }
 
   clearTransition(transitionClassName) {
     if (this._unmounted) return;
@@ -175,103 +264,6 @@ class BaseTransition extends React.Component {
     });
   }
 
-  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();
-        }
-      });
-    }
-  };
-  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();
-        }
-      });
-    }
-  };
-
   transitionEnabled(toState) {
     const props = this.props;
 
@@ -330,5 +322,18 @@ class BaseTransition extends React.Component {
 
 }
 
+BaseTransition.displayName = "BaseTransition";
+BaseTransition.propTypes = propTypes;
+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,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["type", "children", "styles"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -48,29 +48,39 @@ category: components/utilities
 @module Transition
 @tsProps
 **/
-let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class Transition extends Component {
-  static displayName = "Transition";
-  static componentId = 'Transition';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  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.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Transition extends Component {
+  constructor() {
+    super(...arguments);
+    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);
+      }
+    };
+
+    this.renderTransitionHelper = () => {
+      const styles = this.props.styles;
+      return jsx(Global, {
+        styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
+      });
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -84,28 +94,6 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  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.styles;
-    return jsx(Global, {
-      styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
-    });
-  };
-
   render() {
     const _this$props3 = this.props,
           type = _this$props3.type,
@@ -128,6 +116,13 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     }), children));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  type: 'fade',
+  in: false,
+  unmountOnExit: false,
+  transitionOnMount: false,
+  transitionEnter: true,
+  transitionExit: true
+}, _class2.states = BaseTransition.states, _class2)) || _class) || _class);
 export default Transition;
 export { Transition };

package/lib/Transition/BaseTransition/index.js

@@ -57,84 +57,40 @@ private: true
 **/
 
 class BaseTransition extends _react.default.Component {
-  static displayName = "BaseTransition";
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.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.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
-  componentDidMount() {
-    this.startTransition(this.props.in, this.props.transitionOnMount);
-  }
-
-  getSnapshotBeforeUpdate(prevProps, prevState) {
-    if (this.props.in !== prevProps.in && prevState.transitioning) {
-      // direction changed before previous transition finished
-      return true;
-    }
-
-    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) {
-      this.startTransition(this.props.in, true);
-    }
-  }
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+    this._timeouts = [];
+    this._unmounted = false;
+    this.state = {
+      transitioning: false
+    };
+    this.ref = null;
 
-  componentWillUnmount() {
-    this._timeouts.forEach(timeout => {
-      clearTimeout(timeout);
-    });
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
 
-    this._unmounted = true;
-  }
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
 
-  startTransition = (transitionIn, transitionOnStart) => {
-    const _this$props = this.props,
-          transitionEnter = _this$props.transitionEnter,
-          transitionExit = _this$props.transitionExit;
+    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);
-    }
-  };
-  transition = (() => {
-    var _this = this;
+      if (transitionIn) {
+        this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null);
+      } else {
+        this.exit(transitionExit && transitionOnStart ? STATES.ENTERED : null);
+      }
+    };
 
-    return function (toState, fromState, transitionCallback) {
+    this.transition = function (toState, fromState, transitionCallback) {
       let transitionDuration = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
       if (_this._unmounted) return;
       const onTransition = _this.props.onTransition;
@@ -172,7 +128,140 @@ class BaseTransition extends _react.default.Component {
         }
       }, 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();
+          }
+        });
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.startTransition(this.props.in, this.props.transitionOnMount);
+  }
+
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    if (this.props.in !== prevProps.in && prevState.transitioning) {
+      // direction changed before previous transition finished
+      return true;
+    }
+
+    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) {
+      this.startTransition(this.props.in, true);
+    }
+  }
+
+  componentWillUnmount() {
+    this._timeouts.forEach(timeout => {
+      clearTimeout(timeout);
+    });
+
+    this._unmounted = true;
+  }
 
   clearTransition(transitionClassName) {
     if (this._unmounted) return;
@@ -192,103 +281,6 @@ class BaseTransition extends _react.default.Component {
     });
   }
 
-  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();
-        }
-      });
-    }
-  };
-  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();
-        }
-      });
-    }
-  };
-
   transitionEnabled(toState) {
     const props = this.props;
 
@@ -348,5 +340,18 @@ class BaseTransition extends _react.default.Component {
 }
 
 exports.BaseTransition = BaseTransition;
+BaseTransition.displayName = "BaseTransition";
+BaseTransition.propTypes = _props.propTypes;
+BaseTransition.allowedProps = _props.allowedProps;
+BaseTransition.defaultProps = {
+  in: false,
+  unmountOnExit: false,
+  transitionOnMount: false,
+  transitionEnter: true,
+  transitionExit: true,
+  enterDelay: 300,
+  exitDelay: 300
+};
+BaseTransition.states = STATES;
 var _default = BaseTransition;
 exports.default = _default;

package/lib/Transition/index.js

@@ -29,7 +29,7 @@ var _props = require("./props");
 
 const _excluded = ["type", "children", "styles"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -38,29 +38,39 @@ category: components/utilities
 @module Transition
 @tsProps
 **/
-let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class Transition extends _react.Component {
-  static displayName = "Transition";
-  static componentId = 'Transition';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    type: 'fade',
-    in: false,
-    unmountOnExit: false,
-    transitionOnMount: false,
-    transitionEnter: true,
-    transitionExit: true
-  };
-  static states = _BaseTransition.BaseTransition.states;
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Transition extends _react.Component {
+  constructor() {
+    super(...arguments);
+    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);
+      }
+    };
+
+    this.renderTransitionHelper = () => {
+      const styles = this.props.styles;
+      return (0, _emotion.jsx)(_emotion.Global, {
+        styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
+      });
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -74,28 +84,6 @@ let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  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.styles;
-    return (0, _emotion.jsx)(_emotion.Global, {
-      styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
-    });
-  };
-
   render() {
     const _this$props3 = this.props,
           type = _this$props3.type,
@@ -117,7 +105,14 @@ let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     }), children));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  type: 'fade',
+  in: false,
+  unmountOnExit: false,
+  transitionOnMount: false,
+  transitionEnter: true,
+  transitionExit: true
+}, _class2.states = _BaseTransition.BaseTransition.states, _class2)) || _class) || _class);
 exports.Transition = Transition;
 var _default = Transition;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-motion",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,19 +23,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
     "prop-types": "^15"
   },
   "peerDependencies": {