@instructure/ui-motion 8.11.2-snapshot.7 → 8.12.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
+
+### Bug Fixes
+
+- **ui-motion:** fix interrupted transition not removing transition classes ([db3fd4f](https://github.com/instructure/instructure-ui/commit/db3fd4f6ad76471dce61cc91f8267c1eb3094020))
+
 ## [8.11.1](https://github.com/instructure/instructure-ui/compare/v8.11.0...v8.11.1) (2021-10-19)
 
 **Note:** Version bump only for package @instructure/ui-motion

package/es/Transition/BaseTransition/index.js

@@ -43,6 +43,7 @@ class BaseTransition extends React.Component {
   constructor(...args) {
     super(...args);
     this._timeouts = [];
+    this._unmounted = false;
     this.state = {
       transitioning: false
     };
@@ -61,6 +62,7 @@ class BaseTransition extends React.Component {
 
     this.transition = (toState, fromState, transitionCallback, transitionDuration = 0) => {
       if (this._unmounted) return;
+      const onTransition = this.props.onTransition;
       const classList = getClassList(this);
       const transitionClassName = this.getTransitionClassName(toState);
       const prevTransitionClassName = this.getTransitionClassName(fromState);
@@ -80,8 +82,8 @@ class BaseTransition extends React.Component {
         classList.add(transitionClassName);
       }
 
-      if (toState && fromState) {
-        this.props.onTransition(toState, fromState);
+      if (toState && fromState && typeof onTransition === 'function') {
+        onTransition(toState, fromState);
       }
 
       this._timeouts.push(setTimeout(() => {
@@ -96,19 +98,27 @@ class BaseTransition extends React.Component {
     this.enter = initialState => {
       if (this.state.transitioning || this._unmounted) return;
       const props = this.props;
-      props.onEnter();
+
+      if (typeof props.onEnter === 'function') {
+        props.onEnter();
+      }
 
       if (props.transitionEnter) {
         this.setState({
           transitioning: true
         }, () => {
           const enter = () => {
-            props.onEntering();
+            if (typeof props.onEntering === 'function') {
+              props.onEntering();
+            }
+
             this.transition(STATES.ENTERED, STATES.ENTERING, () => {
               this.setState({
                 transitioning: false
               }, () => {
-                props.onEntered();
+                if (typeof props.onEntered === 'function') {
+                  props.onEntered();
+                }
               });
             });
           };
@@ -126,7 +136,10 @@ class BaseTransition extends React.Component {
           transitioning: false
         }, () => {
           this.transition(STATES.ENTERED, STATES.EXITED);
-          props.onEntered();
+
+          if (typeof props.onEntered === 'function') {
+            props.onEntered();
+          }
         });
       }
     };
@@ -134,19 +147,27 @@ class BaseTransition extends React.Component {
     this.exit = initialState => {
       if (this.state.transitioning) return;
       const props = this.props;
-      props.onExit();
+
+      if (typeof props.onExit === 'function') {
+        props.onExit();
+      }
 
       if (props.transitionExit) {
         this.setState({
           transitioning: true
         }, () => {
           const exit = () => {
-            props.onExiting();
+            if (typeof props.onExiting === 'function') {
+              props.onExiting();
+            }
+
             this.transition(STATES.EXITED, STATES.EXITING, () => {
               this.setState({
                 transitioning: false
               }, () => {
-                props.onExited();
+                if (typeof props.onExited === 'function') {
+                  props.onExited();
+                }
               });
             });
           };
@@ -164,7 +185,10 @@ class BaseTransition extends React.Component {
           transitioning: false
         }, () => {
           this.transition(STATES.EXITED, STATES.ENTERED);
-          props.onExited();
+
+          if (typeof props.onExited === 'function') {
+            props.onExited();
+          }
         });
       }
     };
@@ -185,7 +209,7 @@ class BaseTransition extends React.Component {
     return null;
   }
 
-  componentDidUpdate(prevProps, prevState, cancelPrematurely) {
+  componentDidUpdate(prevProps, _prevState, cancelPrematurely) {
     if (cancelPrematurely) {
       this.clearTransition(prevProps.transitionClassName);
     }
@@ -214,8 +238,12 @@ class BaseTransition extends React.Component {
     }, () => {
       if (this._unmounted) return;
       const classList = getClassList(this);
-      Object.keys(STATES).forEach(state => {
-        classList.remove(this.getTransitionClassName(state));
+      Object.values(STATES).forEach(state => {
+        const className = this.getTransitionClassName(state);
+
+        if (className) {
+          classList.remove(className);
+        }
       });
       classList.remove(transitionClassName);
     });
@@ -255,15 +283,15 @@ class BaseTransition extends React.Component {
         return props.exitingClassName;
 
       default:
-        return null;
+        return void 0;
     }
   }
 
   renderChildren() {
-    return safeCloneElement(ensureSingleChild(this.props.children), {
-      'aria-hidden': !this.props.in ? true : null,
+    return this.props.children ? safeCloneElement(ensureSingleChild(this.props.children), {
+      'aria-hidden': !this.props.in ? true : void 0,
       ref: this.ref
-    });
+    }) : null;
   }
 
   render() {
@@ -281,21 +309,12 @@ BaseTransition.propTypes = propTypes;
 BaseTransition.allowedProps = allowedProps;
 BaseTransition.defaultProps = {
   in: false,
-  component: 'div',
   unmountOnExit: false,
   transitionOnMount: false,
   transitionEnter: true,
   transitionExit: true,
   enterDelay: 300,
-  exitDelay: 300,
-  onEnter: function () {},
-  onEntering: function () {},
-  onEntered: function () {},
-  onExit: function () {},
-  onExiting: function () {},
-  onExited: function () {},
-  onTransition: function () {},
-  children: null
+  exitDelay: 300
 };
 BaseTransition.states = STATES;
 export default BaseTransition;

package/es/Transition/BaseTransition/props.js

@@ -22,19 +22,12 @@
  * SOFTWARE.
  */
 import PropTypes from 'prop-types';
-const propTypes = {
+const transitionCommonPropTypes = {
   in: PropTypes.bool,
   unmountOnExit: PropTypes.bool,
   transitionOnMount: PropTypes.bool,
   transitionEnter: PropTypes.bool,
   transitionExit: PropTypes.bool,
-  enterDelay: PropTypes.number,
-  exitDelay: PropTypes.number,
-  transitionClassName: PropTypes.string,
-  exitedClassName: PropTypes.string,
-  exitingClassName: PropTypes.string,
-  enteredClassName: PropTypes.string,
-  enteringClassName: PropTypes.string,
   onTransition: PropTypes.func,
   onEnter: PropTypes.func,
   onEntering: PropTypes.func,
@@ -42,8 +35,17 @@ const propTypes = {
   onExit: PropTypes.func,
   onExiting: PropTypes.func,
   onExited: PropTypes.func,
-  children: PropTypes.node,
+  children: PropTypes.node
+};
+const propTypes = { ...transitionCommonPropTypes,
+  enterDelay: PropTypes.number,
+  exitDelay: PropTypes.number,
+  transitionClassName: PropTypes.string.isRequired,
+  exitedClassName: PropTypes.string.isRequired,
+  exitingClassName: PropTypes.string.isRequired,
+  enteredClassName: PropTypes.string.isRequired,
+  enteringClassName: PropTypes.string.isRequired,
   className: PropTypes.string
 };
 const allowedProps = ['in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'enterDelay', 'exitDelay', 'transitionClassName', 'exitedClassName', 'exitingClassName', 'enteredClassName', 'enteringClassName', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'children', 'className'];
-export { propTypes, allowedProps };
+export { propTypes, allowedProps, transitionCommonPropTypes };

package/es/Transition/index.js

@@ -46,6 +46,7 @@ import { allowedProps, propTypes } from './props';
 category: components/utilities
 ---
 @module Transition
+@tsProps
 **/
 let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Transition extends Component {
   constructor(...args) {
@@ -84,23 +85,21 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   }
 
   render() {
-    var _styles$classNames, _styles$classNames2, _styles$classNames3, _styles$classNames4, _styles$classNames5;
-
     const _this$props3 = this.props,
           type = _this$props3.type,
           children = _this$props3.children,
           styles = _this$props3.styles,
           props = _objectWithoutProperties(_this$props3, _excluded);
 
-    const duration = ms(styles === null || styles === void 0 ? void 0 : styles.duration);
+    const duration = ms(styles.duration);
     return jsx(React.Fragment, null, this.renderTransitionHelper(), jsx(BaseTransition, Object.assign({}, props, {
       enterDelay: duration,
       exitDelay: duration,
-      transitionClassName: styles === null || styles === void 0 ? void 0 : (_styles$classNames = styles.classNames) === null || _styles$classNames === void 0 ? void 0 : _styles$classNames.transitioning,
-      exitedClassName: styles === null || styles === void 0 ? void 0 : (_styles$classNames2 = styles.classNames) === null || _styles$classNames2 === void 0 ? void 0 : _styles$classNames2.exited,
-      exitingClassName: styles === null || styles === void 0 ? void 0 : (_styles$classNames3 = styles.classNames) === null || _styles$classNames3 === void 0 ? void 0 : _styles$classNames3.exiting,
-      enteredClassName: styles === null || styles === void 0 ? void 0 : (_styles$classNames4 = styles.classNames) === null || _styles$classNames4 === void 0 ? void 0 : _styles$classNames4.entered,
-      enteringClassName: styles === null || styles === void 0 ? void 0 : (_styles$classNames5 = styles.classNames) === null || _styles$classNames5 === void 0 ? void 0 : _styles$classNames5.entering,
+      transitionClassName: styles.classNames.transitioning,
+      exitedClassName: styles.classNames.exited,
+      exitingClassName: styles.classNames.exiting,
+      enteredClassName: styles.classNames.entered,
+      enteringClassName: styles.classNames.entering,
       onEntered: this.handleEntered,
       onExited: this.handleExited
     }), children));
@@ -112,15 +111,7 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   unmountOnExit: false,
   transitionOnMount: false,
   transitionEnter: true,
-  transitionExit: true,
-  onEnter: function () {},
-  onEntering: function () {},
-  onEntered: function () {},
-  onExit: function () {},
-  onExiting: function () {},
-  onExited: function () {},
-  onTransition: function (toState, fromState) {},
-  children: null
+  transitionExit: true
 }, _class2.states = BaseTransition.states, _temp)) || _class) || _class);
 export default Transition;
 export { Transition };

package/es/Transition/props.js

@@ -22,75 +22,12 @@
  * SOFTWARE.
  */
 import PropTypes from 'prop-types';
-const transitionTypePropType = PropTypes.oneOf(['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right']);
+import { transitionCommonPropTypes } from './BaseTransition/props';
+const transitionTypes = ['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right'];
+const transitionTypePropType = PropTypes.oneOf(transitionTypes);
 const propTypes = {
   type: transitionTypePropType,
-
-  /**
-   * A single element to animate in and out
-   */
-  children: PropTypes.element,
-
-  /**
-   * Show the component; triggers the enter or exit animation
-   */
-  in: PropTypes.bool,
-
-  /**
-   * Unmount the component (remove it from the DOM) when it is not shown
-   */
-  unmountOnExit: PropTypes.bool,
-
-  /**
-   * Run the enter animation when the component mounts, if it is initially
-   * shown
-   */
-  transitionOnMount: PropTypes.bool,
-
-  /**
-   * Run the enter animation
-   */
-  transitionEnter: PropTypes.bool,
-
-  /**
-   * Run the exit animation
-   */
-  transitionExit: PropTypes.bool,
-
-  /**
-   * Callback fired when transitioning to the next state
-   */
-  onTransition: PropTypes.func,
-
-  /**
-   * Callback fired before the "entering" classes are applied
-   */
-  onEnter: PropTypes.func,
-
-  /**
-   * Callback fired after the "entering" classes are applied
-   */
-  onEntering: PropTypes.func,
-
-  /**
-   * Callback fired after the "enter" classes are applied
-   */
-  onEntered: PropTypes.func,
-
-  /**
-   * Callback fired before the "exiting" classes are applied
-   */
-  onExit: PropTypes.func,
-
-  /**
-   * Callback fired after the "exiting" classes are applied
-   */
-  onExiting: PropTypes.func,
-
-  /**
-   * Callback fired after the "exited" classes are applied
-   */
-  onExited: PropTypes.func
+  ...transitionCommonPropTypes
 };
 const allowedProps = ['type', 'children', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
 export { propTypes, allowedProps, transitionTypePropType };

package/es/Transition/styles.js

@@ -21,7 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+const getClassNames = type => ({
+  transitioning: `transition--${type}-transitioning`,
+  exited: `transition--${type}-exited`,
+  exiting: `transition--${type}-exiting`,
+  entered: `transition--${type}-entered`,
+  entering: `transition--${type}-entering`
+});
 /**
  * ---
  * private: true
@@ -32,6 +38,8 @@
  * @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 type = props.type;
   /**
@@ -130,13 +138,7 @@ const generateStyle = (componentTheme, props) => {
   };
   return {
     duration: componentTheme.duration,
-    classNames: type ? {
-      transitioning: `transition--${type}-transitioning`,
-      exited: `transition--${type}-exited`,
-      exiting: `transition--${type}-exiting`,
-      entered: `transition--${type}-entered`,
-      entering: `transition--${type}-entering`
-    } : {},
+    classNames: getClassNames(type),
     globalStyles: { ...fadeAnimation,
       ...scaleAnimation,
       ...slideAnimation
@@ -144,4 +146,5 @@ const generateStyle = (componentTheme, props) => {
   };
 };
 
+export { generateStyle, getClassNames };
 export default generateStyle;

package/es/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/Transition/BaseTransition/index.js

@@ -58,6 +58,7 @@ class BaseTransition extends _react.default.Component {
   constructor(...args) {
     super(...args);
     this._timeouts = [];
+    this._unmounted = false;
     this.state = {
       transitioning: false
     };
@@ -76,6 +77,7 @@ class BaseTransition extends _react.default.Component {
 
     this.transition = (toState, fromState, transitionCallback, transitionDuration = 0) => {
       if (this._unmounted) return;
+      const onTransition = this.props.onTransition;
       const classList = (0, _getClassList.getClassList)(this);
       const transitionClassName = this.getTransitionClassName(toState);
       const prevTransitionClassName = this.getTransitionClassName(fromState);
@@ -95,8 +97,8 @@ class BaseTransition extends _react.default.Component {
         classList.add(transitionClassName);
       }
 
-      if (toState && fromState) {
-        this.props.onTransition(toState, fromState);
+      if (toState && fromState && typeof onTransition === 'function') {
+        onTransition(toState, fromState);
       }
 
       this._timeouts.push(setTimeout(() => {
@@ -111,19 +113,27 @@ class BaseTransition extends _react.default.Component {
     this.enter = initialState => {
       if (this.state.transitioning || this._unmounted) return;
       const props = this.props;
-      props.onEnter();
+
+      if (typeof props.onEnter === 'function') {
+        props.onEnter();
+      }
 
       if (props.transitionEnter) {
         this.setState({
           transitioning: true
         }, () => {
           const enter = () => {
-            props.onEntering();
+            if (typeof props.onEntering === 'function') {
+              props.onEntering();
+            }
+
             this.transition(STATES.ENTERED, STATES.ENTERING, () => {
               this.setState({
                 transitioning: false
               }, () => {
-                props.onEntered();
+                if (typeof props.onEntered === 'function') {
+                  props.onEntered();
+                }
               });
             });
           };
@@ -141,7 +151,10 @@ class BaseTransition extends _react.default.Component {
           transitioning: false
         }, () => {
           this.transition(STATES.ENTERED, STATES.EXITED);
-          props.onEntered();
+
+          if (typeof props.onEntered === 'function') {
+            props.onEntered();
+          }
         });
       }
     };
@@ -149,19 +162,27 @@ class BaseTransition extends _react.default.Component {
     this.exit = initialState => {
       if (this.state.transitioning) return;
       const props = this.props;
-      props.onExit();
+
+      if (typeof props.onExit === 'function') {
+        props.onExit();
+      }
 
       if (props.transitionExit) {
         this.setState({
           transitioning: true
         }, () => {
           const exit = () => {
-            props.onExiting();
+            if (typeof props.onExiting === 'function') {
+              props.onExiting();
+            }
+
             this.transition(STATES.EXITED, STATES.EXITING, () => {
               this.setState({
                 transitioning: false
               }, () => {
-                props.onExited();
+                if (typeof props.onExited === 'function') {
+                  props.onExited();
+                }
               });
             });
           };
@@ -179,7 +200,10 @@ class BaseTransition extends _react.default.Component {
           transitioning: false
         }, () => {
           this.transition(STATES.EXITED, STATES.ENTERED);
-          props.onExited();
+
+          if (typeof props.onExited === 'function') {
+            props.onExited();
+          }
         });
       }
     };
@@ -200,7 +224,7 @@ class BaseTransition extends _react.default.Component {
     return null;
   }
 
-  componentDidUpdate(prevProps, prevState, cancelPrematurely) {
+  componentDidUpdate(prevProps, _prevState, cancelPrematurely) {
     if (cancelPrematurely) {
       this.clearTransition(prevProps.transitionClassName);
     }
@@ -229,8 +253,12 @@ class BaseTransition extends _react.default.Component {
     }, () => {
       if (this._unmounted) return;
       const classList = (0, _getClassList.getClassList)(this);
-      Object.keys(STATES).forEach(state => {
-        classList.remove(this.getTransitionClassName(state));
+      Object.values(STATES).forEach(state => {
+        const className = this.getTransitionClassName(state);
+
+        if (className) {
+          classList.remove(className);
+        }
       });
       classList.remove(transitionClassName);
     });
@@ -270,15 +298,15 @@ class BaseTransition extends _react.default.Component {
         return props.exitingClassName;
 
       default:
-        return null;
+        return void 0;
     }
   }
 
   renderChildren() {
-    return (0, _safeCloneElement.safeCloneElement)((0, _ensureSingleChild.ensureSingleChild)(this.props.children), {
-      'aria-hidden': !this.props.in ? true : null,
+    return this.props.children ? (0, _safeCloneElement.safeCloneElement)((0, _ensureSingleChild.ensureSingleChild)(this.props.children), {
+      'aria-hidden': !this.props.in ? true : void 0,
       ref: this.ref
-    });
+    }) : null;
   }
 
   render() {
@@ -297,21 +325,12 @@ BaseTransition.propTypes = _props.propTypes;
 BaseTransition.allowedProps = _props.allowedProps;
 BaseTransition.defaultProps = {
   in: false,
-  component: 'div',
   unmountOnExit: false,
   transitionOnMount: false,
   transitionEnter: true,
   transitionExit: true,
   enterDelay: 300,
-  exitDelay: 300,
-  onEnter: function () {},
-  onEntering: function () {},
-  onEntered: function () {},
-  onExit: function () {},
-  onExiting: function () {},
-  onExited: function () {},
-  onTransition: function () {},
-  children: null
+  exitDelay: 300
 };
 BaseTransition.states = STATES;
 var _default = BaseTransition;

package/lib/Transition/BaseTransition/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.transitionCommonPropTypes = exports.allowedProps = exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -32,19 +32,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const propTypes = {
+const transitionCommonPropTypes = {
   in: _propTypes.default.bool,
   unmountOnExit: _propTypes.default.bool,
   transitionOnMount: _propTypes.default.bool,
   transitionEnter: _propTypes.default.bool,
   transitionExit: _propTypes.default.bool,
-  enterDelay: _propTypes.default.number,
-  exitDelay: _propTypes.default.number,
-  transitionClassName: _propTypes.default.string,
-  exitedClassName: _propTypes.default.string,
-  exitingClassName: _propTypes.default.string,
-  enteredClassName: _propTypes.default.string,
-  enteringClassName: _propTypes.default.string,
   onTransition: _propTypes.default.func,
   onEnter: _propTypes.default.func,
   onEntering: _propTypes.default.func,
@@ -52,7 +45,17 @@ const propTypes = {
   onExit: _propTypes.default.func,
   onExiting: _propTypes.default.func,
   onExited: _propTypes.default.func,
-  children: _propTypes.default.node,
+  children: _propTypes.default.node
+};
+exports.transitionCommonPropTypes = transitionCommonPropTypes;
+const propTypes = { ...transitionCommonPropTypes,
+  enterDelay: _propTypes.default.number,
+  exitDelay: _propTypes.default.number,
+  transitionClassName: _propTypes.default.string.isRequired,
+  exitedClassName: _propTypes.default.string.isRequired,
+  exitingClassName: _propTypes.default.string.isRequired,
+  enteredClassName: _propTypes.default.string.isRequired,
+  enteringClassName: _propTypes.default.string.isRequired,
   className: _propTypes.default.string
 };
 exports.propTypes = propTypes;