react-transition-group - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0-beta.0

dist/react-transition-group.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.ReactTransitionGroup=t(require("react"),require("react-dom")):e.ReactTransitionGroup=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=17)}([function(t,n){t.exports=e},function(e,t,n){"use strict";"function"==typeof Symbol&&Symbol.iterator;e.exports=n(14)()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var u=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},s=n(6),l=r(s),c=n(0),p=r(c),f=n(1),d=r(f),m=n(15),h=(r(m),n(18)),y=(d.default.any,d.default.func,d.default.node,{component:"span",childFactory:function(e){return e}}),v=function(e){function t(n,r){o(this,t);var a=i(this,e.call(this,n,r));return a.performAppear=function(e,t){a.currentlyTransitioningKeys[e]=!0,t.componentWillAppear?t.componentWillAppear(a._handleDoneAppearing.bind(a,e,t)):a._handleDoneAppearing(e,t)},a._handleDoneAppearing=function(e,t){t.componentDidAppear&&t.componentDidAppear(),delete a.currentlyTransitioningKeys[e];var n=(0,h.getChildMapping)(a.props.children);n&&n.hasOwnProperty(e)||a.performLeave(e,t)},a.performEnter=function(e,t){a.currentlyTransitioningKeys[e]=!0,t.componentWillEnter?t.componentWillEnter(a._handleDoneEntering.bind(a,e,t)):a._handleDoneEntering(e,t)},a._handleDoneEntering=function(e,t){t.componentDidEnter&&t.componentDidEnter(),delete a.currentlyTransitioningKeys[e];var n=(0,h.getChildMapping)(a.props.children);n&&n.hasOwnProperty(e)||a.performLeave(e,t)},a.performLeave=function(e,t){a.currentlyTransitioningKeys[e]=!0,t.componentWillLeave?t.componentWillLeave(a._handleDoneLeaving.bind(a,e,t)):a._handleDoneLeaving(e,t)},a._handleDoneLeaving=function(e,t){t.componentDidLeave&&t.componentDidLeave(),delete a.currentlyTransitioningKeys[e];var n=(0,h.getChildMapping)(a.props.children);n&&n.hasOwnProperty(e)?a.keysToEnter.push(e):a.setState(function(t){var n=u({},t.children);return delete n[e],{children:n}})},a.childRefs=Object.create(null),a.state={children:(0,h.getChildMapping)(n.children)},a}return a(t,e),t.prototype.componentWillMount=function(){this.currentlyTransitioningKeys={},this.keysToEnter=[],this.keysToLeave=[]},t.prototype.componentDidMount=function(){var e=this.state.children;for(var t in e)e[t]&&this.performAppear(t,this.childRefs[t])},t.prototype.componentWillReceiveProps=function(e){var t=(0,h.getChildMapping)(e.children),n=this.state.children;this.setState({children:(0,h.mergeChildMappings)(n,t)});for(var r in t){var o=n&&n.hasOwnProperty(r);!t[r]||o||this.currentlyTransitioningKeys[r]||this.keysToEnter.push(r)}for(var i in n){var a=t&&t.hasOwnProperty(i);!n[i]||a||this.currentlyTransitioningKeys[i]||this.keysToLeave.push(i)}},t.prototype.componentDidUpdate=function(){var e=this,t=this.keysToEnter;this.keysToEnter=[],t.forEach(function(t){return e.performEnter(t,e.childRefs[t])});var n=this.keysToLeave;this.keysToLeave=[],n.forEach(function(t){return e.performLeave(t,e.childRefs[t])})},t.prototype.render=function(){var e=this,t=[];for(var n in this.state.children)!function(n){var r=e.state.children[n];if(r){var o="string"!=typeof r.ref,i=e.props.childFactory(r),a=function(t){e.childRefs[n]=t};i===r&&o&&(a=(0,l.default)(r.ref,a)),t.push(p.default.cloneElement(i,{key:n,ref:a}))}}(n);var r=u({},this.props);return delete r.transitionLeave,delete r.transitionName,delete r.transitionAppear,delete r.transitionEnter,delete r.childFactory,delete r.transitionLeaveTimeout,delete r.transitionEnterTimeout,delete r.transitionAppearTimeout,delete r.component,p.default.createElement(this.props.component,r,t)},t}(p.default.Component);v.displayName="TransitionGroup",v.propTypes={},v.defaultProps=y,t.default=v,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=!("undefined"==typeof window||!window.document||!window.document.createElement),e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t="transition"+e+"Timeout",n="transition"+e;return function(e){if(e[n]){if(null==e[t])return new Error(t+" wasn't supplied to CSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information.");if("number"!=typeof e[t])return new Error(t+" must be a number (in milliseconds)")}return null}}t.__esModule=!0,t.nameShape=void 0,t.transitionTimeout=o;var i=n(0),a=(r(i),n(1)),u=r(a);t.nameShape=u.default.oneOfType([u.default.string,u.default.shape({enter:u.default.string,leave:u.default.string,active:u.default.string}),u.default.shape({enter:u.default.string,enterActive:u.default.string,leave:u.default.string,leaveActive:u.default.string,appear:u.default.string,appearActive:u.default.string})])},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var u=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},s=n(0),l=r(s),c=n(1),p=r(c),f=n(2),d=r(f),m=n(16),h=r(m),y=n(4),v=(y.nameShape.isRequired,p.default.bool,p.default.bool,p.default.bool,(0,y.transitionTimeout)("Appear"),(0,y.transitionTimeout)("Enter"),(0,y.transitionTimeout)("Leave"),{transitionAppear:!1,transitionEnter:!0,transitionLeave:!0}),g=function(e){function t(){var n,r,a;o(this,t);for(var u=arguments.length,s=Array(u),c=0;c<u;c++)s[c]=arguments[c];return n=r=i(this,e.call.apply(e,[this].concat(s))),r._wrapChild=function(e){return l.default.createElement(h.default,{name:r.props.transitionName,appear:r.props.transitionAppear,enter:r.props.transitionEnter,leave:r.props.transitionLeave,appearTimeout:r.props.transitionAppearTimeout,enterTimeout:r.props.transitionEnterTimeout,leaveTimeout:r.props.transitionLeaveTimeout},e)},a=n,i(r,a)}return a(t,e),t.prototype.render=function(){return l.default.createElement(d.default,u({},this.props,{childFactory:this._wrapChild}))},t}(l.default.Component);g.displayName="CSSTransitionGroup",g.propTypes={},g.defaultProps=v,t.default=g,e.exports=t.default},function(e,t,n){"use strict";e.exports=function(){for(var e=arguments.length,t=[],n=0;n<e;n++)t[n]=arguments[n];if(t=t.filter(function(e){return null!=e}),0!==t.length)return 1===t.length?t[0]:t.reduce(function(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}})}},function(e,t,n){"use strict";function r(e,t){e.classList?e.classList.add(t):(0,i.default)(e)||(e.className=e.className+" "+t)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var o=n(8),i=function(e){return e&&e.__esModule?e:{default:e}}(o);e.exports=t.default},function(e,t,n){"use strict";function r(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+e.className+" ").indexOf(" "+t+" ")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r,e.exports=t.default},function(e,t,n){"use strict";e.exports=function(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.animationEnd=t.animationDelay=t.animationTiming=t.animationDuration=t.animationName=t.transitionEnd=t.transitionDuration=t.transitionDelay=t.transitionTiming=t.transitionProperty=t.transform=void 0;var r=n(3),o=function(e){return e&&e.__esModule?e:{default:e}}(r),i="transform",a=void 0,u=void 0,s=void 0,l=void 0,c=void 0,p=void 0,f=void 0,d=void 0,m=void 0,h=void 0,y=void 0;if(o.default){var v=function(){for(var e=document.createElement("div").style,t={O:function(e){return"o"+e.toLowerCase()},Moz:function(e){return e.toLowerCase()},Webkit:function(e){return"webkit"+e},ms:function(e){return"MS"+e}},n=Object.keys(t),r=void 0,o=void 0,i="",a=0;a<n.length;a++){var u=n[a];if(u+"TransitionProperty"in e){i="-"+u.toLowerCase(),r=t[u]("TransitionEnd"),o=t[u]("AnimationEnd");break}}return!r&&"transitionProperty"in e&&(r="transitionend"),!o&&"animationName"in e&&(o="animationend"),e=null,{animationEnd:o,transitionEnd:r,prefix:i}}();a=v.prefix,t.transitionEnd=u=v.transitionEnd,t.animationEnd=s=v.animationEnd,t.transform=i=a+"-"+i,t.transitionProperty=l=a+"-transition-property",t.transitionDuration=c=a+"-transition-duration",t.transitionDelay=f=a+"-transition-delay",t.transitionTiming=p=a+"-transition-timing-function",t.animationName=d=a+"-animation-name",t.animationDuration=m=a+"-animation-duration",t.animationTiming=h=a+"-animation-delay",t.animationDelay=y=a+"-animation-timing-function"}t.transform=i,t.transitionProperty=l,t.transitionTiming=p,t.transitionDelay=f,t.transitionDuration=c,t.transitionEnd=u,t.animationName=d,t.animationDuration=m,t.animationTiming=h,t.animationDelay=y,t.animationEnd=s,t.default={transform:i,end:u,property:l,timing:p,delay:f,duration:c}},function(e,t,n){"use strict";function r(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-p)),r=setTimeout(e,n);return p=t,r}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=function(e){return e&&e.__esModule?e:{default:e}}(o),a=["","webkit","moz","o","ms"],u="clearTimeout",s=r,l=void 0,c=function(e,t){return e+(e?t[0].toUpperCase()+t.substr(1):t)+"AnimationFrame"};i.default&&a.some(function(e){var t=c(e,"request");if(t in window)return u=c(e,"cancel"),s=function(e){return window[t](e)}});var p=(new Date).getTime();l=function(e){return s(e)},l.cancel=function(e){window[u]&&"function"==typeof window[u]&&window[u](e)},t.default=l,e.exports=t.default},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,i,a,u,s){if(o(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,u,s],p=0;l=new Error(t.replace(/%s/g,function(){return c[p++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(12),o=n(13);e.exports=function(){function e(){o(!1)}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};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";var r=function(){};e.exports=r},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e,t){return w.length?w.forEach(function(n){return e.addEventListener(n,t,!1)}):setTimeout(t,0),function(){w.length&&w.forEach(function(n){return e.removeEventListener(n,t,!1)})}}t.__esModule=!0;var s=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},l=n(7),c=r(l),p=n(9),f=r(p),d=n(11),m=r(d),h=n(10),y=n(0),v=r(y),g=n(1),T=r(g),b=n(19),E=n(4),w=[];h.transitionEnd&&w.push(h.transitionEnd),h.animationEnd&&w.push(h.animationEnd);var _=(T.default.node,E.nameShape.isRequired,T.default.bool,T.default.bool,T.default.bool,T.default.number,T.default.number,T.default.number,function(e){function t(){var n,r,a;o(this,t);for(var u=arguments.length,s=Array(u),l=0;l<u;l++)s[l]=arguments[l];return n=r=i(this,e.call.apply(e,[this].concat(s))),r.componentWillAppear=function(e){r.props.appear?r.transition("appear",e,r.props.appearTimeout):e()},r.componentWillEnter=function(e){r.props.enter?r.transition("enter",e,r.props.enterTimeout):e()},r.componentWillLeave=function(e){r.props.leave?r.transition("leave",e,r.props.leaveTimeout):e()},a=n,i(r,a)}return a(t,e),t.prototype.componentWillMount=function(){this.classNameAndNodeQueue=[],this.transitionTimeouts=[]},t.prototype.componentWillUnmount=function(){this.unmounted=!0,this.timeout&&clearTimeout(this.timeout),this.transitionTimeouts.forEach(function(e){clearTimeout(e)}),this.classNameAndNodeQueue.length=0},t.prototype.transition=function(e,t,n){var r=(0,b.findDOMNode)(this);if(!r)return void(t&&t());var o=this.props.name[e]||this.props.name+"-"+e,i=this.props.name[e+"Active"]||o+"-active",a=null,s=void 0;(0,c.default)(r,o),this.queueClassAndNode(i,r);var l=function(e){e&&e.target!==r||(clearTimeout(a),s&&s(),(0,f.default)(r,o),(0,f.default)(r,i),s&&s(),t&&t())};n?(a=setTimeout(l,n),this.transitionTimeouts.push(a)):h.transitionEnd&&(s=u(r,l))},t.prototype.queueClassAndNode=function(e,t){var n=this;this.classNameAndNodeQueue.push({className:e,node:t}),this.rafHandle||(this.rafHandle=(0,m.default)(function(){return n.flushClassNameAndNodeQueue()}))},t.prototype.flushClassNameAndNodeQueue=function(){this.unmounted||this.classNameAndNodeQueue.forEach(function(e){e.node.scrollTop,(0,c.default)(e.node,e.className)}),this.classNameAndNodeQueue.length=0,this.rafHandle=null},t.prototype.render=function(){var e=s({},this.props);return delete e.name,delete e.appear,delete e.enter,delete e.leave,delete e.appearTimeout,delete e.enterTimeout,delete e.leaveTimeout,delete e.children,v.default.cloneElement(v.default.Children.only(this.props.children),e)},t}(v.default.Component));_.displayName="CSSTransitionGroupChild",_.propTypes={},t.default=_,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var o=n(5),i=r(o),a=n(2),u=r(a);e.exports={TransitionGroup:u.default,CSSTransitionGroup:i.default}},function(e,t,n){"use strict";function r(e){if(!e)return e;var t={};return i.Children.map(e,function(e){return e}).forEach(function(e){t[e.key]=e}),t}function o(e,t){function n(n){return t.hasOwnProperty(n)?t[n]:e[n]}e=e||{},t=t||{};var r={},o=[];for(var i in e)t.hasOwnProperty(i)?o.length&&(r[i]=o,o=[]):o.push(i);var a=void 0,u={};for(var s in t){if(r.hasOwnProperty(s))for(a=0;a<r[s].length;a++){var l=r[s][a];u[r[s][a]]=n(l)}u[s]=n(s)}for(a=0;a<o.length;a++)u[o[a]]=n(o[a]);return u}t.__esModule=!0,t.getChildMapping=r,t.mergeChildMappings=o;var i=n(0)},function(e,n){e.exports=t}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):"object"==typeof exports?exports.ReactTransitionGroup=e(require("react"),require("react-dom")):t.ReactTransitionGroup=e(t.React,t.ReactDOM)}(this,function(t,e){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=12)}([function(t,e,n){"use strict";"function"==typeof Symbol&&Symbol.iterator;t.exports=n(11)()},function(e,n){e.exports=t},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(){}e.__esModule=!0,e.EXITING=e.ENTERED=e.ENTERING=e.EXITED=e.UNMOUNTED=void 0;var l=n(0),c=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(l),p=n(1),f=r(p),d=n(14),h=r(d),E=(n(3),e.UNMOUNTED="unmounted"),m=e.EXITED="exited",x=e.ENTERING="entering",v=e.ENTERED="entered",y=e.EXITING="exiting",b=function(t){function e(n,r){i(this,e);var o=a(this,t.call(this,n,r)),s=r.transitionGroup,u=s&&!s.isMounting?n.enter:n.appear,l=void 0;return o.nextStatus=null,n.in?u?(l=m,o.nextStatus=x):l=v:l=n.unmountOnExit||n.mountOnEnter?E:m,o.state={status:l},o.nextCallback=null,o}return s(e,t),e.prototype.getChildContext=function(){return{transitionGroup:null}},e.prototype.componentDidMount=function(){this.updateStatus(!0)},e.prototype.componentWillReceiveProps=function(t){var e=this.state.status;t.in?(e===E&&this.setState({status:m}),e!==x&&e!==v&&(this.nextStatus=x)):e!==x&&e!==v||(this.nextStatus=y)},e.prototype.componentDidUpdate=function(){this.updateStatus()},e.prototype.componentWillUnmount=function(){this.cancelNextCallback()},e.prototype.getTimeouts=function(){var t=this.props.timeout,e=void 0,n=void 0,r=void 0;return e=n=r=t,"number"!=typeof t&&(e=t.exit,n=t.enter,r=t.appear),{exit:e,enter:n,appear:r}},e.prototype.updateStatus=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(null!==this.nextStatus){this.cancelNextCallback();var e=h.default.findDOMNode(this);this.nextStatus===x?this.performEnter(e,t):this.performExit(e),this.nextStatus=null}else this.props.unmountOnExit&&this.state.status===m&&this.setState({status:E})},e.prototype.performEnter=function(t,e){var n=this,r=this.props.enter,o=this.context.transitionGroup?this.context.transitionGroup.isMounting:e,i=this.getTimeouts();if(!e&&!r)return void this.safeSetState({status:v},function(){n.props.onEntered(t)});this.props.onEnter(t,o),this.safeSetState({status:x},function(){n.props.onEntering(t,o),n.onTransitionEnd(t,i.enter,function(){n.safeSetState({status:v},function(){n.props.onEntered(t,o)})})})},e.prototype.performExit=function(t){var e=this,n=this.props.exit,r=this.getTimeouts();if(!n)return void this.safeSetState({status:m},function(){e.props.onExited(t)});this.props.onExit(t),this.safeSetState({status:y},function(){e.props.onExiting(t),e.onTransitionEnd(t,r.exit,function(){e.safeSetState({status:m},function(){e.props.onExited(t)})})})},e.prototype.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},e.prototype.safeSetState=function(t,e){this.setState(t,this.setNextCallback(e))},e.prototype.setNextCallback=function(t){var e=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,e.nextCallback=null,t(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},e.prototype.onTransitionEnd=function(t,e,n){this.setNextCallback(n),t?(this.props.addEndListener&&this.props.addEndListener(t,this.nextCallback),setTimeout(this.nextCallback,e)):setTimeout(this.nextCallback,0)},e.prototype.render=function(){var t=this.state.status;if(t===E)return null;var n=this.props,r=n.children,i=o(n,["children"]);if(Object.keys(e.propTypes).forEach(function(t){return delete i[t]}),"function"==typeof r)return r(t,i);var a=f.default.Children.only(r);return f.default.cloneElement(a,i)},e}(f.default.Component);b.contextTypes={transitionGroup:c.object},b.childContextTypes={transitionGroup:function(){}},b.propTypes={},b.defaultProps={in:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:u,onEntering:u,onEntered:u,onExit:u,onExiting:u,onExited:u},b.UNMOUNTED=0,b.EXITED=1,b.ENTERING=2,b.ENTERED=3,b.EXITING=4,e.default=b},function(t,e,n){"use strict";function r(t){var e="transition"+t+"Timeout",n="transition"+t;return function(t){if(t[n]){if(null==t[e])return new Error(e+" wasn't supplied to CSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information.");if("number"!=typeof t[e])return new Error(e+" must be a number (in milliseconds)")}return null}}e.__esModule=!0,e.classNamesShape=e.timeoutsShape=void 0,e.transitionTimeout=r;var o=n(0),i=function(t){return t&&t.__esModule?t:{default:t}}(o);e.timeoutsShape=i.default.oneOfType([i.default.number,i.default.shape({enter:i.default.number,exit:i.default.number}).isRequired]).isRequired,e.classNamesShape=i.default.oneOfType([i.default.string,i.default.shape({enter:i.default.string,leave:i.default.string,active:i.default.string}),i.default.shape({enter:i.default.string,enterActive:i.default.string,leave:i.default.string,leaveActive:i.default.string})])},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0;var s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},u=n(0),l=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(u),c=n(6),p=r(c),f=n(8),d=r(f),h=n(1),E=r(h),m=n(2),x=r(m),v=n(3),y=(s({},x.default.propTypes,{classNames:v.classNamesShape,onEnter:l.func,onEntering:l.func,onEntered:l.func,onExit:l.func,onExiting:l.func,onExited:l.func}),function(t){function e(){var n,r,a;o(this,e);for(var s=arguments.length,u=Array(s),l=0;l<s;l++)u[l]=arguments[l];return n=r=i(this,t.call.apply(t,[this].concat(u))),r.onEnter=function(t,e){var n=r.getClassNames(e?"appear":"enter"),o=n.className;r.removeClasses(t,"exit"),(0,p.default)(t,o),r.props.onEnter&&r.props.onEnter(t)},r.onEntering=function(t,e){var n=r.getClassNames(e?"appear":"enter"),o=n.activeClassName;r.reflowAndAddClass(t,o),r.props.onEntering&&r.props.onEntering(t)},r.onEntered=function(t,e){r.removeClasses(t,e?"appear":"enter"),r.props.onEntered&&r.props.onEntered(t)},r.onExit=function(t){var e=r.getClassNames("exit"),n=e.className;r.removeClasses(t,"appear"),r.removeClasses(t,"exit"),(0,p.default)(t,n),r.props.onExit&&r.props.onExit(t)},r.onExiting=function(t){var e=r.getClassNames("exit"),n=e.activeClassName;r.reflowAndAddClass(t,n),r.props.onExiting&&r.props.onExiting(t)},r.onExited=function(t){r.removeClasses(t,"exit"),r.props.onExited&&r.props.onExited(t)},r.getClassNames=function(t){var e=r.props.classNames,n="string"!=typeof e?e[t]:e+"-"+t;return{className:n,activeClassName:"string"!=typeof e?e[t+"Active"]:n+"-active"}},a=n,i(r,a)}return a(e,t),e.prototype.removeClasses=function(t,e){var n=this.getClassNames(e),r=n.className,o=n.activeClassName;r&&(0,d.default)(t,r),o&&(0,d.default)(t,o)},e.prototype.reflowAndAddClass=function(t,e){t.scrollTop,(0,p.default)(t,e)},e.prototype.render=function(){var t=s({},this.props);return delete t.classNames,E.default.createElement(x.default,s({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},e}(E.default.Component));y.propTypes={},e.default=y,t.exports=e.default},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0;var u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},l=n(0),c=r(l),p=n(1),f=r(p),d=n(13),h=Object.values||function(t){return Object.keys(t).map(function(e){return t[e]})},E=(c.default.any,c.default.node,c.default.bool,c.default.bool,c.default.bool,{component:"div"}),m=function(t){function e(n,r){i(this,e);var o=a(this,t.call(this,n,r));return o.handleExited=function(t){var e=(0,d.getChildMapping)(o.props.children);t in e||o.setState(function(e){var n=u({},e.children);return delete n[t],{children:n}})},o.state={children:(0,d.getChildMapping)(n.children,function(t){var e=function(){return o.handleExited(t.key)};return(0,p.cloneElement)(t,{onExited:e,in:!0,appear:o.getProp(t,"appear"),enter:o.getProp(t,"enter"),exit:o.getProp(t,"exit")})})},o}return s(e,t),e.prototype.getChildContext=function(){return{transitionGroup:{isMounting:!this.appeared}}},e.prototype.getProp=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.props;return null!=n[e]?n[e]:t.props[e]},e.prototype.componentDidMount=function(){this.appeared=!0},e.prototype.componentWillReceiveProps=function(t){var e=this,n=this.state.children,r=(0,d.getChildMapping)(t.children),o=(0,d.mergeChildMappings)(n,r);Object.keys(o).forEach(function(i){var a=o[i];if((0,p.isValidElement)(a)){var s=function(){return e.handleExited(i)},u=i in n,l=i in r,c=n[i],f=(0,p.isValidElement)(c)&&!c.props.in;!l||u&&!f?l||!u||f?l&&u&&(0,p.isValidElement)(c)&&(o[i]=(0,p.cloneElement)(a,{onExited:s,in:c.props.in,exit:e.getProp(a,"exit",t),enter:e.getProp(a,"enter",t)})):o[i]=(0,p.cloneElement)(a,{in:!1}):o[i]=(0,p.cloneElement)(a,{onExited:s,in:!0,exit:e.getProp(a,"exit",t),enter:e.getProp(a,"enter",t)})}}),this.setState({children:o})},e.prototype.render=function(){var t=this.props,e=t.component,n=o(t,["component"]),r=this.state.children;return delete n.appear,delete n.enter,delete n.exit,f.default.createElement(e,n,h(r))},e}(f.default.Component);m.displayName="TransitionGroup",m.childContextTypes={transitionGroup:c.default.object.isRequired},m.propTypes={},m.defaultProps=E,e.default=m,t.exports=e.default},function(t,e,n){"use strict";function r(t,e){t.classList?t.classList.add(e):(0,i.default)(t)||(t.className=t.className+" "+e)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var o=n(7),i=function(t){return t&&t.__esModule?t:{default:t}}(o);t.exports=e.default},function(t,e,n){"use strict";function r(t,e){return t.classList?!!e&&t.classList.contains(e):-1!==(" "+t.className+" ").indexOf(" "+e+" ")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r,t.exports=e.default},function(t,e,n){"use strict";t.exports=function(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s)"+e+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}},function(t,e,n){"use strict";function r(t){return function(){return t}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(t){return t},t.exports=o},function(t,e,n){"use strict";function r(t,e,n,r,i,a,s,u){if(o(e),!t){var l;if(void 0===e)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,s,u],p=0;l=new Error(e.replace(/%s/g,function(){return c[p++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(t){};t.exports=r},function(t,e,n){"use strict";var r=n(9),o=n(10);t.exports=function(){function t(){o(!1)}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e};return n.checkPropTypes=r,n.PropTypes=n,n}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}var o=n(4),i=r(o),a=n(5),s=r(a),u=n(2),l=r(u);t.exports={Transition:l.default,TransitionGroup:s.default,CSSTransition:i.default}},function(t,e,n){"use strict";function r(t,e){var n=function(t){return e&&(0,i.isValidElement)(t)?e(t):t},r=Object.create(null);return t&&i.Children.map(t,function(t){return t}).forEach(function(t){r[t.key]=n(t)}),r}function o(t,e){function n(n){return n in e?e[n]:t[n]}t=t||{},e=e||{};var r=Object.create(null),o=[];for(var i in t)i in e?o.length&&(r[i]=o,o=[]):o.push(i);var a=void 0,s={};for(var u in e){if(r[u])for(a=0;a<r[u].length;a++){var l=r[u][a];s[r[u][a]]=n(l)}s[u]=n(u)}for(a=0;a<o.length;a++)s[o[a]]=n(o[a]);return s}e.__esModule=!0,e.getChildMapping=r,e.mergeChildMappings=o;var i=n(1)},function(t,n){t.exports=e}])});

index.js

 'use strict';
 
-var _CSSTransitionGroup = require('./CSSTransitionGroup');
+var _CSSTransition = require('./CSSTransition');
 
-var _CSSTransitionGroup2 = _interopRequireDefault(_CSSTransitionGroup);
+var _CSSTransition2 = _interopRequireDefault(_CSSTransition);
 
@@ -11,7 +11,12 @@ var _TransitionGroup = require('./TransitionGroup');
 
+var _Transition = require('./Transition');
+
+var _Transition2 = _interopRequireDefault(_Transition);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 module.exports = {
+  Transition: _Transition2.default,
   TransitionGroup: _TransitionGroup2.default,
-  CSSTransitionGroup: _CSSTransitionGroup2.default
+  CSSTransition: _CSSTransition2.default
 };

package.json

 {
   "name": "react-transition-group",
-  "version": "1.2.0",
+  "version": "2.0.0-beta.0",
   "description": "A react component toolset for managing animations",
@@ -29,4 +29,3 @@ "main": "index.js",
       "<rootDir>/test"
-    ],
-    "timers": "fake"
+    ]
   },
@@ -39,5 +38,6 @@ "peerDependencies": {
     "chain-function": "^1.0.0",
+    "classnames": "^2.2.5",
     "dom-helpers": "^3.2.0",
     "loose-envify": "^1.3.1",
-    "prop-types": "^15.5.6",
+    "prop-types": "^15.5.8",
     "warning": "^3.0.0"
@@ -44,0 +44,0 @@ },

TransitionGroup.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var _chainFunction = require('chain-function');
+var _propTypes = require('prop-types');
 
-var _chainFunction2 = _interopRequireDefault(_chainFunction);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
@@ -16,10 +16,2 @@ var _react = require('react');
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _warning = require('warning');
-
-var _warning2 = _interopRequireDefault(_warning);
-
 var _ChildMapping = require('./utils/ChildMapping');
@@ -29,2 +21,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -36,15 +30,102 @@
 
+var values = Object.values || function (obj) {
+  return Object.keys(obj).map(function (k) {
+    return obj[k];
+  });
+};
+
 var propTypes = {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   */
   component: _propTypes2.default.any,
-  childFactory: _propTypes2.default.func,
-  children: _propTypes2.default.node
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them throguh if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   */
+  children: _propTypes2.default.node,
+
+  /**
+   * A convenience prop that enables or disabled appear animations
+   * for all children. Note that specifiying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: _propTypes2.default.bool,
+  /**
+   * A convenience prop that enables or disabled enter animations
+   * for all children. Note that specifiying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: _propTypes2.default.bool,
+  /**
+    * A convenience prop that enables or disabled exit animations
+    * for all children. Note that specifiying this will override any defaults set
+    * on individual children Transitions.
+    */
+  exit: _propTypes2.default.bool
 };
 
 var defaultProps = {
-  component: 'span',
-  childFactory: function childFactory(child) {
-    return child;
-  }
+  component: 'div'
 };
 
+/**
+ * The `<TransitionGroup>` component manages a set of `<Transition>` components
+ * in a list. Like with the `<Transition>` component, `<TransitionGroup>`, is a
+ * state machine for managing the mounting and unmounting of components over
+ * time.
+ *
+ * Consider the example below using the `Fade` CSS transition from before.
+ * As items are removed or added to the TodoList the `in` prop is toggled
+ * automatically by the `<TransitionGroup>`. You can use _any_ `<Transition>`
+ * component in a `<TransitionGroup>`, not just css.
+ *
+ * ```js
+ * class TodoList extends React.Component {
+ *   constructor(props) {
+ *     super(props)
+ *     this.state = {items: ['hello', 'world', 'click', 'me']}
+ *   }
+ *   handleAdd = () => {
+ *     const newItems = this.state.items.concat([
+ *       prompt('Enter some text')
+ *     ]);
+ *     this.setState({ items: newItems });
+ *   }
+ *   handleRemove(i) {
+ *     let newItems = this.state.items.slice();
+ *     newItems.splice(i, 1);
+ *     this.setState({items: newItems});
+ *   }
+ *   render() {
+ *     return (
+ *       <div>
+ *         <button onClick={this.handleAdd}>Add Item</button>
+ *         <TransitionGroup>
+ *           {this.state.items.map((item, i) => (
+ *             <Fade key={item}>
+ *               <div>
+ *                 {item}{' '}
+ *                 <button onClick={() => this.handleRemove(i)}>
+ *                   remove
+ *                 </button>
+ *               </div>
+ *             </Fade>
+ *           ))}
+ *         </TransitionGroup>
+ *       </div>
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * Note that `<TransitionGroup>`  does not define any animation behavior!
+ * Exactly _how_ a list item animates is up to the individual `<Transition>`
+ * components. This means you can mix and match animations across different
+ * list items.
+ */
+
 var TransitionGroup = function (_React$Component) {
@@ -56,207 +137,123 @@ _inherits(TransitionGroup, _React$Component);
 
+    // Initial children should all be entering, dependent on appear
     var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
 
-    _this.performAppear = function (key, component) {
-      _this.currentlyTransitioningKeys[key] = true;
-
-      if (component.componentWillAppear) {
-        component.componentWillAppear(_this._handleDoneAppearing.bind(_this, key, component));
-      } else {
-        _this._handleDoneAppearing(key, component);
-      }
-    };
-
-    _this._handleDoneAppearing = function (key, component) {
-      if (component.componentDidAppear) {
-        component.componentDidAppear();
-      }
-
-      delete _this.currentlyTransitioningKeys[key];
-
+    _this.handleExited = function (key) {
       var currentChildMapping = (0, _ChildMapping.getChildMapping)(_this.props.children);
 
-      if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
-        // This was removed before it had fully appeared. Remove it.
-        _this.performLeave(key, component);
-      }
-    };
+      if (key in currentChildMapping) return;
 
-    _this.performEnter = function (key, component) {
-      _this.currentlyTransitioningKeys[key] = true;
-
-      if (component.componentWillEnter) {
-        component.componentWillEnter(_this._handleDoneEntering.bind(_this, key, component));
-      } else {
-        _this._handleDoneEntering(key, component);
-      }
+      _this.setState(function (state) {
+        var children = _extends({}, state.children);
+        delete children[key];
+        return { children: children };
+      });
     };
 
-    _this._handleDoneEntering = function (key, component) {
-      if (component.componentDidEnter) {
-        component.componentDidEnter();
-      }
-
-      delete _this.currentlyTransitioningKeys[key];
-
-      var currentChildMapping = (0, _ChildMapping.getChildMapping)(_this.props.children);
-
-      if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
-        // This was removed before it had fully entered. Remove it.
-        _this.performLeave(key, component);
-      }
+    _this.state = {
+      children: (0, _ChildMapping.getChildMapping)(props.children, function (child) {
+        var onExited = function onExited() {
+          return _this.handleExited(child.key);
+        };
+        return (0, _react.cloneElement)(child, {
+          onExited: onExited,
+          in: true,
+          appear: _this.getProp(child, 'appear'),
+          enter: _this.getProp(child, 'enter'),
+          exit: _this.getProp(child, 'exit')
+        });
+      })
     };
+    return _this;
+  }
 
-    _this.performLeave = function (key, component) {
-      _this.currentlyTransitioningKeys[key] = true;
-
-      if (component.componentWillLeave) {
-        component.componentWillLeave(_this._handleDoneLeaving.bind(_this, key, component));
-      } else {
-        // Note that this is somewhat dangerous b/c it calls setState()
-        // again, effectively mutating the component before all the work
-        // is done.
-        _this._handleDoneLeaving(key, component);
-      }
+  TransitionGroup.prototype.getChildContext = function getChildContext() {
+    return {
+      transitionGroup: { isMounting: !this.appeared }
     };
+  };
+  // use child config unless explictly set by the Group
 
-    _this._handleDoneLeaving = function (key, component) {
-      if (component.componentDidLeave) {
-        component.componentDidLeave();
-      }
 
-      delete _this.currentlyTransitioningKeys[key];
+  TransitionGroup.prototype.getProp = function getProp(child, prop) {
+    var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props;
 
-      var currentChildMapping = (0, _ChildMapping.getChildMapping)(_this.props.children);
-
-      if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) {
-        // This entered again before it fully left. Add it again.
-        _this.keysToEnter.push(key);
-      } else {
-        _this.setState(function (state) {
-          var newChildren = _extends({}, state.children);
-          delete newChildren[key];
-          return { children: newChildren };
-        });
-      }
-    };
-
-    _this.childRefs = Object.create(null);
-
-    _this.state = {
-      children: (0, _ChildMapping.getChildMapping)(props.children)
-    };
-    return _this;
-  }
-
-  TransitionGroup.prototype.componentWillMount = function componentWillMount() {
-    this.currentlyTransitioningKeys = {};
-    this.keysToEnter = [];
-    this.keysToLeave = [];
+    return props[prop] != null ? props[prop] : child.props[prop];
   };
 
   TransitionGroup.prototype.componentDidMount = function componentDidMount() {
-    var initialChildMapping = this.state.children;
-    for (var key in initialChildMapping) {
-      if (initialChildMapping[key]) {
-        this.performAppear(key, this.childRefs[key]);
-      }
-    }
+    this.appeared = true;
   };
 
   TransitionGroup.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var _this2 = this;
+
+    var prevChildMapping = this.state.children;
     var nextChildMapping = (0, _ChildMapping.getChildMapping)(nextProps.children);
-    var prevChildMapping = this.state.children;
 
-    this.setState({
-      children: (0, _ChildMapping.mergeChildMappings)(prevChildMapping, nextChildMapping)
-    });
+    var children = (0, _ChildMapping.mergeChildMappings)(prevChildMapping, nextChildMapping);
 
-    for (var key in nextChildMapping) {
-      var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
-      if (nextChildMapping[key] && !hasPrev && !this.currentlyTransitioningKeys[key]) {
-        this.keysToEnter.push(key);
-      }
-    }
+    Object.keys(children).forEach(function (key) {
+      var child = children[key];
 
-    for (var _key in prevChildMapping) {
-      var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(_key);
-      if (prevChildMapping[_key] && !hasNext && !this.currentlyTransitioningKeys[_key]) {
-        this.keysToLeave.push(_key);
-      }
-    }
+      if (!(0, _react.isValidElement)(child)) return;
 
-    // If we want to someday check for reordering, we could do it here.
-  };
+      var onExited = function onExited() {
+        return _this2.handleExited(key);
+      };
 
-  TransitionGroup.prototype.componentDidUpdate = function componentDidUpdate() {
-    var _this2 = this;
+      var hasPrev = key in prevChildMapping;
+      var hasNext = key in nextChildMapping;
 
-    var keysToEnter = this.keysToEnter;
-    this.keysToEnter = [];
-    keysToEnter.forEach(function (key) {
-      return _this2.performEnter(key, _this2.childRefs[key]);
+      var prevChild = prevChildMapping[key];
+      var isLeaving = (0, _react.isValidElement)(prevChild) && !prevChild.props.in;
+
+      // item is new (entering)
+      if (hasNext && (!hasPrev || isLeaving)) {
+        // console.log('entering', key)
+        children[key] = (0, _react.cloneElement)(child, {
+          onExited: onExited,
+          in: true,
+          exit: _this2.getProp(child, 'exit', nextProps),
+          enter: _this2.getProp(child, 'enter', nextProps)
+        });
+      }
+      // item is old (exiting)
+      else if (!hasNext && hasPrev && !isLeaving) {
+          // console.log('leaving', key)
+          children[key] = (0, _react.cloneElement)(child, { in: false });
+        }
+        // item hasn't changed transition states
+        // copy over the last transition props;
+        else if (hasNext && hasPrev && (0, _react.isValidElement)(prevChild)) {
+            // console.log('unchanged', key)
+            children[key] = (0, _react.cloneElement)(child, {
+              onExited: onExited,
+              in: prevChild.props.in,
+              exit: _this2.getProp(child, 'exit', nextProps),
+              enter: _this2.getProp(child, 'enter', nextProps)
+            });
+          }
     });
 
-    var keysToLeave = this.keysToLeave;
-    this.keysToLeave = [];
-    keysToLeave.forEach(function (key) {
-      return _this2.performLeave(key, _this2.childRefs[key]);
-    });
+    this.setState({ children: children });
   };
 
   TransitionGroup.prototype.render = function render() {
-    var _this3 = this;
+    var _props = this.props,
+        Component = _props.component,
+        props = _objectWithoutProperties(_props, ['component']);
 
-    // TODO: we could get rid of the need for the wrapper node
-    // by cloning a single child
-    var childrenToRender = [];
+    var children = this.state.children;
 
-    var _loop = function _loop(key) {
-      var child = _this3.state.children[key];
-      if (child) {
-        var isCallbackRef = typeof child.ref !== 'string';
-        var factoryChild = _this3.props.childFactory(child);
-        var ref = function ref(r) {
-          _this3.childRefs[key] = r;
-        };
 
-        process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(isCallbackRef, 'string refs are not supported on children of TransitionGroup and will be ignored. ' + 'Please use a callback ref instead: https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute') : void 0;
+    delete props.appear;
+    delete props.enter;
+    delete props.exit;
 
-        // Always chaining the refs leads to problems when the childFactory
-        // wraps the child. The child ref callback gets called twice with the
-        // wrapper and the child. So we only need to chain the ref if the
-        // factoryChild is not different from child.
-        if (factoryChild === child && isCallbackRef) {
-          ref = (0, _chainFunction2.default)(child.ref, ref);
-        }
-
-        // You may need to apply reactive updates to a child as it is leaving.
-        // The normal React way to do it won't work since the child will have
-        // already been removed. In case you need this behavior you can provide
-        // a childFactory function to wrap every child, even the ones that are
-        // leaving.
-        childrenToRender.push(_react2.default.cloneElement(factoryChild, {
-          key: key,
-          ref: ref
-        }));
-      }
-    };
-
-    for (var key in this.state.children) {
-      _loop(key);
-    }
-
-    // Do not forward TransitionGroup props to primitive DOM nodes
-    var props = _extends({}, this.props);
-    delete props.transitionLeave;
-    delete props.transitionName;
-    delete props.transitionAppear;
-    delete props.transitionEnter;
-    delete props.childFactory;
-    delete props.transitionLeaveTimeout;
-    delete props.transitionEnterTimeout;
-    delete props.transitionAppearTimeout;
-    delete props.component;
-
-    return _react2.default.createElement(this.props.component, props, childrenToRender);
+    return _react2.default.createElement(
+      Component,
+      props,
+      values(children)
+    );
   };
@@ -268,2 +265,5 @@
 TransitionGroup.displayName = 'TransitionGroup';
+TransitionGroup.childContextTypes = {
+  transitionGroup: _propTypes2.default.object.isRequired
+};
 
@@ -270,0 +270,0 @@

utils/ChildMapping.js

@@ -15,11 +15,13 @@ 'use strict';
  */
-function getChildMapping(children) {
-  if (!children) {
-    return children;
-  }
-  var result = {};
-  _react.Children.map(children, function (child) {
-    return child;
+function getChildMapping(children, mapFn) {
+  var mapper = function mapper(child) {
+    return mapFn && (0, _react.isValidElement)(child) ? mapFn(child) : child;
+  };
+
+  var result = Object.create(null);
+  if (children) _react.Children.map(children, function (c) {
+    return c;
   }).forEach(function (child) {
-    result[child.key] = child;
+    // run the map function here instead so that the key is the computed one
+    result[child.key] = mapper(child);
   });
@@ -51,7 +53,3 @@ return result;
   function getValueForKey(key) {
-    if (next.hasOwnProperty(key)) {
-      return next[key];
-    }
-
-    return prev[key];
+    return key in next ? next[key] : prev[key];
   }
@@ -61,7 +59,7 @@
   // the combined list
-  var nextKeysPending = {};
+  var nextKeysPending = Object.create(null);
 
   var pendingKeys = [];
   for (var prevKey in prev) {
-    if (next.hasOwnProperty(prevKey)) {
+    if (prevKey in next) {
       if (pendingKeys.length) {
@@ -79,3 +77,3 @@ nextKeysPending[prevKey] = pendingKeys;
   for (var nextKey in next) {
-    if (nextKeysPending.hasOwnProperty(nextKey)) {
+    if (nextKeysPending[nextKey]) {
       for (i = 0; i < nextKeysPending[nextKey].length; i++) {
@@ -82,0 +80,0 @@ var pendingNextKey = nextKeysPending[nextKey][i];

utils/PropTypes.js

 'use strict';
 
 exports.__esModule = true;
-exports.nameShape = undefined;
+exports.classNamesShape = exports.timeoutsShape = undefined;
 exports.transitionTimeout = transitionTimeout;
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = require('prop-types');
@@ -38,3 +34,8 @@
 
-var nameShape = exports.nameShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
+var timeoutsShape = exports.timeoutsShape = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({
+  enter: _propTypes2.default.number,
+  exit: _propTypes2.default.number
+}).isRequired]).isRequired;
+
+var classNamesShape = exports.classNamesShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
   enter: _propTypes2.default.string,
@@ -47,5 +48,3 @@ leave: _propTypes2.default.string,
   leave: _propTypes2.default.string,
-  leaveActive: _propTypes2.default.string,
-  appear: _propTypes2.default.string,
-  appearActive: _propTypes2.default.string
+  leaveActive: _propTypes2.default.string
 })]);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

132449

increased by9.93%

Number of package files

10

increased by11.11%

Lines of code

2903

increased by20.61%

Number of low supply chain risk alerts

24

decreased by-11.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

8

increased by14.29%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedclassnames@^2.2.5

• + Addedclassnames@2.5.1(transitive)

• Updatedprop-types@^15.5.8