@instructure/ui-motion 8.8.1-snapshot.8 → 8.9.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.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
+
+### Bug Fixes
+
+- fix shared-types TS errors ([7b83164](https://github.com/instructure/instructure-ui/commit/7b83164f4c5872f3a217e010563f59bf584ae4fc))
+
 # [8.8.0](https://github.com/instructure/instructure-ui/compare/v8.7.0...v8.8.0) (2021-08-27)
 
 **Note:** Version bump only for package @instructure/ui-motion

package/es/Transition/{BaseTransition.js → BaseTransition/index.js}

@@ -22,9 +22,9 @@
  * SOFTWARE.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { getClassList } from '@instructure/ui-dom-utils';
 import { ensureSingleChild, safeCloneElement } from '@instructure/ui-react-utils';
+import { allowedProps, propTypes } from './props';
 const STATES = {
   EXITED: -2,
   EXITING: -1,
@@ -67,9 +67,9 @@ class BaseTransition extends React.Component {
       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) {
@@ -274,115 +274,8 @@ class BaseTransition extends React.Component {
 }
 
 BaseTransition.displayName = "BaseTransition";
-BaseTransition.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
-};
+BaseTransition.propTypes = propTypes;
+BaseTransition.allowedProps = allowedProps;
 BaseTransition.defaultProps = {
   in: false,
   component: 'div',
@@ -398,14 +291,8 @@ BaseTransition.defaultProps = {
   onExit: function () {},
   onExiting: function () {},
   onExited: function () {},
-  onTransition: function (toState, fromState) {},
-  className: void 0,
-  children: null,
-  transitionClassName: void 0,
-  exitedClassName: void 0,
-  exitingClassName: void 0,
-  enteredClassName: void 0,
-  enteringClassName: void 0
+  onTransition: function () {},
+  children: null
 };
 BaseTransition.states = STATES;
 export default BaseTransition;

package/{src/Transition/types.ts → es/Transition/BaseTransition/props.js}

@@ -21,29 +21,29 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export type TransitionType =
-  | 'fade'
-  | 'scale'
-  | 'slide-down'
-  | 'slide-up'
-  | 'slide-left'
-  | 'slide-right'
-
-export type TransitionProps = {
-  makeStyles?: (...args: any[]) => any
-  styles?: any
-  type?: TransitionType
-  in?: boolean
-  unmountOnExit?: boolean
-  transitionOnMount?: boolean
-  transitionEnter?: boolean
-  transitionExit?: boolean
-  onTransition?: (...args: any[]) => any
-  onEnter?: (...args: any[]) => any
-  onEntering?: (...args: any[]) => any
-  onEntered?: (...args: any[]) => any
-  onExit?: (...args: any[]) => any
-  onExiting?: (...args: any[]) => any
-  onExited?: (...args: any[]) => any
-}
+import PropTypes from 'prop-types';
+const propTypes = {
+  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 = ['in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'enterDelay', 'exitDelay', 'transitionClassName', 'exitedClassName', 'exitingClassName', 'enteredClassName', 'enteringClassName', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'children', 'className'];
+export { propTypes, allowedProps };

package/es/Transition/index.js

@@ -33,13 +33,13 @@ var _dec, _dec2, _class, _class2, _temp;
 // test is breaking without importing React here
 // eslint-disable-next-line no-unused-vars
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { ms } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { BaseTransition } from './BaseTransition';
+import { allowedProps, propTypes } from './props';
 
 /**
 ---
@@ -66,27 +66,31 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     this.renderTransitionHelper = () => {
       const styles = this.props.styles;
       return jsx(Global, {
-        styles: styles.globalStyles
+        styles: styles === null || styles === void 0 ? void 0 : styles.globalStyles
       });
     };
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+  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() {
     var _styles$classNames, _styles$classNames2, _styles$classNames3, _styles$classNames4, _styles$classNames5;
 
-    const _this$props = this.props,
-          type = _this$props.type,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    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);
     return jsx(React.Fragment, null, this.renderTransitionHelper(), jsx(BaseTransition, Object.assign({}, props, {
@@ -102,79 +106,7 @@ let Transition = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     }), children));
   }
 
-}, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-  type: PropTypes.oneOf(['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right']),
-
-  /**
-   * 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
-}, _class2.defaultProps = {
+}, _class2.displayName = "Transition", _class2.componentId = 'Transition', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   type: 'fade',
   in: false,
   unmountOnExit: false,

package/es/Transition/props.js

@@ -0,0 +1,95 @@
+/*
+ * 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 PropTypes from 'prop-types';
+const propTypes = {
+  type: PropTypes.oneOf(['fade', 'scale', 'slide-down', 'slide-up', 'slide-left', 'slide-right']),
+
+  /**
+   * 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
+};
+const allowedProps = ['type', 'children', 'in', 'unmountOnExit', 'transitionOnMount', 'transitionEnter', 'transitionExit', 'onTransition', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'];
+export { propTypes, allowedProps };