@rio-cloud/rio-uikit 0.16.1-beta-10 → 0.16.1-beta.11

package/lib/components/applicationHeader/ApplicationHeader.js

@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var MOBILE_MAX_WIDTH = 580;
+var SCREEN_SM = 768; // @screen-sm: 768px;
 
 var ApplicationHeader = function ApplicationHeader(props) {
   var homeRoute = props.homeRoute,
@@ -62,7 +62,7 @@ var ApplicationHeader = function ApplicationHeader(props) {
     return contentRect && Math.round(contentRect[key]);
   }, [contentRect]);
   var containerWidth = getContentRect('width') || 0;
-  var isMobileWidth = containerWidth <= MOBILE_MAX_WIDTH;
+  var isMobileWidth = containerWidth <= SCREEN_SM;
   var hasActionBarItems = !(0, _isEmpty.default)(actionBarItems);
   var classNames = (0, _classnames.default)('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
   return /*#__PURE__*/_react.default.createElement("nav", {

package/lib/components/applicationHeader/MobileAppMenu.js

@@ -42,7 +42,7 @@ var MobileAppMenu = function MobileAppMenu(props) {
 
   var hasAppContent = !(0, _isNil.default)(appMenuItems) || !(0, _isNil.default)(appNavigator);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative",
+    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
     onClick: handleToggleNavigation
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "navbar-brand height-40 width-40 ".concat(showHomeIcon ? 'home-icon' : '')

package/lib/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -42,20 +42,21 @@ var MobileSubmoduleNavigation = function MobileSubmoduleNavigation(props) {
   };
 
   var hasNavItems = !(0, _isEmpty.default)(navItems);
-  var classes = (0, _classnames.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', 'ellipsis-1', className);
-  var labelClasses = (0, _classnames.default)(hasNavItems ? 'text-size-12' : 'text-size-14', 'text-color-dark line-height-14 width-100pct');
+  var classes = (0, _classnames.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
+  var labelClasses = (0, _classnames.default)(hasNavItems ? 'text-size-12 text-color-dark line-height-14' : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes,
     onClick: handleToggleNavigation
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-1-1 display-flex flex-column align-items-center"
+    className: "flex-1-1 display-flex flex-column align-items-center width-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: labelClasses
   }, label), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-medium width-100pct"
   }, navItems.map(function (navItem) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: navItem.key
+      key: navItem.key,
+      className: "ellipsis-1"
     }, /*#__PURE__*/_react.default.cloneElement(navItem.route, {
       className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
       onClick: function onClick(event) {

package/lib/components/applicationLayout/ApplicationLayoutBody.js

@@ -33,6 +33,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
       banner = props.banner,
       navigation = props.navigation,
       bottomBar = props.bottomBar,
+      bottomBarHeight = props.bottomBarHeight,
       children = props.children;
 
   var _useState = (0, _react.useState)(0),
@@ -41,6 +42,12 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
       setOffset = _useState2[1];
 
   var moduleContentRef = (0, _react.useRef)();
+  var layoutBodyRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (layoutBodyRef.current) {
+      layoutBodyRef.current.parentNode.style = "--ApplicationLayoutBodyBottomBarHeight: ".concat(bottomBarHeight, "px");
+    }
+  }, [bottomBarHeight]);
   var handleScroll = (0, _debounce.default)(RESIZE_THROTTELING)(function () {
     if (moduleContentRef.current) {
       setOffset(moduleContentRef.current.scrollTop);
@@ -66,6 +73,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
   var offsetThreshold = window.innerHeight * 0.1;
   var scrollToTopClasses = (0, _classnames.default)('scroll-to-top', offset > offsetThreshold && 'in');
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: layoutBodyRef,
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "module-content-wrapper"
@@ -87,7 +95,8 @@ exports.ApplicationLayoutBody = ApplicationLayoutBody;
 ApplicationLayoutBody.defaultProps = {
   className: '',
   enableScrollToTop: true,
-  forceScrollbar: false
+  forceScrollbar: false,
+  bottomBarHeight: 54
 };
 ApplicationLayoutBody.propTypes = {
   className: _propTypes.default.string,
@@ -96,7 +105,8 @@ ApplicationLayoutBody.propTypes = {
   innerClassName: _propTypes.default.string,
   banner: _propTypes.default.node,
   navigation: _propTypes.default.node,
-  bottomBar: _propTypes.default.node
+  bottomBar: _propTypes.default.node,
+  bottomBarHeight: _propTypes.default.number
 };
 var _default = ApplicationLayoutBody;
 exports.default = _default;

package/lib/components/dataTabs/DataTab.js

@@ -11,31 +11,55 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Fade = _interopRequireDefault(require("../fade/Fade"));
-
-var DataTab = function DataTab(_ref) {
-  var disableTransition = _ref.disableTransition,
-      children = _ref.children,
-      active = _ref.active,
-      mountOnEnter = _ref.mountOnEnter,
-      unmountOnExit = _ref.unmountOnExit;
-  var content = disableTransition ? /*#__PURE__*/_react.default.createElement("div", null, active && children) : /*#__PURE__*/_react.default.createElement(_Fade.default, {
-    in: active,
-    mountOnEnter: mountOnEnter,
-    unmountOnExit: unmountOnExit
-  }, /*#__PURE__*/_react.default.createElement("div", null, active && children));
-  return content;
+var _framerMotion = require("framer-motion");
+
+var DataTab = function DataTab(props) {
+  var active = props.active,
+      tabKey = props.tabKey,
+      disableTransition = props.disableTransition,
+      children = props.children;
+
+  if (disableTransition) {
+    return /*#__PURE__*/_react.default.createElement("div", null, active && children);
+  }
+
+  return active && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    key: tabKey,
+    initial: {
+      x: 0,
+      y: 0,
+      opacity: 0
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      x: 0,
+      y: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: 0.1
+    } // TODO: added "fade in" for backwards compatibility for service tests
+    // To be removed for next major version
+    ,
+    className: "fade in"
+  }, children);
 };
 
 DataTab.defaultProps = {
   active: false,
-  disableTransition: false
-}; // Props are injected from the wrapping DataTabs component
-
+  disableTransition: false,
+  className: ''
+};
 DataTab.propTypes = {
-  mountOnEnter: _propTypes.default.bool,
-  unmountOnExit: _propTypes.default.bool,
-  className: _propTypes.default.string
+  // Props are injected from the wrapping DataTabs component
+  disableTransition: _propTypes.default.bool,
+  active: _propTypes.default.bool,
+  tabKey: _propTypes.default.string.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])
 };
 var _default = DataTab;
 exports.default = _default;

package/lib/components/dataTabs/DataTabs.js

@@ -17,10 +17,21 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _framerMotion = require("framer-motion");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var getFirstTabKey = function getFirstTabKey() {
+  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  var _children = (0, _slicedToArray2.default)(children, 1),
+      firstItem = _children[0];
+
+  return firstItem && firstItem.props.tabKey;
+};
+
 var DataTabs = function DataTabs(props) {
   var activeBgColor = props.activeBgColor,
       activeKey = props.activeKey,
@@ -36,16 +47,7 @@ var DataTabs = function DataTabs(props) {
       tabContentClassName = props.tabContentClassName,
       vertical = props.vertical;
 
-  var getFirstTabKey = function getFirstTabKey() {
-    var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
-    var _children = (0, _slicedToArray2.default)(children, 1),
-        firstItem = _children[0];
-
-    return firstItem && firstItem.props.tabKey;
-  };
-
-  var _useState = (0, _react.useState)(activeKey || getFirstTabKey(props.children)),
+  var _useState = (0, _react.useState)(activeKey || getFirstTabKey(children)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       internalActiveKey = _useState2[0],
       setInternalActiveKey = _useState2[1];
@@ -61,21 +63,37 @@ var DataTabs = function DataTabs(props) {
   var wrapperClassNames = (0, _classnames.default)('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical && 'DataTabs-vertical');
 
   var enrichChildren = function enrichChildren() {
-    return _react.default.Children.map(children, function (child) {
+    if (disableTransition) {
+      return _react.default.Children.map(children, function (child) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          active: child.props.tabKey === internalActiveKey,
+          disableTransition: disableTransition
+        });
+      });
+    }
+
+    var enhancedChildren = _react.default.Children.toArray(children).filter(function (child) {
+      return child.props.tabKey === internalActiveKey;
+    }).map(function (child) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
-        active: child.props.tabKey === internalActiveKey,
+        active: true,
         disableTransition: disableTransition
       });
     });
+
+    return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false,
+      exitBeforeEnter: true
+    }, enhancedChildren);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassNames
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'DataTabsWrapper'
+    className: "DataTabsWrapper"
   }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'DataTabs',
-    role: 'tabList'
+    className: "DataTabs",
+    role: "tabList"
   }, _react.default.Children.map(children, function (child) {
     var _child$props = child.props,
         tabKey = _child$props.tabKey,
@@ -93,7 +111,7 @@ var DataTabs = function DataTabs(props) {
     }));
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "tab-content ".concat(tabContentClassName),
-    role: 'tabpanel'
+    role: "tabpanel"
   }, commonTabContent ? commonTabContent : enrichChildren()));
 };
 
@@ -102,8 +120,6 @@ DataTabs.defaultProps = {
   onSelectTab: function onSelectTab() {},
   className: '',
   tabContentClassName: '',
-  mountOnEnter: true,
-  unmountOnExit: true,
   hoverTextColor: 'hover-text-color-darkest',
   hoverBgColor: 'hover-bg-highlight-decent',
   activeTextColor: 'text-color-white',
@@ -116,8 +132,6 @@ DataTabs.defaultProps = {
 DataTabs.propTypes = {
   activeKey: _propTypes.default.string,
   onSelectTab: _propTypes.default.func.isRequired,
-  mountOnEnter: _propTypes.default.bool,
-  unmountOnExit: _propTypes.default.bool,
   tabContentClassName: _propTypes.default.string,
   hoverTextColor: _propTypes.default.string,
   hoverBgColor: _propTypes.default.string,
@@ -126,7 +140,9 @@ DataTabs.propTypes = {
   bordered: _propTypes.default.bool,
   disableTransition: _propTypes.default.bool,
   className: _propTypes.default.string,
-  vertical: _propTypes.default.bool
+  vertical: _propTypes.default.bool,
+  commonTabContent: _propTypes.default.node,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])
 };
 var _default = DataTabs;
 exports.default = _default;

package/lib/components/fade/Fade.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,116 +9,265 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Transition = _interopRequireWildcard(require("react-transition-group/Transition"));
-
-var _excluded = ["className", "children"];
-
-var _fadeStyles;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-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; } }
-
-var fadeStyles = (_fadeStyles = {}, (0, _defineProperty2.default)(_fadeStyles, _Transition.ENTERING, 'in'), (0, _defineProperty2.default)(_fadeStyles, _Transition.ENTERED, 'in'), _fadeStyles); // reading a dimension prop will cause the browser to recalculate,
-// which will let our animations work
-
-function triggerBrowserReflow(node) {
-  if (node) {
-    node.offsetHeight;
+var _framerMotion = require("framer-motion");
+
+var _logDeprecatedWarnings = _interopRequireDefault(require("../../utils/logDeprecatedWarnings"));
+
+var _isArray = _interopRequireDefault(require("lodash/fp/isArray"));
+
+var _head = _interopRequireDefault(require("lodash/fp/head"));
+
+var warningProps = [{
+  prop: 'in',
+  replacement: 'show'
+}, {
+  prop: 'timeout',
+  replacement: 'duration'
+}, {
+  prop: 'appear',
+  replacement: 'initial'
+}];
+var animations = {
+  fromLeft: {
+    initial: {
+      x: -10,
+      y: 0,
+      opacity: 0
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      x: -10,
+      y: 0,
+      opacity: 0
+    }
+  },
+  fromRight: {
+    initial: {
+      x: 10,
+      y: 0,
+      opacity: 0
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      x: 10,
+      y: 0,
+      opacity: 0
+    }
+  },
+  fromTop: {
+    initial: {
+      y: -10,
+      x: 0,
+      opacity: 0
+    },
+    animate: {
+      y: 0,
+      x: 0,
+      opacity: 1
+    },
+    exit: {
+      y: -10,
+      x: 0,
+      opacity: 0
+    }
+  },
+  fromBottom: {
+    initial: {
+      y: 10,
+      x: 0,
+      opacity: 0
+    },
+    animate: {
+      y: 0,
+      x: 0,
+      opacity: 1
+    },
+    exit: {
+      y: 10,
+      x: 0,
+      opacity: 0
+    }
+  },
+  fade: {
+    initial: {
+      x: 0,
+      y: 0,
+      opacity: 0
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      x: 0,
+      y: 0,
+      opacity: 0
+    }
+  },
+  tabs: {
+    initial: {
+      x: 2,
+      y: 0,
+      opacity: 0
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      x: -2,
+      y: 0,
+      opacity: 0
+    }
+  },
+  page: {
+    initial: 'pageEnter',
+    animate: 'pageCenter',
+    exit: 'pageExit'
+  },
+  pageBack: {
+    initial: 'pageEnter',
+    animate: 'pageCenter',
+    exit: 'pageExit'
   }
-}
-
-var Fade = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Fade, _React$Component);
-
-  var _super = _createSuper(Fade);
+};
+var pageTransitionVariants = {
+  pageEnter: function pageEnter(pageDirection) {
+    return {
+      x: pageDirection > 0 ? '60%' : '-60%',
+      opacity: 0
+    };
+  },
+  pageCenter: {
+    x: 0,
+    opacity: 1
+  },
+  pageExit: function pageExit(pageDirection) {
+    return {
+      zIndex: 0,
+      x: pageDirection < 0 ? '60%' : '-60%',
+      opacity: 0
+    };
+  }
+};
 
-  function Fade(props) {
-    var _this;
+var getPageDirection = function getPageDirection(animationStyle) {
+  switch (animationStyle) {
+    case Fade.PAGE_BACK:
+      return -1;
 
-    (0, _classCallCheck2.default)(this, Fade);
-    _this = _super.call(this, props);
-    _this.handleEnter = _this.handleEnter.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
+    default:
+      return 1;
   }
+};
 
-  (0, _createClass2.default)(Fade, [{
-    key: "handleEnter",
-    value: function handleEnter(node) {
-      triggerBrowserReflow(node);
+var Fade = function Fade(props) {
+  var oldIn = props.in,
+      timeout = props.timeout,
+      appear = props.appear,
+      exitBeforeEnter = props.exitBeforeEnter,
+      onExitComplete = props.onExitComplete,
+      animationStyle = props.animationStyle,
+      animatePresenceProps = props.animatePresenceProps,
+      motionProps = props.motionProps,
+      children = props.children;
+  (0, _logDeprecatedWarnings.default)(warningProps, props, 'Fade');
+  var duration = props.duration || timeout;
+
+  if (duration > 10) {
+    duration = duration / 100;
+  }
 
-      if (this.props.onEnter) {
-        this.props.onEnter(node);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          children = _this$props.children,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, props, {
-        onEnter: this.handleEnter
-      }), function (status, innerProps) {
-        return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, innerProps), {}, {
-          className: (0, _classnames.default)('fade', className, children.props.className, fadeStyles[status])
-        }));
-      });
-    }
-  }]);
-  return Fade;
-}(_react.default.Component);
+  var show = props.show || oldIn;
+  var initial = props.initial || appear;
+  var motionDivKey = 'fade'; // If there are multiple children that are conditionally rendered like
+  // in case of a tabbed content - get the current visible child key
+  // to update the motion.div key to animate different children
+
+  if ((0, _isArray.default)(children)) {
+    var currentChild = (0, _head.default)(children.filter(function (child) {
+      return Boolean(child);
+    }));
+    motionDivKey = "fade-".concat(currentChild.key);
+  } // In case the animation is a page transition, use custom variants and add a custom pageDirection variable
+  // to animate in the right direction
+
+
+  var isPageTransition = animationStyle === Fade.PAGE || animationStyle === Fade.PAGE_BACK;
+  var pageDirection = getPageDirection(animationStyle);
+  var custom = isPageTransition ? pageDirection : null;
+  var pageTransitionProps = isPageTransition ? {
+    variants: pageTransitionVariants
+  } : null;
+  var animationProps = animations[animationStyle];
+  return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, (0, _extends2.default)({
+    initial: initial,
+    exitBeforeEnter: exitBeforeEnter,
+    onExitComplete: onExitComplete,
+    custom: custom
+  }, animatePresenceProps), show && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, (0, _extends2.default)({
+    key: motionDivKey,
+    transition: {
+      duration: duration
+    },
+    custom: custom
+  }, animationProps, pageTransitionProps, motionProps), children));
+};
 
+Fade.FADE = 'fade';
+Fade.FROM_LEFT = 'fromLeft';
+Fade.FROM_RIGHT = 'fromRight';
+Fade.FROM_TOP = 'fromTop';
+Fade.FROM_BOTTOM = 'fromBottom';
+Fade.TABS = 'tabs';
+Fade.PAGE = 'page';
+Fade.PAGE_BACK = 'pageBack';
 Fade.defaultProps = {
-  in: false,
-  timeout: 200,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false
+  // in: false,
+  show: true,
+  // timeout: 200,
+  duration: 0.2,
+  // appear: false,
+  initial: false,
+  exitBeforeEnter: false,
+  animationStyle: 'fade'
 };
 Fade.propTypes = {
   in: _propTypes.default.bool,
-  mountOnEnter: _propTypes.default.bool,
-  unmountOnExit: _propTypes.default.bool,
+  // deprecated
+  show: _propTypes.default.bool,
   appear: _propTypes.default.bool,
+  // deprecated
+  initial: _propTypes.default.bool,
+  exitBeforeEnter: _propTypes.default.bool,
   timeout: _propTypes.default.number,
+  // deprecated
+  duration: _propTypes.default.number,
   onEnter: _propTypes.default.func,
   onEntering: _propTypes.default.func,
   onEntered: _propTypes.default.func,
   onExit: _propTypes.default.func,
   onExiting: _propTypes.default.func,
-  onExited: _propTypes.default.func
+  onExited: _propTypes.default.func,
+  onExitComplete: _propTypes.default.func,
+  animationStyle: _propTypes.default.oneOf(['fromLeft', 'fromRight', 'fromTop', 'fromBottom', 'fade', 'tabs', 'page', 'pageBack']),
+  animatePresenceProps: _propTypes.default.object,
+  motionProps: _propTypes.default.object,
+  children: _propTypes.default.any
 };
 var _default = Fade;
 exports.default = _default;