@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.22

package/dist/Transition/Transition.js

@@ -1,268 +1,310 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Transition/Transition.tsx
-var Transition_exports = {};
-__export(Transition_exports, {
-  STATUS: () => STATUS,
-  default: () => Transition_default
-});
-module.exports = __toCommonJS(Transition_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_getTransitionEnd = __toESM(require("dom-lib/getTransitionEnd"));
-var import_on = __toESM(require("dom-lib/on"));
-var import_isFunction = __toESM(require("lodash/isFunction"));
-var import_omit = __toESM(require("lodash/omit"));
-var import_react = __toESM(require("react"));
-var import_util = require("./util");
-var STATUS = /* @__PURE__ */ ((STATUS2) => {
-  STATUS2[STATUS2["UNMOUNTED"] = 0] = "UNMOUNTED";
-  STATUS2[STATUS2["BEFORE_ENTER"] = 1] = "BEFORE_ENTER";
-  STATUS2[STATUS2["ENTER"] = 2] = "ENTER";
-  STATUS2[STATUS2["AFTER_ENTER"] = 3] = "AFTER_ENTER";
-  STATUS2[STATUS2["BEFORE_LEAVE"] = 4] = "BEFORE_LEAVE";
-  STATUS2[STATUS2["LEAVE"] = 5] = "LEAVE";
-  STATUS2[STATUS2["AFTER_LEAVE"] = 6] = "AFTER_LEAVE";
-  return STATUS2;
-})(STATUS || {});
-var Transition = class extends import_react.Component {
-  constructor(props) {
-    super(props);
-    this.animationEventListener = null;
-    this.instanceElement = null;
-    this.nextCallback = null;
-    this.needsUpdate = null;
-    let initialStatus;
+var _excluded = ["children", "className", "name", "disabled", "cssTransition"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import classNames from 'classnames';
+import getTransitionEnd from 'dom-lib/getTransitionEnd';
+import on from 'dom-lib/on';
+import isFunction from 'lodash/isFunction';
+import omit from 'lodash/omit';
+import React, { Children, cloneElement, Component, createRef } from 'react';
+import { getAnimationEnd } from "./util";
+export var STATUS = /*#__PURE__*/function (STATUS) {
+  STATUS[STATUS["UNMOUNTED"] = 0] = "UNMOUNTED";
+  STATUS[STATUS["BEFORE_ENTER"] = 1] = "BEFORE_ENTER";
+  STATUS[STATUS["ENTER"] = 2] = "ENTER";
+  STATUS[STATUS["AFTER_ENTER"] = 3] = "AFTER_ENTER";
+  STATUS[STATUS["BEFORE_LEAVE"] = 4] = "BEFORE_LEAVE";
+  STATUS[STATUS["LEAVE"] = 5] = "LEAVE";
+  STATUS[STATUS["AFTER_LEAVE"] = 6] = "AFTER_LEAVE";
+  return STATUS;
+}({});
+var Transition = /*#__PURE__*/function (_Component) {
+  _inherits(Transition, _Component);
+  var _super = _createSuper(Transition);
+  function Transition(props) {
+    var _this;
+    _classCallCheck(this, Transition);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "animationEventListener", null);
+    _defineProperty(_assertThisInitialized(_this), "instanceElement", null);
+    _defineProperty(_assertThisInitialized(_this), "nextCallback", null);
+    _defineProperty(_assertThisInitialized(_this), "needsUpdate", null);
+    _defineProperty(_assertThisInitialized(_this), "childRef", void 0);
+    var initialStatus;
     if (props.visible) {
-      initialStatus = props.transitionAppear ? 1 /* BEFORE_ENTER */ : 4 /* BEFORE_LEAVE */;
+      initialStatus = props.transitionAppear ? STATUS.BEFORE_ENTER : STATUS.BEFORE_LEAVE;
     } else {
-      initialStatus = props.unmountOnExit ? 0 /* UNMOUNTED */ : 1 /* BEFORE_ENTER */;
+      initialStatus = props.unmountOnExit ? STATUS.UNMOUNTED : STATUS.BEFORE_ENTER;
     }
-    this.state = {
+    _this.state = {
       status: initialStatus
     };
-    this.nextCallback = null;
-    this.childRef = (0, import_react.createRef)();
+    _this.nextCallback = null;
+    _this.childRef = /*#__PURE__*/createRef();
+    return _this;
   }
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.visible && nextProps.unmountOnExit) {
-      if (prevState.status === 0 /* UNMOUNTED */) {
-        return { status: 1 /* BEFORE_ENTER */ };
+  _createClass(Transition, [{
+    key: "getSnapshotBeforeUpdate",
+    value: function getSnapshotBeforeUpdate() {
+      if (!this.props.visible || !this.props.unmountOnExit) {
+        this.needsUpdate = true;
       }
+      return null;
     }
-    return null;
-  }
-  getSnapshotBeforeUpdate() {
-    if (!this.props.visible || !this.props.unmountOnExit) {
-      this.needsUpdate = true;
-    }
-    return null;
-  }
-  componentDidMount() {
-    if (this.props.transitionAppear && this.props.visible) {
-      this.performEnter(this.props);
-    }
-  }
-  componentDidUpdate() {
-    const { status } = this.state;
-    const { unmountOnExit } = this.props;
-    if (unmountOnExit && status === 1 /* BEFORE_ENTER */) {
-      if (this.props.visible) {
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.transitionAppear && this.props.visible) {
         this.performEnter(this.props);
-      } else {
-        if (this.instanceElement) {
-          this.setState({ status: 0 /* UNMOUNTED */ });
-        }
       }
-      return;
     }
-    if (this.needsUpdate) {
-      this.needsUpdate = false;
-      if (this.props.visible) {
-        if (status === 5 /* LEAVE */ || status === 1 /* BEFORE_ENTER */) {
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var status = this.state.status;
+      var unmountOnExit = this.props.unmountOnExit;
+      if (unmountOnExit && status === STATUS.BEFORE_ENTER) {
+        if (this.props.visible) {
           this.performEnter(this.props);
+        } else {
+          if (this.instanceElement) {
+            this.setState({
+              status: STATUS.UNMOUNTED
+            });
+          }
         }
-      } else if (status === 2 /* ENTER */ || status === 4 /* BEFORE_LEAVE */) {
-        this.performExit(this.props);
+        return;
       }
-    }
-  }
-  componentWillUnmount() {
-    this.cancelNextCallback();
-    this.instanceElement = null;
-  }
-  onTransitionEnd(node, handler) {
-    var _a;
-    this.setNextCallback(handler);
-    (_a = this.animationEventListener) == null ? void 0 : _a.off();
-    if (node) {
-      const { duration, animation } = this.props;
-      this.animationEventListener = (0, import_on.default)(node, animation ? (0, import_util.getAnimationEnd)() : (0, import_getTransitionEnd.default)(), this.nextCallback);
-      if (duration !== null) {
-        setTimeout(this.nextCallback, duration);
+      if (this.needsUpdate) {
+        this.needsUpdate = false;
+        if (this.props.visible) {
+          if (status === STATUS.LEAVE || status === STATUS.BEFORE_ENTER) {
+            this.performEnter(this.props);
+          }
+        } else if (status === STATUS.ENTER || status === STATUS.BEFORE_LEAVE) {
+          this.performExit(this.props);
+        }
       }
-    } else {
-      setTimeout(this.nextCallback, 0);
     }
-  }
-  setNextCallback(callback) {
-    let active = true;
-    this.nextCallback = (event) => {
-      if (!active) {
-        return;
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cancelNextCallback();
+      this.instanceElement = null;
+    }
+  }, {
+    key: "onTransitionEnd",
+    value: function onTransitionEnd(node, handler) {
+      var _this$animationEventL;
+      this.setNextCallback(handler);
+      (_this$animationEventL = this.animationEventListener) === null || _this$animationEventL === void 0 || _this$animationEventL.off();
+      if (node) {
+        var _this$props = this.props,
+          duration = _this$props.duration,
+          animation = _this$props.animation;
+        this.animationEventListener = on(node, animation ? getAnimationEnd() : getTransitionEnd(), this.nextCallback);
+        if (duration !== null) {
+          setTimeout(this.nextCallback, duration);
+        }
+      } else {
+        setTimeout(this.nextCallback, 0);
       }
-      if (event) {
-        if (this.instanceElement === event.target) {
-          callback(event);
-          active = false;
-          this.nextCallback = null;
+    }
+  }, {
+    key: "setNextCallback",
+    value: function setNextCallback(callback) {
+      var _this2 = this;
+      var active = true;
+      this.nextCallback = function (event) {
+        if (!active) {
+          return;
         }
-        return;
+        if (event) {
+          if (_this2.instanceElement === event.target) {
+            callback(event);
+            active = false;
+            _this2.nextCallback = null;
+          }
+          return;
+        }
+        callback(event);
+        active = false;
+        _this2.nextCallback = null;
+      };
+      this.nextCallback.cancel = function () {
+        active = false;
+      };
+      return this.nextCallback;
+    }
+  }, {
+    key: "getChildElement",
+    value: function getChildElement() {
+      var _this$props2, _this$props4;
+      if (((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.nodeRef) instanceof Function) {
+        var _this$props3;
+        return (_this$props3 = this.props) === null || _this$props3 === void 0 || (_this$props3 = _this$props3.nodeRef()) === null || _this$props3 === void 0 ? void 0 : _this$props3.current;
       }
-      callback(event);
-      active = false;
-      this.nextCallback = null;
-    };
-    this.nextCallback.cancel = () => {
-      active = false;
-    };
-    return this.nextCallback;
-  }
-  getChildElement() {
-    var _a, _b, _c, _d, _e;
-    if (((_a = this.props) == null ? void 0 : _a.nodeRef) instanceof Function) {
-      return (_c = (_b = this.props) == null ? void 0 : _b.nodeRef()) == null ? void 0 : _c.current;
+      return (_this$props4 = this.props) === null || _this$props4 === void 0 || (_this$props4 = _this$props4.nodeRef) === null || _this$props4 === void 0 ? void 0 : _this$props4.current;
     }
-    return (_e = (_d = this.props) == null ? void 0 : _d.nodeRef) == null ? void 0 : _e.current;
-  }
-  performEnter(props) {
-    const { beforeEnter, onEnter, afterEnter } = props || this.props;
-    this.cancelNextCallback();
-    const node = this.getChildElement();
-    this.instanceElement = node;
-    beforeEnter == null ? void 0 : beforeEnter(node);
-    this.safeSetState({ status: 2 /* ENTER */ }, () => {
-      onEnter == null ? void 0 : onEnter(node);
-      this.onTransitionEnd(node, () => {
-        this.safeSetState({ status: 4 /* BEFORE_LEAVE */ }, () => {
-          afterEnter == null ? void 0 : afterEnter(node);
+  }, {
+    key: "performEnter",
+    value: function performEnter(props) {
+      var _this3 = this;
+      var _ref = props || this.props,
+        beforeEnter = _ref.beforeEnter,
+        onEnter = _ref.onEnter,
+        afterEnter = _ref.afterEnter;
+      this.cancelNextCallback();
+      var node = this.getChildElement();
+      this.instanceElement = node;
+      beforeEnter === null || beforeEnter === void 0 || beforeEnter(node);
+
+      // const callback = () => {
+      // };
+      this.safeSetState({
+        status: STATUS.ENTER
+      }, function () {
+        onEnter === null || onEnter === void 0 || onEnter(node);
+        _this3.onTransitionEnd(node, function () {
+          _this3.safeSetState({
+            status: STATUS.BEFORE_LEAVE
+          }, function () {
+            afterEnter === null || afterEnter === void 0 || afterEnter(node);
+          });
         });
       });
-    });
-  }
-  performExit(props) {
-    const { beforeLeave, onLeave, afterLeave } = props || this.props;
-    this.cancelNextCallback();
-    const node = this.getChildElement();
-    this.instanceElement = node;
-    beforeLeave == null ? void 0 : beforeLeave(node);
-    this.safeSetState({ status: 5 /* LEAVE */ }, () => {
-      this.onTransitionEnd(node, () => {
-        onLeave == null ? void 0 : onLeave(node);
-        this.safeSetState({ status: 1 /* BEFORE_ENTER */ }, () => {
-          afterLeave == null ? void 0 : afterLeave(node);
+      // if (name) {
+      //     setTimeout(callback, duration);
+      // } else {
+      //     callback();
+      // }
+    }
+  }, {
+    key: "performExit",
+    value: function performExit(props) {
+      var _this4 = this;
+      var _ref2 = props || this.props,
+        beforeLeave = _ref2.beforeLeave,
+        onLeave = _ref2.onLeave,
+        afterLeave = _ref2.afterLeave;
+      this.cancelNextCallback();
+      var node = this.getChildElement();
+      this.instanceElement = node;
+      beforeLeave === null || beforeLeave === void 0 || beforeLeave(node);
+      this.safeSetState({
+        status: STATUS.LEAVE
+      }, function () {
+        _this4.onTransitionEnd(node, function () {
+          onLeave === null || onLeave === void 0 || onLeave(node);
+          _this4.safeSetState({
+            status: STATUS.BEFORE_ENTER
+          }, function () {
+            afterLeave === null || afterLeave === void 0 || afterLeave(node);
+          });
         });
       });
-    });
-  }
-  cancelNextCallback() {
-    if (this.nextCallback !== null) {
-      this.nextCallback.cancel();
-      this.nextCallback = null;
     }
-  }
-  safeSetState(nextState, callback) {
-    if (this.instanceElement) {
-      this.setState(nextState, this.setNextCallback(callback));
-    }
-  }
-  render() {
-    const status = this.state.status;
-    if (status === 0 /* UNMOUNTED */) {
-      return null;
-    }
-    const { children, className, name, ...rest } = this.props;
-    const childProps = (0, import_omit.default)(rest, [
-      "animation",
-      "className",
-      "visible",
-      "unmountOnExit",
-      "transitionAppear",
-      "duration",
-      "beforeEnter",
-      "onEnter",
-      "afterEnter",
-      "beforeLeave",
-      "onLeave",
-      "afterLeave",
-      "nodeRef"
-    ]);
-    let transitionClassName;
-    if (name) {
-      if (status === 1 /* BEFORE_ENTER */) {
-        transitionClassName = `${name}-leave-to`;
-      } else if (status === 2 /* ENTER */) {
-        transitionClassName = `${name}-enter-from`;
-      } else if (status === 4 /* BEFORE_LEAVE */) {
-        transitionClassName = `${name}-enter-active`;
-      } else if (status === 5 /* LEAVE */) {
-        transitionClassName = `${name}-leave-active`;
+  }, {
+    key: "cancelNextCallback",
+    value: function cancelNextCallback() {
+      if (this.nextCallback !== null) {
+        this.nextCallback.cancel();
+        this.nextCallback = null;
       }
     }
-    if ((0, import_isFunction.default)(children)) {
-      childProps.className = (0, import_classnames.default)(className, transitionClassName);
-      return children(childProps, this.childRef);
+  }, {
+    key: "safeSetState",
+    value: function safeSetState(nextState, callback) {
+      if (this.instanceElement) {
+        this.setState(nextState, this.setNextCallback(callback));
+      }
     }
-    return import_react.Children.toArray(children).map((child) => {
-      var _a, _b;
-      if (typeof child === "string" || typeof child === "number") {
-        child = /* @__PURE__ */ import_react.default.createElement("span", null, child);
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      var status = this.state.status;
+      if (status === STATUS.UNMOUNTED) {
+        return null;
       }
-      return (0, import_react.cloneElement)(child, {
-        ...childProps,
-        // ref: this.childRef,
+      var _this$props5 = this.props,
+        children = _this$props5.children,
+        className = _this$props5.className,
+        name = _this$props5.name,
+        disabled = _this$props5.disabled,
+        cssTransition = _this$props5.cssTransition,
+        rest = _objectWithoutProperties(_this$props5, _excluded);
+      if (disabled) {
+        return children;
+      }
+      var childProps = omit(rest, ['animation', 'className', 'visible', 'unmountOnExit', 'transitionAppear', 'duration', 'beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'nodeRef']);
+      var transitionClassName;
+      if (name) {
+        if (status === STATUS.BEFORE_ENTER) {
+          transitionClassName = "".concat(name, "-leave-to");
+        } else if (status === STATUS.ENTER) {
+          transitionClassName = "".concat(name, "-enter-from");
+        } else if (status === STATUS.BEFORE_LEAVE) {
+          transitionClassName = "".concat(name, "-enter-active");
+        } else if (status === STATUS.LEAVE) {
+          transitionClassName = "".concat(name, "-leave-active");
+        }
+      }
+      if (isFunction(children)) {
+        childProps.className = classNames(className, transitionClassName);
+        return children(childProps, this.childRef);
+      }
+      return Children.toArray(children).map(function (child) {
+        var _child$props, _child$props2, _this5$props$display;
+        if (typeof child === 'string' || typeof child === 'number') {
+          child = /*#__PURE__*/React.createElement("span", null, child);
+        }
+
         // @ts-ignore
-        className: (0, import_classnames.default)(className, (_a = child.props) == null ? void 0 : _a.className, transitionClassName),
-        style: {
+        return /*#__PURE__*/cloneElement(child, _objectSpread(_objectSpread({}, childProps), {}, {
+          // ref: this.childRef,
           // @ts-ignore
-          ...((_b = child.props) == null ? void 0 : _b.style) || {},
-          display: this.state.status > 1 ? this.props.display ?? "block" : "none"
-        }
+          className: classNames(className, (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className, transitionClassName),
+          style: _objectSpread(_objectSpread({}, ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style) || {}), {}, {
+            display: _this5.state.status > 1 || cssTransition ? (_this5$props$display = _this5.props.display) !== null && _this5$props$display !== void 0 ? _this5$props$display : 'block' : 'none'
+          })
+        }));
       });
-    });
-  }
-};
-Transition.displayName = "Transition";
-Transition.defaultProps = {
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (nextProps.visible && nextProps.unmountOnExit) {
+        if (prevState.status === STATUS.UNMOUNTED) {
+          // Start enter transition in componentDidUpdate.
+          return {
+            status: STATUS.BEFORE_ENTER
+          };
+        }
+      }
+      return null;
+    }
+  }]);
+  return Transition;
+}(Component);
+_defineProperty(Transition, "displayName", 'Transition');
+_defineProperty(Transition, "defaultProps", {
   duration: 100
-};
-var Transition_default = Transition;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  STATUS
 });
+export default Transition;

package/dist/Transition/TransitionGroup.d.ts

@@ -1,10 +1,55 @@
 import React, { Component } from 'react';
 export interface TransitionGroupProps {
+    /**
+     * `<TransitionGroup>` renders a `<div>` by default. You can change this
+     * behavior by providing a `component` prop.
+     * If you use React v16+ and would like to avoid a wrapping `<div>` element
+     * you can pass in `component={null}`. This is useful if the wrapping div
+     * borks your css styles.
+     */
     component: any;
+    /**
+     * 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 through if you are wrapping the `<Transition>` as
+     * with our `<Fade>` example.
+     *
+     * While this component is meant for multiple `Transition` or `CSSTransition`
+     * children, sometimes you may want to have a single transition child with
+     * content that you want to be transitioned out and in when you change it
+     * (e.g. routes, images etc.) In that case you can change the `key` prop of
+     * the transition child as you change its content, this will cause
+     * `TransitionGroup` to transition the child out and back in.
+     */
     children: React.ReactNode;
+    /**
+     * A convenience prop that enables or disables transitionAppear animations
+     * for all children. Note that specifying this will override any defaults set
+     * on individual children Transitions.
+     */
     transitionAppear: boolean;
+    /**
+     * A convenience prop that enables or disables enter animations
+     * for all children. Note that specifying this will override any defaults set
+     * on individual children Transitions.
+     */
     enter: boolean;
+    /**
+     * A convenience prop that enables or disables exit animations
+     * for all children. Note that specifying this will override any defaults set
+     * on individual children Transitions.
+     */
     exit: boolean;
+    /**
+     * You may need to apply reactive updates to a child as it is exiting.
+     * This is generally done by using `cloneElement` however in the case of an exiting
+     * child the element has already been removed and not accessible to the consumer.
+     *
+     * If you do need to update a child as it leaves you can provide a `childFactory`
+     * to wrap every child, even the ones that are leaving.
+     *
+     * @type Function(child: ReactElement) -> ReactElement
+     */
     childFactory: (child: React.ReactNode) => React.ReactNode;
 }
 interface State {
@@ -15,6 +60,20 @@ interface State {
     handleExited?: (child: any, node: any) => void;
     firstRender?: boolean;
 }
+/**
+ * The `<TransitionGroup>` component manages a set of transition components
+ * (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
+ * components, `<TransitionGroup>` is a state machine for managing the mounting
+ * and unmounting of components over time.
+ *
+ * Consider the example below. As items are removed or added to the TodoList the
+ * `in` prop is toggled automatically by the `<TransitionGroup>`.
+ *
+ * Note that `<TransitionGroup>`  does not define any animation behavior!
+ * Exactly _how_ a list item animates is up to the individual transition
+ * component. This means you can mix and match animations across different list
+ * items.
+ */
 declare class TransitionGroup extends Component<TransitionGroupProps, State> {
     mounted: boolean | undefined;
     static defaultProps: {