react-transition-group - npm Package Compare versions

Comparing version 4.2.1 to 4.2.2

cjs/CSSTransition.js

@@ -6,3 +6,3 @@ "use strict";
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,4 +21,2 @@ var _addClass2 = _interopRequireDefault(require("dom-helpers/class/addClass"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -100,2 +98,6 @@
  * `*-active` classes represent which styles you want to animate **to**.
+ *
+ * **Note**: If you're using the
+ * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
+ * prop, make sure to define styles for `.appear-*` classes as well.
  */
@@ -266,9 +268,9 @@
   /**
-   * The animation classNames applied to the component as it enters, exits or
-   * has finished the transition. A single name can be provided and it will be
-   * suffixed for each stage: e.g.
+   * The animation classNames applied to the component as it appears, enters,
+   * exits or has finished the transition. A single name can be provided and it
+   * will be suffixed for each stage: e.g.
    *
-   * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
-   * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
-   * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.
+   * `classNames="fade"` applies `fade-appear`, `fade-appear-active`,
+   * `fade-appear-done`, `fade-enter`, `fade-enter-active`, `fade-enter-done`,
+   * `fade-exit`, `fade-exit-active`, and `fade-exit-done`.
    *
@@ -332,3 +334,3 @@ * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.
    */
-  onEnter: PropTypes.func,
+  onEnter: _propTypes.default.func,
 
@@ -341,3 +343,3 @@ /**
    */
-  onEntering: PropTypes.func,
+  onEntering: _propTypes.default.func,
 
@@ -350,3 +352,3 @@ /**
    */
-  onEntered: PropTypes.func,
+  onEntered: _propTypes.default.func,
 
@@ -359,3 +361,3 @@ /**
    */
-  onExit: PropTypes.func,
+  onExit: _propTypes.default.func,
 
@@ -367,3 +369,3 @@ /**
    */
-  onExiting: PropTypes.func,
+  onExiting: _propTypes.default.func,
 
@@ -376,3 +378,3 @@ /**
    */
-  onExited: PropTypes.func
+  onExited: _propTypes.default.func
 }) : {};
@@ -379,0 +381,0 @@ var _default = CSSTransition;

cjs/ReplaceTransition.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _reactDom = require("react-dom");
+var _reactDom = _interopRequireDefault(require("react-dom"));
 
@@ -107,3 +107,3 @@ var _TransitionGroup = _interopRequireDefault(require("./TransitionGroup"));
     if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
-    if (this.props[handler]) this.props[handler]((0, _reactDom.findDOMNode)(this));
+    if (this.props[handler]) this.props[handler](_reactDom.default.findDOMNode(this));
   };
@@ -110,0 +110,0 @@

cjs/Transition.js

@@ -6,3 +6,3 @@ "use strict";
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,4 +21,2 @@ var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -448,3 +446,3 @@
    */
-  children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.element.isRequired]).isRequired,
 
@@ -454,3 +452,3 @@ /**
    */
-  in: PropTypes.bool,
+  in: _propTypes.default.bool,
 
@@ -463,3 +461,3 @@ /**
    */
-  mountOnEnter: PropTypes.bool,
+  mountOnEnter: _propTypes.default.bool,
 
@@ -470,12 +468,17 @@ /**
    */
-  unmountOnExit: PropTypes.bool,
+  unmountOnExit: _propTypes.default.bool,
 
   /**
-   * Normally a component is not transitioned if it is shown when the `<Transition>` component mounts.
-   * If you want to transition on the first mount set `appear` to `true`, and the
-   * component will transition in as soon as the `<Transition>` mounts.
+   * Normally a component is not transitioned if it is shown when the
+   * `<Transition>` component mounts. If you want to transition on the first
+   * mount set `appear` to `true`, and the component will transition in as soon
+   * as the `<Transition>` mounts.
    *
-   * > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
+   * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
+   * > only adds an additional enter transition. However, in the
+   * > `<CSSTransition>` component that first enter transition does result in
+   * > additional `.appear-*` classes, that way you can choose to style it
+   * > differently.
    */
-  appear: PropTypes.bool,
+  appear: _propTypes.default.bool,
 
@@ -485,3 +488,3 @@ /**
    */
-  enter: PropTypes.bool,
+  enter: _propTypes.default.bool,
 
@@ -491,3 +494,3 @@ /**
    */
-  exit: PropTypes.bool,
+  exit: _propTypes.default.bool,
 
@@ -543,3 +546,3 @@ /**
    */
-  addEndListener: PropTypes.func,
+  addEndListener: _propTypes.default.func,
 
@@ -552,3 +555,3 @@ /**
    */
-  onEnter: PropTypes.func,
+  onEnter: _propTypes.default.func,
 
@@ -561,3 +564,3 @@ /**
    */
-  onEntering: PropTypes.func,
+  onEntering: _propTypes.default.func,
 
@@ -570,3 +573,3 @@ /**
    */
-  onEntered: PropTypes.func,
+  onEntered: _propTypes.default.func,
 
@@ -578,3 +581,3 @@ /**
    */
-  onExit: PropTypes.func,
+  onExit: _propTypes.default.func,
 
@@ -586,3 +589,3 @@ /**
    */
-  onExiting: PropTypes.func,
+  onExiting: _propTypes.default.func,
 
@@ -594,3 +597,3 @@ /**
    */
-  onExited: PropTypes.func // Name the function so it is clearer in the documentation
+  onExited: _propTypes.default.func // Name the function so it is clearer in the documentation
 
@@ -597,0 +600,0 @@ } : {};

dist/react-transition-group.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e=e||self).ReactTransitionGroup={},e.React,e.ReactDOM)}(this,function(e,t,n){"use strict";var r="default"in t?t.default:t,i="default"in n?n.default:n;function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}function s(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function l(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function c(e,t){return e(t={exports:{}},t.exports),t.exports}var u=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}})()&&Object.assign;var f="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";function h(){}var E=c(function(e){e.exports=function(){function e(e,t,n,r,i,o){if(o!==f){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=h,n.PropTypes=n,n}()}),m=(E.object,E.oneOfType,E.element,E.bool,E.func,c(function(e){e.exports=function(e){return e&&e.__esModule?e:{default:e}}}));l(m);var x=c(function(e,t){t.__esModule=!0,t.default=function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")},e.exports=t.default});l(x);var v=l(c(function(e,t){t.__esModule=!0,t.default=function(e,t){e.classList?e.classList.add(t):(0,n.default)(e,t)||("string"==typeof e.className?e.className=e.className+" "+t:e.setAttribute("class",(e.className&&e.className.baseVal||"")+" "+t))};var n=m(x);e.exports=t.default}));function y(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var g={disabled:!1},b=r.createContext(null),C="unmounted",O="exited",S="entering",N="entered",k=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var i,o=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?o?(i=O,r.appearStatus=S):i=N:i=t.unmountOnExit||t.mountOnEnter?C:O,r.state={status:i},r.nextCallback=null,r}s(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&t.status===C?{status:O}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==S&&n!==N&&(t=S):n!==S&&n!==N||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=i.findDOMNode(this);t===S?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&this.state.status===O&&this.setState({status:C})},n.performEnter=function(e,t){var n=this,r=this.props.enter,i=this.context?this.context.isMounting:t,o=this.getTimeouts(),a=i?o.appear:o.enter;!t&&!r||g.disabled?this.safeSetState({status:N},function(){n.props.onEntered(e)}):(this.props.onEnter(e,i),this.safeSetState({status:S},function(){n.props.onEntering(e,i),n.onTransitionEnd(e,a,function(){n.safeSetState({status:N},function(){n.props.onEntered(e,i)})})}))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!g.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,function(){t.safeSetState({status:O},function(){t.props.onExited(e)})})})):this.safeSetState({status:O},function(){t.props.onExited(e)})},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if(e===C)return null;var t=this.props,n=t.children,i=a(t,["children"]);if(delete i.in,delete i.mountOnEnter,delete i.unmountOnExit,delete i.appear,delete i.enter,delete i.exit,delete i.timeout,delete i.addEndListener,delete i.onEnter,delete i.onEntering,delete i.onEntered,delete i.onExit,delete i.onExiting,delete i.onExited,"function"==typeof n)return r.createElement(b.Provider,{value:null},n(e,i));var o=r.Children.only(n);return r.createElement(b.Provider,{value:null},r.cloneElement(o,i))},t}(r.Component);function T(){}k.contextType=b,k.propTypes={},k.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:T,onEntering:T,onEntered:T,onExit:T,onExiting:T,onExited:T},k.UNMOUNTED=0,k.EXITED=1,k.ENTERING=2,k.ENTERED=3,k.EXITING=4;var j=function(e,t){return e&&t&&t.split(" ").forEach(function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=y(n.className,r):n.setAttribute("class",y(n.className&&n.className.baseVal||"",r)));var n,r})},P=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,i=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:i,activeClassName:r?i+"-active":n[e+"Active"],doneClassName:r?i+"-done":n[e+"Done"]}},t}s(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach(function(t){return v(e,t)})}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,i=n.active,o=n.done;this.appliedClasses[t]={},r&&j(e,r),i&&j(e,i),o&&j(e,o)},n.render=function(){var e=this.props,t=(e.classNames,a(e,["classNames"]));return r.createElement(k,o({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(r.Component);function _(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function w(e,n){var r=Object.create(null);return e&&t.Children.map(e,function(e){return e}).forEach(function(e){r[e.key]=function(e){return n&&t.isValidElement(e)?n(e):e}(e)}),r}function L(e,t,n){return null!=n[t]?n[t]:e.props[t]}function M(e,n,r){var i=w(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,i=Object.create(null),o=[];for(var a in e)a in t?o.length&&(i[a]=o,o=[]):o.push(a);var s={};for(var l in t){if(i[l])for(r=0;r<i[l].length;r++){var c=i[l][r];s[i[l][r]]=n(c)}s[l]=n(l)}for(r=0;r<o.length;r++)s[o[r]]=n(o[r]);return s}(n,i);return Object.keys(o).forEach(function(a){var s=o[a];if(t.isValidElement(s)){var l=a in n,c=a in i,u=n[a],p=t.isValidElement(u)&&!u.props.in;!c||l&&!p?c||!l||p?c&&l&&t.isValidElement(u)&&(o[a]=t.cloneElement(s,{onExited:r.bind(null,s),in:u.props.in,exit:L(s,"exit",e),enter:L(s,"enter",e)})):o[a]=t.cloneElement(s,{in:!1}):o[a]=t.cloneElement(s,{onExited:r.bind(null,s),in:!0,exit:L(s,"exit",e),enter:L(s,"enter",e)})}}),o}P.defaultProps={classNames:""},P.propTypes={};var D=Object.values||function(e){return Object.keys(e).map(function(t){return e[t]})},R=function(e){function n(t,n){var r,i=(r=e.call(this,t,n)||this).handleExited.bind(_(_(r)));return r.state={contextValue:{isMounting:!0},handleExited:i,firstRender:!0},r}s(n,e);var i=n.prototype;return i.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},i.componentWillUnmount=function(){this.mounted=!1},n.getDerivedStateFromProps=function(e,n){var r,i,o=n.children,a=n.handleExited;return{children:n.firstRender?(r=e,i=a,w(r.children,function(e){return t.cloneElement(e,{onExited:i.bind(null,e),in:!0,appear:L(e,"appear",r),enter:L(e,"enter",r),exit:L(e,"exit",r)})})):M(e,o,a),firstRender:!1}},i.handleExited=function(e,t){var n=w(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState(function(t){var n=o({},t.children);return delete n[e.key],{children:n}}))},i.render=function(){var e=this.props,t=e.component,n=e.childFactory,i=a(e,["component","childFactory"]),o=this.state.contextValue,s=D(this.state.children).map(n);return delete i.appear,delete i.enter,delete i.exit,null===t?r.createElement(b.Provider,{value:o},s):r.createElement(b.Provider,{value:o},r.createElement(t,i,s))},n}(r.Component);R.propTypes={},R.defaultProps={component:"div",childFactory:function(e){return e}};var A,V,I=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}s(t,e);var i=t.prototype;return i.handleLifecycle=function(e,t,i){var o,a=this.props.children,s=r.Children.toArray(a)[t];s.props[e]&&(o=s.props)[e].apply(o,i),this.props[e]&&this.props[e](n.findDOMNode(this))},i.render=function(){var e=this.props,t=e.children,n=e.in,i=a(e,["children","in"]),o=r.Children.toArray(t),s=o[0],l=o[1];return delete i.onEnter,delete i.onEntering,delete i.onEntered,delete i.onExit,delete i.onExiting,delete i.onExited,r.createElement(R,i,n?r.cloneElement(s,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):r.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(r.Component);I.propTypes={};var F="out-in",U="in-out",q=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},G=((A={})[F]=function(e){var t=e.current,n=e.changeState;return r.cloneElement(t,{in:!1,onExited:q(t,"onExited",function(){n(S,null)})})},A[U]=function(e){var t=e.current,n=e.changeState,i=e.children;return[t,r.cloneElement(i,{in:!0,onEntered:q(i,"onEntered",function(){n(S)})})]},A),W=((V={})[F]=function(e){var t=e.children,n=e.changeState;return r.cloneElement(t,{in:!0,onEntered:q(t,"onEntered",function(){n(N,r.cloneElement(t,{in:!0}))})})},V[U]=function(e){var t=e.current,n=e.children,i=e.changeState;return[r.cloneElement(t,{in:!1,onExited:q(t,"onExited",function(){i(N,r.cloneElement(n,{in:!0}))})}),r.cloneElement(n,{in:!0})]},V),$=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(t=e.call.apply(e,[this].concat(r))||this).state={status:N,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}s(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===S&&e.mode===U?{status:S}:!t.current||(n=t.current,i=e.children,n===i||r.isValidElement(n)&&r.isValidElement(i)&&null!=n.key&&n.key===i.key)?{current:r.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,i},n.render=function(){var e,t=this.props,n=t.children,i=t.mode,o=this.state,a=o.status,s=o.current,l={children:n,current:s,changeState:this.changeState,status:a};switch(a){case S:e=W[i](l);break;case"exiting":e=G[i](l);break;case N:e=s}return r.createElement(b.Provider,{value:{isMounting:!this.appeared}},e)},t}(r.Component);$.propTypes={},$.defaultProps={mode:F},e.CSSTransition=P,e.ReplaceTransition=I,e.SwitchTransition=$,e.Transition=k,e.TransitionGroup=R,e.config=g,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e=e||self).ReactTransitionGroup={},e.React,e.ReactDOM)}(this,function(e,t,n){"use strict";var r="default"in t?t.default:t;function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function s(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function l(e,t){return e(t={exports:{}},t.exports),t.exports}n=n&&n.hasOwnProperty("default")?n.default:n;var c=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}})()&&Object.assign;var d="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";function f(){}var h=l(function(e){e.exports=function(){function e(e,t,n,r,i,o){if(o!==d){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=f,n.PropTypes=n,n}()}),E=(h.object,h.oneOfType,h.element,h.bool,h.func,l(function(e){e.exports=function(e){return e&&e.__esModule?e:{default:e}}}));s(E);var m=l(function(e,t){t.__esModule=!0,t.default=function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")},e.exports=t.default});s(m);var x=s(l(function(e,t){t.__esModule=!0,t.default=function(e,t){e.classList?e.classList.add(t):(0,n.default)(e,t)||("string"==typeof e.className?e.className=e.className+" "+t:e.setAttribute("class",(e.className&&e.className.baseVal||"")+" "+t))};var n=E(m);e.exports=t.default}));function v(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var y={disabled:!1},g=r.createContext(null),b="unmounted",C="exited",O="entering",S="entered",N=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var i,o=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?o?(i=C,r.appearStatus=O):i=S:i=t.unmountOnExit||t.mountOnEnter?b:C,r.state={status:i},r.nextCallback=null,r}a(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&t.status===b?{status:C}:null};var i=t.prototype;return i.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},i.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==O&&n!==S&&(t=O):n!==O&&n!==S||(t="exiting")}this.updateStatus(!1,t)},i.componentWillUnmount=function(){this.cancelNextCallback()},i.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},i.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var r=n.findDOMNode(this);t===O?this.performEnter(r,e):this.performExit(r)}else this.props.unmountOnExit&&this.state.status===C&&this.setState({status:b})},i.performEnter=function(e,t){var n=this,r=this.props.enter,i=this.context?this.context.isMounting:t,o=this.getTimeouts(),a=i?o.appear:o.enter;!t&&!r||y.disabled?this.safeSetState({status:S},function(){n.props.onEntered(e)}):(this.props.onEnter(e,i),this.safeSetState({status:O},function(){n.props.onEntering(e,i),n.onTransitionEnd(e,a,function(){n.safeSetState({status:S},function(){n.props.onEntered(e,i)})})}))},i.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!y.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,function(){t.safeSetState({status:C},function(){t.props.onExited(e)})})})):this.safeSetState({status:C},function(){t.props.onExited(e)})},i.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},i.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},i.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},i.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},i.render=function(){var e=this.state.status;if(e===b)return null;var t=this.props,n=t.children,i=o(t,["children"]);if(delete i.in,delete i.mountOnEnter,delete i.unmountOnExit,delete i.appear,delete i.enter,delete i.exit,delete i.timeout,delete i.addEndListener,delete i.onEnter,delete i.onEntering,delete i.onEntered,delete i.onExit,delete i.onExiting,delete i.onExited,"function"==typeof n)return r.createElement(g.Provider,{value:null},n(e,i));var a=r.Children.only(n);return r.createElement(g.Provider,{value:null},r.cloneElement(a,i))},t}(r.Component);function k(){}N.contextType=g,N.propTypes={},N.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:k,onEntering:k,onEntered:k,onExit:k,onExiting:k,onExited:k},N.UNMOUNTED=0,N.EXITED=1,N.ENTERING=2,N.ENTERED=3,N.EXITING=4;var T=function(e,t){return e&&t&&t.split(" ").forEach(function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=v(n.className,r):n.setAttribute("class",v(n.className&&n.className.baseVal||"",r)));var n,r})},j=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,i=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:i,activeClassName:r?i+"-active":n[e+"Active"],doneClassName:r?i+"-done":n[e+"Done"]}},t}a(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach(function(t){return x(e,t)})}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,i=n.active,o=n.done;this.appliedClasses[t]={},r&&T(e,r),i&&T(e,i),o&&T(e,o)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return r.createElement(N,i({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(r.Component);function P(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function w(e,n){var r=Object.create(null);return e&&t.Children.map(e,function(e){return e}).forEach(function(e){r[e.key]=function(e){return n&&t.isValidElement(e)?n(e):e}(e)}),r}function _(e,t,n){return null!=n[t]?n[t]:e.props[t]}function L(e,n,r){var i=w(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,i=Object.create(null),o=[];for(var a in e)a in t?o.length&&(i[a]=o,o=[]):o.push(a);var s={};for(var l in t){if(i[l])for(r=0;r<i[l].length;r++){var c=i[l][r];s[i[l][r]]=n(c)}s[l]=n(l)}for(r=0;r<o.length;r++)s[o[r]]=n(o[r]);return s}(n,i);return Object.keys(o).forEach(function(a){var s=o[a];if(t.isValidElement(s)){var l=a in n,c=a in i,u=n[a],p=t.isValidElement(u)&&!u.props.in;!c||l&&!p?c||!l||p?c&&l&&t.isValidElement(u)&&(o[a]=t.cloneElement(s,{onExited:r.bind(null,s),in:u.props.in,exit:_(s,"exit",e),enter:_(s,"enter",e)})):o[a]=t.cloneElement(s,{in:!1}):o[a]=t.cloneElement(s,{onExited:r.bind(null,s),in:!0,exit:_(s,"exit",e),enter:_(s,"enter",e)})}}),o}j.defaultProps={classNames:""},j.propTypes={};var M=Object.values||function(e){return Object.keys(e).map(function(t){return e[t]})},D=function(e){function n(t,n){var r,i=(r=e.call(this,t,n)||this).handleExited.bind(P(P(r)));return r.state={contextValue:{isMounting:!0},handleExited:i,firstRender:!0},r}a(n,e);var s=n.prototype;return s.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},s.componentWillUnmount=function(){this.mounted=!1},n.getDerivedStateFromProps=function(e,n){var r,i,o=n.children,a=n.handleExited;return{children:n.firstRender?(r=e,i=a,w(r.children,function(e){return t.cloneElement(e,{onExited:i.bind(null,e),in:!0,appear:_(e,"appear",r),enter:_(e,"enter",r),exit:_(e,"exit",r)})})):L(e,o,a),firstRender:!1}},s.handleExited=function(e,t){var n=w(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState(function(t){var n=i({},t.children);return delete n[e.key],{children:n}}))},s.render=function(){var e=this.props,t=e.component,n=e.childFactory,i=o(e,["component","childFactory"]),a=this.state.contextValue,s=M(this.state.children).map(n);return delete i.appear,delete i.enter,delete i.exit,null===t?r.createElement(g.Provider,{value:a},s):r.createElement(g.Provider,{value:a},r.createElement(t,i,s))},n}(r.Component);D.propTypes={},D.defaultProps={component:"div",childFactory:function(e){return e}};var R,A,V=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}a(t,e);var i=t.prototype;return i.handleLifecycle=function(e,t,i){var o,a=this.props.children,s=r.Children.toArray(a)[t];s.props[e]&&(o=s.props)[e].apply(o,i),this.props[e]&&this.props[e](n.findDOMNode(this))},i.render=function(){var e=this.props,t=e.children,n=e.in,i=o(e,["children","in"]),a=r.Children.toArray(t),s=a[0],l=a[1];return delete i.onEnter,delete i.onEntering,delete i.onEntered,delete i.onExit,delete i.onExiting,delete i.onExited,r.createElement(D,i,n?r.cloneElement(s,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):r.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(r.Component);V.propTypes={};var I="out-in",F="in-out",U=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},q=((R={})[I]=function(e){var t=e.current,n=e.changeState;return r.cloneElement(t,{in:!1,onExited:U(t,"onExited",function(){n(O,null)})})},R[F]=function(e){var t=e.current,n=e.changeState,i=e.children;return[t,r.cloneElement(i,{in:!0,onEntered:U(i,"onEntered",function(){n(O)})})]},R),G=((A={})[I]=function(e){var t=e.children,n=e.changeState;return r.cloneElement(t,{in:!0,onEntered:U(t,"onEntered",function(){n(S,r.cloneElement(t,{in:!0}))})})},A[F]=function(e){var t=e.current,n=e.children,i=e.changeState;return[r.cloneElement(t,{in:!1,onExited:U(t,"onExited",function(){i(S,r.cloneElement(n,{in:!0}))})}),r.cloneElement(n,{in:!0})]},A),W=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(t=e.call.apply(e,[this].concat(r))||this).state={status:S,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}a(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===O&&e.mode===F?{status:O}:!t.current||(n=t.current,i=e.children,n===i||r.isValidElement(n)&&r.isValidElement(i)&&null!=n.key&&n.key===i.key)?{current:r.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,i},n.render=function(){var e,t=this.props,n=t.children,i=t.mode,o=this.state,a=o.status,s=o.current,l={children:n,current:s,changeState:this.changeState,status:a};switch(a){case O:e=G[i](l);break;case"exiting":e=q[i](l);break;case S:e=s}return r.createElement(g.Provider,{value:{isMounting:!this.appeared}},e)},t}(r.Component);W.propTypes={},W.defaultProps={mode:I},e.CSSTransition=j,e.ReplaceTransition=V,e.SwitchTransition=W,e.Transition=N,e.TransitionGroup=D,e.config=y,Object.defineProperty(e,"__esModule",{value:!0})});

esm/CSSTransition.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import addOneClass from 'dom-helpers/class/addClass';
@@ -81,2 +81,6 @@ import removeOneClass from 'dom-helpers/class/removeClass';
  * `*-active` classes represent which styles you want to animate **to**.
+ *
+ * **Note**: If you're using the
+ * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)
+ * prop, make sure to define styles for `.appear-*` classes as well.
  */
@@ -247,9 +251,9 @@
   /**
-   * The animation classNames applied to the component as it enters, exits or
-   * has finished the transition. A single name can be provided and it will be
-   * suffixed for each stage: e.g.
+   * The animation classNames applied to the component as it appears, enters,
+   * exits or has finished the transition. A single name can be provided and it
+   * will be suffixed for each stage: e.g.
    *
-   * `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
-   * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,
-   * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.
+   * `classNames="fade"` applies `fade-appear`, `fade-appear-active`,
+   * `fade-appear-done`, `fade-enter`, `fade-enter-active`, `fade-enter-done`,
+   * `fade-exit`, `fade-exit-active`, and `fade-exit-done`.
    *
@@ -256,0 +260,0 @@ * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.

esm/ReplaceTransition.js

@@ -5,3 +5,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import { findDOMNode } from 'react-dom';
+import ReactDOM from 'react-dom';
 import TransitionGroup from './TransitionGroup';
@@ -93,3 +93,3 @@ /**
     if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
-    if (this.props[handler]) this.props[handler](findDOMNode(this));
+    if (this.props[handler]) this.props[handler](ReactDOM.findDOMNode(this));
   };
@@ -96,0 +96,0 @@

esm/Transition.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -443,7 +443,12 @@ import ReactDOM from 'react-dom';
   /**
-   * Normally a component is not transitioned if it is shown when the `<Transition>` component mounts.
-   * If you want to transition on the first mount set `appear` to `true`, and the
-   * component will transition in as soon as the `<Transition>` mounts.
+   * Normally a component is not transitioned if it is shown when the
+   * `<Transition>` component mounts. If you want to transition on the first
+   * mount set `appear` to `true`, and the component will transition in as soon
+   * as the `<Transition>` mounts.
    *
-   * > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
+   * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
+   * > only adds an additional enter transition. However, in the
+   * > `<CSSTransition>` component that first enter transition does result in
+   * > additional `.appear-*` classes, that way you can choose to style it
+   * > differently.
    */
@@ -450,0 +455,0 @@ appear: PropTypes.bool,

package.json

 {
   "name": "react-transition-group",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "A react component toolset for managing animations",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

211885

increased by0.33%

Lines of code

5228

increased by0.44%

No dependency changes