@instructure/ui-motion 8.8.1-snapshot.3 → 8.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-motion",
-  "version": "8.8.1-snapshot.3+d5d6d4cd8",
+  "version": "8.9.0",
   "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/shared-types": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-themes": "8.8.1-snapshot.3+d5d6d4cd8"
+    "@instructure/ui-babel-preset": "8.9.0",
+    "@instructure/ui-test-locator": "8.9.0",
+    "@instructure/ui-test-utils": "8.9.0",
+    "@instructure/ui-themes": "8.9.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-dom-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-testable": "8.8.1-snapshot.3+d5d6d4cd8",
-    "@instructure/ui-utils": "8.8.1-snapshot.3+d5d6d4cd8",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-dom-utils": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
+    "@instructure/ui-testable": "8.9.0",
+    "@instructure/ui-utils": "8.9.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -45,6 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "d5d6d4cd8f300e8635c69248f5d794c002269e08"
+  "sideEffects": false
 }

package/src/Transition/{BaseTransition.ts → BaseTransition/index.ts}

@@ -23,7 +23,6 @@
  */
 
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import { getClassList } from '@instructure/ui-dom-utils'
 import {
@@ -31,6 +30,9 @@ import {
   safeCloneElement
 } from '@instructure/ui-react-utils'
 
+import { allowedProps, propTypes } from './props'
+import type { BaseTransitionProps } from './props'
+
 const STATES = {
   EXITED: -2,
   EXITING: -1,
@@ -45,109 +47,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 {
-  static propTypes = {
-    /**
-     * 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,
-
-    /**
-     * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
-     * transition indefinately if the browser transitionEnd events are
-     * canceled or interrupted.
-     *
-     * By default this is set to a high number (5 seconds) as a failsafe. You should consider
-     * setting this to the duration of your animation (or a bit above it).
-     */
-    enterDelay: PropTypes.number,
-
-    /**
-     * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
-     * transition indefinately if the browser transitionEnd events are
-     * canceled or interrupted.
-     *
-     * By default this is set to a high number (5 seconds) as a failsafe. You should consider
-     * setting this to the duration of your animation (or a bit above it).
-     */
-    exitDelay: PropTypes.number,
-
-    /**
-     * the base CSS class for the transition (transitions go here)
-     */
-    transitionClassName: PropTypes.string,
-
-    /**
-     * CSS class or classes applied when the component is exited
-     */
-    exitedClassName: PropTypes.string,
-    /**
-     * CSS class or classes applied while the component is exiting
-     */
-    exitingClassName: PropTypes.string,
-    /**
-     * CSS class or classes applied when the component is entered
-     */
-    enteredClassName: PropTypes.string,
-    /**
-     * CSS class or classes applied while the component is entering
-     */
-    enteringClassName: PropTypes.string,
-
-    /**
-     * 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,
-
-    children: PropTypes.node,
-
-    className: PropTypes.string
-  }
-
+class BaseTransition extends React.Component<BaseTransitionProps> {
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
     in: false,
     component: 'div',
@@ -166,16 +68,9 @@ class BaseTransition extends React.Component {
     onExit: function () {},
     onExiting: function () {},
     onExited: function () {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'toState' is declared but its value is never read.
-    onTransition: function (toState, fromState) {},
-
-    className: undefined,
-    children: null,
-    transitionClassName: undefined,
-    exitedClassName: undefined,
-    exitingClassName: undefined,
-    enteredClassName: undefined,
-    enteringClassName: undefined
+    onTransition: function () {},
+
+    children: null
   }
 
   static states = STATES
@@ -187,13 +82,11 @@ class BaseTransition extends React.Component {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'in' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
     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) {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'in' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
     if (this.props.in !== prevProps.in && prevState.transitioning) {
       // direction changed before previous transition finished
       return true
@@ -207,14 +100,11 @@ class BaseTransition extends React.Component {
       this.clearTransition(prevProps.transitionClassName)
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionClassName' does not exist on t... Remove this comment to see the full error message
     if (this.props.transitionClassName !== prevProps.transitionClassName) {
       this.clearTransition(prevProps.transitionClassName)
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'in' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
     if (prevProps.in !== this.props.in) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'in' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
       this.startTransition(this.props.in, true)
     }
   }
@@ -229,7 +119,6 @@ class BaseTransition extends React.Component {
 
   // @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) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionEnter' does not exist on type ... Remove this comment to see the full error message
     const { transitionEnter, transitionExit } = this.props
     if (transitionIn) {
       this.enter(transitionEnter && transitionOnStart ? STATES.EXITED : null)
@@ -254,13 +143,12 @@ class BaseTransition extends React.Component {
 
     const transitionClassName = this.getTransitionClassName(toState)
     const prevTransitionClassName = this.getTransitionClassName(fromState)
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionClassName' does not exist on t... Remove this comment to see the full error message
     const baseTransitionClassName = this.props.transitionClassName
 
     if (fromState && transitionDuration && this.transitionEnabled(toState)) {
-      classList.add(baseTransitionClassName)
+      baseTransitionClassName && classList.add(baseTransitionClassName)
     } else {
-      classList.remove(baseTransitionClassName)
+      baseTransitionClassName && classList.remove(baseTransitionClassName)
     }
 
     if (prevTransitionClassName) {
@@ -301,6 +189,7 @@ class BaseTransition extends React.Component {
       const classList = getClassList(this)
 
       Object.keys(STATES).forEach((state) => {
+        // @ts-expect-error FIXME: type
         classList.remove(this.getTransitionClassName(state))
       })
 
@@ -317,7 +206,6 @@ class BaseTransition extends React.Component {
     // @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()
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionEnter' does not exist on type ... Remove this comment to see the full error message
     if (props.transitionEnter) {
       this.setState({ transitioning: true }, () => {
         const enter = () => {
@@ -336,7 +224,6 @@ class BaseTransition extends React.Component {
               STATES.ENTERING,
               initialState,
               enter,
-              // @ts-expect-error ts-migrate(2339) FIXME: Property 'enterDelay' does not exist on type 'Read... Remove this comment to see the full error message
               props.enterDelay
             )
           })
@@ -362,7 +249,6 @@ class BaseTransition extends React.Component {
     // @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()
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionExit' does not exist on type '... Remove this comment to see the full error message
     if (props.transitionExit) {
       this.setState({ transitioning: true }, () => {
         const exit = () => {
@@ -377,7 +263,6 @@ class BaseTransition extends React.Component {
         }
         if (initialState) {
           this.transition(initialState, null, () => {
-            // @ts-expect-error ts-migrate(2339) FIXME: Property 'exitDelay' does not exist on type 'Reado... Remove this comment to see the full error message
             this.transition(STATES.EXITING, initialState, exit, props.exitDelay)
           })
         } else {
@@ -401,11 +286,9 @@ class BaseTransition extends React.Component {
     switch (toState) {
       case STATES.EXITED:
       case STATES.EXITING:
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionExit' does not exist on type '... Remove this comment to see the full error message
         return props.transitionExit
       case STATES.ENTERED:
       case STATES.ENTERING:
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'transitionEnter' does not exist on type ... Remove this comment to see the full error message
         return props.transitionEnter
       default:
         return false
@@ -417,16 +300,12 @@ class BaseTransition extends React.Component {
     const { props } = this
     switch (transitionState) {
       case STATES.EXITED:
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'exitedClassName' does not exist on type ... Remove this comment to see the full error message
         return props.exitedClassName
       case STATES.ENTERING:
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'enteringClassName' does not exist on typ... Remove this comment to see the full error message
         return props.enteringClassName
       case STATES.ENTERED:
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'enteredClassName' does not exist on type... Remove this comment to see the full error message
         return props.enteredClassName
       case STATES.EXITING:
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'exitingClassName' does not exist on type... Remove this comment to see the full error message
         return props.exitingClassName
       default:
         return null
@@ -435,16 +314,13 @@ class BaseTransition extends React.Component {
 
   renderChildren() {
     return safeCloneElement(ensureSingleChild(this.props.children)!, {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'in' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
       'aria-hidden': !this.props.in ? true : null
     })
   }
 
   render() {
     if (
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'in' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
       !this.props.in &&
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'unmountOnExit' does not exist on type 'R... Remove this comment to see the full error message
       this.props.unmountOnExit &&
       !this.state.transitioning
     ) {

package/src/Transition/BaseTransition/props.ts

@@ -0,0 +1,187 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type BaseTransitionOwnProps = {
+  /**
+   * Show the component? Triggers the enter or exit animation.
+   */
+  in?: boolean
+
+  /**
+   * Unmount the component (remove it from the DOM) when it is not shown.
+   */
+  unmountOnExit?: boolean
+
+  /**
+   * Run the enter animation when the component mounts, if it is initially
+   * shown
+   */
+  transitionOnMount?: boolean
+  /**
+   * Run the enter animation
+   */
+  transitionEnter?: boolean
+  /**
+   * Run the exit animation
+   */
+  transitionExit?: boolean
+
+  /**
+   * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
+   * transition indefinately if the browser transitionEnd events are
+   * canceled or interrupted.
+   *
+   * By default this is set to a high number (5 seconds) as a failsafe. You should consider
+   * setting this to the duration of your animation (or a bit above it).
+   */
+  enterDelay?: number
+
+  /**
+   * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
+   * transition indefinately if the browser transitionEnd events are
+   * canceled or interrupted.
+   *
+   * By default this is set to a high number (5 seconds) as a failsafe. You should consider
+   * setting this to the duration of your animation (or a bit above it).
+   */
+  exitDelay?: number
+
+  /**
+   * the base CSS class for the transition (transitions go here)
+   */
+  transitionClassName?: string
+
+  /**
+   * CSS class or classes applied when the component is exited
+   */
+  exitedClassName?: string
+  /**
+   * CSS class or classes applied while the component is exiting
+   */
+  exitingClassName?: string
+  /**
+   * CSS class or classes applied when the component is entered
+   */
+  enteredClassName?: string
+  /**
+   * CSS class or classes applied while the component is entering
+   */
+  enteringClassName?: string
+
+  /**
+   * Callback fired when transitioning to the next state
+   */
+  onTransition?: (toState: number, fromState: number) => void
+
+  /**
+   * Callback fired before the "entering" classes are applied
+   */
+  onEnter?: () => void
+  /**
+   * Callback fired after the "entering" classes are applied
+   */
+  onEntering?: () => void
+  /**
+   * Callback fired after the "enter" classes are applied
+   */
+  onEntered?: () => void
+  /**
+   * Callback fired before the "exiting" classes are applied
+   */
+  onExit?: () => void
+  /**
+   * Callback fired after the "exiting" classes are applied
+   */
+  onExiting?: () => void
+  /**
+   * Callback fired after the "exited" classes are applied
+   */
+  onExited?: () => void
+
+  children?: React.ReactNode
+
+  className?: string
+}
+
+type PropKeys = keyof BaseTransitionOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type BaseTransitionProps = BaseTransitionOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  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,
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  onExiting: PropTypes.func,
+  onExited: PropTypes.func,
+  children: PropTypes.node,
+  className: PropTypes.string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'in',
+  'unmountOnExit',
+  'transitionOnMount',
+  'transitionEnter',
+  'transitionExit',
+  'enterDelay',
+  'exitDelay',
+  'transitionClassName',
+  'exitedClassName',
+  'exitingClassName',
+  'enteredClassName',
+  'enteringClassName',
+  'onTransition',
+  'onEnter',
+  'onEntering',
+  'onEntered',
+  'onExit',
+  'onExiting',
+  'onExited',
+  'children',
+  'className'
+]
+
+export type { BaseTransitionProps }
+export { propTypes, allowedProps }