@instructure/ui-motion 8.11.2-snapshot.3 → 8.11.2-snapshot.45

package/lib/Transition/props.js

@@ -9,6 +9,8 @@ exports.transitionTypePropType = exports.allowedProps = exports.propTypes = void
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _props = require("./BaseTransition/props");
+
 /*
  * The MIT License (MIT)
  *
@@ -32,77 +34,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const transitionTypePropType = _propTypes.default.oneOf(['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,
-
-  /**
-   * A single element to animate in and out
-   */
-  children: _propTypes.default.element,
-
-  /**
-   * Show the component; triggers the enter or exit animation
-   */
-  in: _propTypes.default.bool,
-
-  /**
-   * Unmount the component (remove it from the DOM) when it is not shown
-   */
-  unmountOnExit: _propTypes.default.bool,
-
-  /**
-   * Run the enter animation when the component mounts, if it is initially
-   * shown
-   */
-  transitionOnMount: _propTypes.default.bool,
-
-  /**
-   * Run the enter animation
-   */
-  transitionEnter: _propTypes.default.bool,
-
-  /**
-   * Run the exit animation
-   */
-  transitionExit: _propTypes.default.bool,
-
-  /**
-   * Callback fired when transitioning to the next state
-   */
-  onTransition: _propTypes.default.func,
-
-  /**
-   * Callback fired before the "entering" classes are applied
-   */
-  onEnter: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "entering" classes are applied
-   */
-  onEntering: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "enter" classes are applied
-   */
-  onEntered: _propTypes.default.func,
-
-  /**
-   * Callback fired before the "exiting" classes are applied
-   */
-  onExit: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "exiting" classes are applied
-   */
-  onExiting: _propTypes.default.func,
-
-  /**
-   * Callback fired after the "exited" classes are applied
-   */
-  onExited: _propTypes.default.func
+  ..._props.transitionCommonPropTypes
 };
 exports.propTypes = propTypes;
 const allowedProps = ['type', 'children', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];

package/lib/Transition/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.getClassNames = exports.generateStyle = void 0;
 
 /*
  * The MIT License (MIT)
@@ -28,7 +28,13 @@ 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`,
+  exiting: `transition--${type}-exiting`,
+  entered: `transition--${type}-entered`,
+  entering: `transition--${type}-entering`
+});
 /**
  * ---
  * private: true
@@ -39,6 +45,10 @@ exports.default = void 0;
  * @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;
   /**
@@ -137,13 +147,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
@@ -151,5 +155,6 @@ const generateStyle = (componentTheme, props) => {
   };
 };
 
+exports.generateStyle = generateStyle;
 var _default = generateStyle;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-motion",
-  "version": "8.11.2-snapshot.3+6c8116bbe",
+  "version": "8.11.2-snapshot.45+e3249d228",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,19 +24,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-test-locator": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-themes": "8.11.2-snapshot.3+6c8116bbe"
+    "@instructure/ui-babel-preset": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-test-locator": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-test-utils": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-themes": "8.11.2-snapshot.45+e3249d228"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/shared-types": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-dom-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-testable": "8.11.2-snapshot.3+6c8116bbe",
-    "@instructure/ui-utils": "8.11.2-snapshot.3+6c8116bbe",
+    "@instructure/emotion": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/shared-types": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-dom-utils": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-react-utils": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-testable": "8.11.2-snapshot.45+e3249d228",
+    "@instructure/ui-utils": "8.11.2-snapshot.45+e3249d228",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "6c8116bbe87878c77fca03bf26de932b40e21302"
+  "gitHead": "e3249d228eabac5bb98ff5d22e5881f2fe042606"
 }

package/src/Transition/BaseTransition/index.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { createRef } from 'react'
+import React, { createRef, ReactElement } from 'react'
 
 import { getClassList } from '@instructure/ui-dom-utils'
 import {
@@ -31,9 +31,14 @@ import {
 } from '@instructure/ui-react-utils'
 
 import { allowedProps, propTypes } from './props'
-import type { BaseTransitionProps } from './props'
-
-const STATES = {
+import type {
+  BaseTransitionProps,
+  BaseTransitionState,
+  BaseTransitionStateValue,
+  BaseTransitionStatesType
+} from './props'
+
+const STATES: Record<BaseTransitionStateValue, BaseTransitionStatesType> = {
   EXITED: -2,
   EXITING: -1,
   ENTERING: 1,
@@ -47,35 +52,26 @@ 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<BaseTransitionProps> {
+class BaseTransition extends React.Component<
+  BaseTransitionProps,
+  BaseTransitionState
+> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static 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
   }
 
   static states = STATES
 
-  _timeouts = []
+  _timeouts: ReturnType<typeof setTimeout>[] = []
+  _unmounted = false
 
   state = {
     transitioning: false
@@ -85,8 +81,10 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
     this.startTransition(this.props.in, this.props.transitionOnMount)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  getSnapshotBeforeUpdate(prevProps, prevState) {
+  getSnapshotBeforeUpdate(
+    prevProps: BaseTransitionProps,
+    prevState: BaseTransitionState
+  ) {
     if (this.props.in !== prevProps.in && prevState.transitioning) {
       // direction changed before previous transition finished
       return true
@@ -94,8 +92,11 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
     return null
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, cancelPrematurely) {
+  componentDidUpdate(
+    prevProps: BaseTransitionProps,
+    _prevState: BaseTransitionState,
+    cancelPrematurely: boolean
+  ) {
     if (cancelPrematurely) {
       this.clearTransition(prevProps.transitionClassName)
     }
@@ -113,12 +114,13 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
     this._timeouts.forEach((timeout) => {
       clearTimeout(timeout)
     })
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_unmounted' does not exist on type 'Base... Remove this comment to see the full error message
     this._unmounted = true
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'transitionIn' implicitly has an 'any' t... Remove this comment to see the full error message
-  startTransition = (transitionIn, transitionOnStart) => {
+  startTransition = (
+    transitionIn: BaseTransitionProps['in'],
+    transitionOnStart: BaseTransitionProps['transitionOnMount']
+  ) => {
     const { transitionEnter, transitionExit } = this.props
     if (transitionIn) {
       this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null)
@@ -128,17 +130,15 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
   }
 
   transition = (
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'toState' implicitly has an 'any' type.
-    toState,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'fromState' implicitly has an 'any' type... Remove this comment to see the full error message
-    fromState,
-    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'transitionCallback' implicitly has an '... Remove this comment to see the full error message
-    transitionCallback,
+    toState: BaseTransitionStatesType | null,
+    fromState: BaseTransitionStatesType | null,
+    transitionCallback?: () => void,
     transitionDuration = 0
   ) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_unmounted' does not exist on type 'Base... Remove this comment to see the full error message
     if (this._unmounted) return
 
+    const { onTransition } = this.props
+
     const classList = getClassList(this)
 
     const transitionClassName = this.getTransitionClassName(toState)
@@ -159,15 +159,12 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
       classList.add(transitionClassName)
     }
 
-    if (toState && fromState) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'onTransition' does not exist on type 'Re... Remove this comment to see the full error message
-      this.props.onTransition(toState, fromState)
+    if (toState && fromState && typeof onTransition === 'function') {
+      onTransition(toState, fromState)
     }
 
     this._timeouts.push(
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Timeout' is not assignable to pa... Remove this comment to see the full error message
       setTimeout(() => {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_unmounted' does not exist on type 'Base... Remove this comment to see the full error message
         if (this._unmounted) return
 
         if (typeof transitionCallback === 'function') {
@@ -177,44 +174,47 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
     )
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'transitionClassName' implicitly has an ... Remove this comment to see the full error message
-  clearTransition(transitionClassName) {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_unmounted' does not exist on type 'Base... Remove this comment to see the full error message
+  clearTransition(transitionClassName: string) {
     if (this._unmounted) return
 
     this.setState({ transitioning: false }, () => {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_unmounted' does not exist on type 'Base... Remove this comment to see the full error message
       if (this._unmounted) return
 
       const classList = getClassList(this)
 
-      Object.keys(STATES).forEach((state) => {
-        // @ts-expect-error FIXME: type
-        classList.remove(this.getTransitionClassName(state))
-      })
+      ;(Object.values(STATES) as BaseTransitionStatesType[]).forEach(
+        (state) => {
+          const className = this.getTransitionClassName(state)
+          if (className) {
+            classList.remove(className)
+          }
+        }
+      )
 
       classList.remove(transitionClassName)
     })
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'initialState' implicitly has an 'any' t... Remove this comment to see the full error message
-  enter = (initialState) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_unmounted' does not exist on type 'Base... Remove this comment to see the full error message
+  enter = (initialState: BaseTransitionStatesType | null) => {
     if (this.state.transitioning || this._unmounted) return
 
     const { props } = this
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onEnter' does not exist on type 'Readonl... Remove this comment to see the full error message
-    props.onEnter()
+
+    if (typeof props.onEnter === 'function') {
+      props.onEnter()
+    }
 
     if (props.transitionEnter) {
       this.setState({ transitioning: true }, () => {
         const enter = () => {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'onEntering' does not exist on type 'Read... Remove this comment to see the full error message
-          props.onEntering()
+          if (typeof props.onEntering === 'function') {
+            props.onEntering()
+          }
           this.transition(STATES.ENTERED, STATES.ENTERING, () => {
             this.setState({ transitioning: false }, () => {
-              // @ts-expect-error ts-migrate(2339) FIXME: Property 'onEntered' does not exist on type 'Reado... Remove this comment to see the full error message
-              props.onEntered()
+              if (typeof props.onEntered === 'function') {
+                props.onEntered()
+              }
             })
           })
         }
@@ -233,31 +233,34 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
       })
     } else {
       this.setState({ transitioning: false }, () => {
-        // @ts-expect-error ts-migrate(2554) FIXME: Expected 3-4 arguments, but got 2.
         this.transition(STATES.ENTERED, STATES.EXITED)
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'onEntered' does not exist on type 'Reado... Remove this comment to see the full error message
-        props.onEntered()
+        if (typeof props.onEntered === 'function') {
+          props.onEntered()
+        }
       })
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'initialState' implicitly has an 'any' t... Remove this comment to see the full error message
-  exit = (initialState) => {
+  exit = (initialState: BaseTransitionStatesType | null) => {
     if (this.state.transitioning) return
 
     const { props } = this
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onExit' does not exist on type 'Readonly... Remove this comment to see the full error message
-    props.onExit()
+
+    if (typeof props.onExit === 'function') {
+      props.onExit()
+    }
 
     if (props.transitionExit) {
       this.setState({ transitioning: true }, () => {
         const exit = () => {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'onExiting' does not exist on type 'Reado... Remove this comment to see the full error message
-          props.onExiting()
+          if (typeof props.onExiting === 'function') {
+            props.onExiting()
+          }
           this.transition(STATES.EXITED, STATES.EXITING, () => {
             this.setState({ transitioning: false }, () => {
-              // @ts-expect-error ts-migrate(2339) FIXME: Property 'onExited' does not exist on type 'Readon... Remove this comment to see the full error message
-              props.onExited()
+              if (typeof props.onExited === 'function') {
+                props.onExited()
+              }
             })
           })
         }
@@ -271,16 +274,15 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
       })
     } else {
       this.setState({ transitioning: false }, () => {
-        // @ts-expect-error ts-migrate(2554) FIXME: Expected 3-4 arguments, but got 2.
         this.transition(STATES.EXITED, STATES.ENTERED)
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'onExited' does not exist on type 'Readon... Remove this comment to see the full error message
-        props.onExited()
+        if (typeof props.onExited === 'function') {
+          props.onExited()
+        }
       })
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'toState' implicitly has an 'any' type.
-  transitionEnabled(toState) {
+  transitionEnabled(toState: BaseTransitionStatesType | null) {
     const { props } = this
 
     switch (toState) {
@@ -295,9 +297,9 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'transitionState' implicitly has an 'any... Remove this comment to see the full error message
-  getTransitionClassName(transitionState) {
+  getTransitionClassName(transitionState: BaseTransitionStatesType | null) {
     const { props } = this
+
     switch (transitionState) {
       case STATES.EXITED:
         return props.exitedClassName
@@ -308,15 +310,22 @@ class BaseTransition extends React.Component<BaseTransitionProps> {
       case STATES.EXITING:
         return props.exitingClassName
       default:
-        return null
+        return undefined
     }
   }
+
   ref = createRef()
+
   renderChildren() {
-    return safeCloneElement(ensureSingleChild(this.props.children)!, {
-      'aria-hidden': !this.props.in ? true : null,
-      ref: this.ref
-    })
+    return this.props.children
+      ? safeCloneElement(
+          ensureSingleChild(this.props.children) as ReactElement,
+          {
+            'aria-hidden': !this.props.in ? true : undefined,
+            ref: this.ref
+          }
+        )
+      : null
   }
 
   render() {