@instructure/ui-motion 8.33.1 → 8.33.2

package/lib/Transition/BaseTransition/index.js

@@ -1,24 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BaseTransition = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _getClassList = require("@instructure/ui-dom-utils/lib/getClassList.js");
-
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-
 var _ensureSingleChild = require("@instructure/ui-react-utils/lib/ensureSingleChild.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _props = require("./props");
-
 /*
  * The MIT License (MIT)
  *
@@ -42,12 +34,14 @@ var _props = require("./props");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const STATES = {
   EXITED: -2,
   EXITING: -1,
   ENTERING: 1,
   ENTERED: 2
 };
+
 /**
 ---
 private: true
@@ -55,11 +49,9 @@ 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 _react.default.Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
     this._timeouts = [];
@@ -68,75 +60,58 @@ class BaseTransition extends _react.default.Component {
       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;
-
+        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 = 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;
       const classList = (0, _getClassList.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
@@ -145,7 +120,6 @@ class BaseTransition extends _react.default.Component {
             if (typeof props.onEntering === 'function') {
               props.onEntering();
             }
-
             this.transition(STATES.ENTERED, STATES.ENTERING, () => {
               this.setState({
                 transitioning: false
@@ -156,7 +130,6 @@ class BaseTransition extends _react.default.Component {
               });
             });
           };
-
           if (initialState) {
             this.transition(initialState, null, () => {
               this.transition(STATES.ENTERING, initialState, enter, props.enterDelay);
@@ -170,22 +143,18 @@ class BaseTransition extends _react.default.Component {
           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
@@ -194,7 +163,6 @@ class BaseTransition extends _react.default.Component {
             if (typeof props.onExiting === 'function') {
               props.onExiting();
             }
-
             this.transition(STATES.EXITED, STATES.EXITING, () => {
               this.setState({
                 transitioning: false
@@ -205,7 +173,6 @@ class BaseTransition extends _react.default.Component {
               });
             });
           };
-
           if (initialState) {
             this.transition(initialState, null, () => {
               this.transition(STATES.EXITING, initialState, exit, props.exitDelay);
@@ -219,7 +186,6 @@ class BaseTransition extends _react.default.Component {
           transitioning: false
         }, () => {
           this.transition(STATES.EXITED, STATES.ENTERED);
-
           if (typeof props.onExited === 'function') {
             props.onExited();
           }
@@ -227,43 +193,34 @@ class BaseTransition extends _react.default.Component {
       }
     };
   }
-
   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;
     }
-
     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;
     this.setState({
@@ -273,7 +230,6 @@ class BaseTransition extends _react.default.Component {
       const classList = (0, _getClassList.getClassList)(this.ref);
       Object.values(STATES).forEach(state => {
         const className = this.getTransitionClassName(state);
-
         if (className) {
           classList.remove(className);
         }
@@ -281,45 +237,34 @@ class BaseTransition extends _react.default.Component {
       classList.remove(transitionClassName);
     });
   }
-
   transitionEnabled(toState) {
     const props = this.props;
-
     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.props;
-
     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 void 0;
     }
   }
-
   renderChildren() {
     return this.props.children ? (0, _safeCloneElement.safeCloneElement)((0, _ensureSingleChild.ensureSingleChild)(this.props.children), {
       'aria-hidden': !this.props.in ? true : void 0,
@@ -329,7 +274,6 @@ class BaseTransition extends _react.default.Component {
       }
     }) : null;
   }
-
   render() {
     if (!this.props.in && this.props.unmountOnExit && !this.state.transitioning) {
       return null;
@@ -337,9 +281,7 @@ class BaseTransition extends _react.default.Component {
       return this.renderChildren();
     }
   }
-
 }
-
 exports.BaseTransition = BaseTransition;
 BaseTransition.displayName = "BaseTransition";
 BaseTransition.propTypes = _props.propTypes;

package/lib/Transition/BaseTransition/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transitionCommonPropTypes = exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const transitionCommonPropTypes = {
   in: _propTypes.default.bool,
   unmountOnExit: _propTypes.default.bool,
@@ -49,7 +47,8 @@ const transitionCommonPropTypes = {
   elementRef: _propTypes.default.func
 };
 exports.transitionCommonPropTypes = transitionCommonPropTypes;
-const propTypes = { ...transitionCommonPropTypes,
+const propTypes = {
+  ...transitionCommonPropTypes,
   enterDelay: _propTypes.default.number,
   exitDelay: _propTypes.default.number,
   transitionClassName: _propTypes.default.string.isRequired,

package/lib/Transition/TransitionLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TransitionLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TransitionLocator = (0, _locator.locator)(_index.Transition.selector);
 exports.TransitionLocator = TransitionLocator;

package/lib/Transition/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Transition = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _ms = require("@instructure/ui-utils/lib/ms.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _BaseTransition = require("./BaseTransition");
-
 var _props = require("./props");
-
 const _excluded = ["type", "children", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components/utilities
@@ -42,28 +28,23 @@ let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   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, {
@@ -71,25 +52,20 @@ let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       });
     };
   }
-
   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);
   }
-
   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);
   }
-
   render() {
     const _this$props3 = this.props,
-          type = _this$props3.type,
-          children = _this$props3.children,
-          styles = _this$props3.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      type = _this$props3.type,
+      children = _this$props3.children,
+      styles = _this$props3.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const duration = (0, _ms.ms)(styles.duration);
     return (0, _emotion.jsx)(_react.default.Fragment, null, this.renderTransitionHelper(), (0, _emotion.jsx)(_BaseTransition.BaseTransition, Object.assign({}, props, {
       enterDelay: duration,
@@ -104,7 +80,6 @@ let Transition = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       elementRef: this.handleRef
     }), children));
   }
-
 }, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   type: 'fade',
   in: false,

package/lib/Transition/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "TransitionLocator", {
   }
 });
 exports.default = void 0;
-
 var _TransitionLocator = require("./TransitionLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Transition/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transitionTypePropType = exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _props = require("./BaseTransition/props");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,10 +30,9 @@ var _props = require("./BaseTransition/props");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const transitionTypes = ['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right'];
 
+const transitionTypes = ['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right'];
 const transitionTypePropType = _propTypes.default.oneOf(transitionTypes);
-
 exports.transitionTypePropType = transitionTypePropType;
 const propTypes = {
   type: transitionTypePropType,

package/lib/Transition/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getClassNames = exports.generateStyle = exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -28,6 +27,7 @@ exports.getClassNames = exports.generateStyle = exports.default = void 0;
  * 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`,
@@ -35,6 +35,7 @@ const getClassNames = type => ({
   entered: `transition--${type}-entered`,
   entering: `transition--${type}-entering`
 });
+
 /**
  * ---
  * private: true
@@ -45,12 +46,10 @@ const getClassNames = type => ({
  * @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
  */
-
-
 exports.getClassNames = getClassNames;
-
 const generateStyle = (componentTheme, props) => {
   const type = props.type;
+
   /**
    * After emotion migration the only way to keep
    * the old BaseTransition functionality with adding and removing
@@ -60,8 +59,8 @@ const generateStyle = (componentTheme, props) => {
    */
 
   const baseTransition = `opacity ${componentTheme.duration} ${componentTheme.timing}, transform ${componentTheme.duration} ${componentTheme.timing}`;
-  /* Animation type: fade */
 
+  /* Animation type: fade */
   const fadeAnimation = {
     [`.transition--fade-transitioning`]: {
       transition: baseTransition
@@ -75,8 +74,8 @@ const generateStyle = (componentTheme, props) => {
       opacity: 1
     }
   };
-  /* Animation type: scale */
 
+  /* Animation type: scale */
   const scaleAnimation = {
     [`.transition--scale-transitioning`]: {
       transition: baseTransition
@@ -92,6 +91,7 @@ const generateStyle = (componentTheme, props) => {
       opacity: 1
     }
   };
+
   /* Animation type: slide */
 
   /*
@@ -103,7 +103,6 @@ const generateStyle = (componentTheme, props) => {
      The base transition class enables/disables transitions
     from one state to another, so transitions should be set there.
   */
-
   const slideAnimation = {
     [`.transition--slide-right-transitioning,
       .transition--slide-left-transitioning,
@@ -148,13 +147,13 @@ const generateStyle = (componentTheme, props) => {
   return {
     duration: componentTheme.duration,
     classNames: getClassNames(type),
-    globalStyles: { ...fadeAnimation,
+    globalStyles: {
+      ...fadeAnimation,
       ...scaleAnimation,
       ...slideAnimation
     }
   };
 };
-
 exports.generateStyle = generateStyle;
 var _default = generateStyle;
 exports.default = _default;

package/lib/Transition/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -40,9 +39,9 @@ const generateComponentTheme = theme => {
     duration: transitions === null || transitions === void 0 ? void 0 : transitions.duration,
     timing: transitions === null || transitions === void 0 ? void 0 : transitions.timing
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "transitionTypePropType", {
     return _props.transitionTypePropType;
   }
 });
-
 var _Transition = require("./Transition");
-
 var _props = require("./Transition/props");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-motion",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "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.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1",
-    "@instructure/ui-themes": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2",
+    "@instructure/ui-themes": "8.33.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.33.1",
-    "@instructure/shared-types": "8.33.1",
-    "@instructure/ui-dom-utils": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-utils": "8.33.1",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-dom-utils": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
     "prop-types": "^15"
   },
   "peerDependencies": {