@instructure/ui-motion 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-motion
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-motion

package/es/Transition/BaseTransition/index.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from 'react';
 import { getClassList, findDOMNode } from '@instructure/ui-dom-utils';
 import { ensureSingleChild, safeCloneElement } from '@instructure/ui-react-utils';
@@ -31,6 +32,7 @@ const STATES = {
   ENTERING: 1,
   ENTERED: 2
 };
+
 /**
 ---
 private: true
@@ -38,11 +40,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.Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
     this._timeouts = [];
@@ -51,75 +51,58 @@ class BaseTransition extends React.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 = 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
@@ -128,7 +111,6 @@ class BaseTransition extends React.Component {
             if (typeof props.onEntering === 'function') {
               props.onEntering();
             }
-
             this.transition(STATES.ENTERED, STATES.ENTERING, () => {
               this.setState({
                 transitioning: false
@@ -139,7 +121,6 @@ class BaseTransition extends React.Component {
               });
             });
           };
-
           if (initialState) {
             this.transition(initialState, null, () => {
               this.transition(STATES.ENTERING, initialState, enter, props.enterDelay);
@@ -153,22 +134,18 @@ class BaseTransition extends React.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
@@ -177,7 +154,6 @@ class BaseTransition extends React.Component {
             if (typeof props.onExiting === 'function') {
               props.onExiting();
             }
-
             this.transition(STATES.EXITED, STATES.EXITING, () => {
               this.setState({
                 transitioning: false
@@ -188,7 +164,6 @@ class BaseTransition extends React.Component {
               });
             });
           };
-
           if (initialState) {
             this.transition(initialState, null, () => {
               this.transition(STATES.EXITING, initialState, exit, props.exitDelay);
@@ -202,7 +177,6 @@ class BaseTransition extends React.Component {
           transitioning: false
         }, () => {
           this.transition(STATES.EXITED, STATES.ENTERED);
-
           if (typeof props.onExited === 'function') {
             props.onExited();
           }
@@ -210,43 +184,34 @@ class BaseTransition extends React.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({
@@ -256,7 +221,6 @@ class BaseTransition extends React.Component {
       const classList = getClassList(this.ref);
       Object.values(STATES).forEach(state => {
         const className = this.getTransitionClassName(state);
-
         if (className) {
           classList.remove(className);
         }
@@ -264,45 +228,34 @@ class BaseTransition extends React.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 ? safeCloneElement(ensureSingleChild(this.props.children), {
       'aria-hidden': !this.props.in ? true : void 0,
@@ -312,7 +265,6 @@ class BaseTransition extends React.Component {
       }
     }) : null;
   }
-
   render() {
     if (!this.props.in && this.props.unmountOnExit && !this.state.transitioning) {
       return null;
@@ -320,9 +272,7 @@ class BaseTransition extends React.Component {
       return this.renderChildren();
     }
   }
-
 }
-
 BaseTransition.displayName = "BaseTransition";
 BaseTransition.propTypes = propTypes;
 BaseTransition.allowedProps = allowedProps;

package/es/Transition/BaseTransition/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const transitionCommonPropTypes = {
   in: PropTypes.bool,
@@ -38,7 +39,8 @@ const transitionCommonPropTypes = {
   children: PropTypes.node,
   elementRef: PropTypes.func
 };
-const propTypes = { ...transitionCommonPropTypes,
+const propTypes = {
+  ...transitionCommonPropTypes,
   enterDelay: PropTypes.number,
   exitDelay: PropTypes.number,
   transitionClassName: PropTypes.string.isRequired,

package/es/Transition/TransitionLocator.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Transition } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { Transition } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const TransitionLocator = locator(Transition.selector);

package/es/Transition/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["type", "children", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -28,7 +26,6 @@ var _dec, _dec2, _class, _class2;
  */
 
 /** @jsx jsx */
-
 /** @jsxFrag React.Fragment */
 // test is breaking without importing React here
 // eslint-disable-next-line no-unused-vars
@@ -40,7 +37,6 @@ import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { BaseTransition } from './BaseTransition';
 import { allowedProps, propTypes } from './props';
-
 /**
 ---
 category: components/utilities
@@ -52,28 +48,23 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
   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, {
@@ -81,26 +72,20 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       });
     };
   }
-
   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 = _objectWithoutProperties(_this$props3, _excluded);
-
+      type = _this$props3.type,
+      children = _this$props3.children,
+      styles = _this$props3.styles,
+      props = _objectWithoutProperties(_this$props3, _excluded);
     const duration = ms(styles.duration);
     return jsx(React.Fragment, null, this.renderTransitionHelper(), jsx(BaseTransition, Object.assign({}, props, {
       enterDelay: duration,
@@ -115,7 +100,6 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       elementRef: this.handleRef
     }), children));
   }
-
 }, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   type: 'fade',
   in: false,

package/es/Transition/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { transitionCommonPropTypes } from './BaseTransition/props';
 const transitionTypes = ['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right'];

package/es/Transition/styles.js

@@ -21,6 +21,7 @@
  * 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`,
@@ -28,6 +29,7 @@ const getClassNames = type => ({
   entered: `transition--${type}-entered`,
   entering: `transition--${type}-entering`
 });
+
 /**
  * ---
  * private: true
@@ -38,10 +40,9 @@ 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
  */
-
-
 const generateStyle = (componentTheme, props) => {
   const type = props.type;
+
   /**
    * After emotion migration the only way to keep
    * the old BaseTransition functionality with adding and removing
@@ -51,8 +52,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
@@ -66,8 +67,8 @@ const generateStyle = (componentTheme, props) => {
       opacity: 1
     }
   };
-  /* Animation type: scale */
 
+  /* Animation type: scale */
   const scaleAnimation = {
     [`.transition--scale-transitioning`]: {
       transition: baseTransition
@@ -83,6 +84,7 @@ const generateStyle = (componentTheme, props) => {
       opacity: 1
     }
   };
+
   /* Animation type: slide */
 
   /*
@@ -94,7 +96,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,
@@ -139,12 +140,12 @@ const generateStyle = (componentTheme, props) => {
   return {
     duration: componentTheme.duration,
     classNames: getClassNames(type),
-    globalStyles: { ...fadeAnimation,
+    globalStyles: {
+      ...fadeAnimation,
       ...scaleAnimation,
       ...slideAnimation
     }
   };
 };
-
 export { generateStyle, getClassNames };
 export default generateStyle;

package/es/Transition/theme.js

@@ -33,8 +33,8 @@ 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
   };
 };
-
 export default generateComponentTheme;