@zohodesk/components 1.2.22 → 1.2.24

package/es/Animation/Animation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import style from '../common/transition.module.css';
+import { animationStyle } from './utils';
 export default class Animation extends React.Component {
   constructor(props) {
     super(props);
@@ -20,91 +20,9 @@ export default class Animation extends React.Component {
       onExit = () => {},
       delayClassName = null
     } = this.props;
-    const animation = {
-      zoomIn: {
-        enter: style.zoomInEnter,
-        enterActive: style.zoomInEnterActive,
-        enterDone: style.zoomInEnterActive,
-        exit: style.zoomInLeave,
-        exitActive: style.zoomInLeaveActive,
-        exitDone: style.zoomInLeaveActive,
-        appear: style.zoomInEnter,
-        appearActive: style.zoomInEnterActive
-      },
-      scaleIn: {
-        enter: style.scaleInEnter,
-        enterActive: style.scaleInEnterActive,
-        enterDone: style.scaleInEnterActive,
-        exit: style.scaleInLeave,
-        exitActive: style.scaleInLeaveActive,
-        exitDone: style.scaleInLeaveActive,
-        appear: style.scaleInEnter,
-        appearActive: style.scaleInEnterActive
-      },
-      fadeIn: {
-        enter: style.fadeInEnter,
-        enterActive: style.fadeInEnterActive,
-        enterDone: style.fadeInEnterActive,
-        exit: style.fadeInLeave,
-        exitActive: style.fadeInLeaveActive,
-        exitDone: style.fadeInLeaveActive,
-        appear: style.fadeInEnter,
-        appearActive: style.fadeInEnterActive
-      },
-      slideLeft: {
-        enter: style.slideLeftEnter,
-        enterActive: style.slideLeftEnterActive,
-        enterDone: style.slideLeftEnterActive,
-        exit: style.slideLeftLeave,
-        exitActive: style.slideLeftLeaveActive,
-        exitDone: style.slideLeftLeaveActive,
-        appear: style.slideLeftEnter,
-        appearActive: style.slideLeftEnterActive
-      },
-      slideDown: {
-        enter: style.slideDownEnter,
-        enterActive: style.slideDownEnterActive,
-        enterDone: style.slideDownEnterActive,
-        exit: style.slideDownLeave,
-        exitActive: style.slideDownLeaveActive,
-        exitDone: style.slideDownLeaveActive,
-        appear: style.slideDownEnter,
-        appearActive: style.slideDownEnterActive
-      },
-      skewIn: {
-        enter: style.skewInEnter,
-        enterActive: style.skewInEnterActive,
-        enterDone: style.skewInEnterActive,
-        exit: style.skewInLeave,
-        exitActive: style.skewInLeaveActive,
-        exitDone: style.skewInLeaveActive,
-        appear: style.skewInEnter,
-        appearActive: style.skewInEnterActive
-      },
-      none: {
-        enter: style.noneEnter,
-        enterActive: style.noneEnterActive,
-        enterDone: style.noneEnterActive,
-        exit: style.noneLeave,
-        exitActive: style.noneLeaveActive,
-        exitDone: style.noneLeaveActive,
-        appear: style.noneEnter,
-        appearActive: style.noneEnterActive
-      },
-      default: {
-        enter: style.defaultEnter,
-        enterActive: style.defaultEnterActive,
-        enterDone: style.defaultEnterActive,
-        exit: style.defaultLeave,
-        exitActive: style.defaultLeaveActive,
-        exitDone: style.defaultLeaveActive,
-        appear: style.defaultEnter,
-        appearActive: style.defaultEnterActive
-      }
-    };
-    let newClassNames = delayClassName ? Object.assign({}, animation[name], {
-      exit: `${delayClassName} ${animation[name].exit}`
-    }) : animation[name];
+    let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
+      exit: `${delayClassName} ${animationStyle[name].exit}`
+    }) : animationStyle[name];
     return /*#__PURE__*/React.createElement(CSSTransition, {
       classNames: newClassNames && newClassNames,
       in: isActive,

package/es/Animation/utils.js

@@ -0,0 +1,83 @@
+import style from '../common/transition.module.css';
+export const animationStyle = {
+  zoomIn: {
+    enter: style.zoomInEnter,
+    enterActive: style.zoomInEnterActive,
+    enterDone: style.zoomInEnterActive,
+    exit: style.zoomInLeave,
+    exitActive: style.zoomInLeaveActive,
+    exitDone: style.zoomInLeaveActive,
+    appear: style.zoomInEnter,
+    appearActive: style.zoomInEnterActive
+  },
+  scaleIn: {
+    enter: style.scaleInEnter,
+    enterActive: style.scaleInEnterActive,
+    enterDone: style.scaleInEnterActive,
+    exit: style.scaleInLeave,
+    exitActive: style.scaleInLeaveActive,
+    exitDone: style.scaleInLeaveActive,
+    appear: style.scaleInEnter,
+    appearActive: style.scaleInEnterActive
+  },
+  fadeIn: {
+    enter: style.fadeInEnter,
+    enterActive: style.fadeInEnterActive,
+    enterDone: style.fadeInEnterActive,
+    exit: style.fadeInLeave,
+    exitActive: style.fadeInLeaveActive,
+    exitDone: style.fadeInLeaveActive,
+    appear: style.fadeInEnter,
+    appearActive: style.fadeInEnterActive
+  },
+  slideLeft: {
+    enter: style.slideLeftEnter,
+    enterActive: style.slideLeftEnterActive,
+    enterDone: style.slideLeftEnterActive,
+    exit: style.slideLeftLeave,
+    exitActive: style.slideLeftLeaveActive,
+    exitDone: style.slideLeftLeaveActive,
+    appear: style.slideLeftEnter,
+    appearActive: style.slideLeftEnterActive
+  },
+  slideDown: {
+    enter: style.slideDownEnter,
+    enterActive: style.slideDownEnterActive,
+    enterDone: style.slideDownEnterActive,
+    exit: style.slideDownLeave,
+    exitActive: style.slideDownLeaveActive,
+    exitDone: style.slideDownLeaveActive,
+    appear: style.slideDownEnter,
+    appearActive: style.slideDownEnterActive
+  },
+  skewIn: {
+    enter: style.skewInEnter,
+    enterActive: style.skewInEnterActive,
+    enterDone: style.skewInEnterActive,
+    exit: style.skewInLeave,
+    exitActive: style.skewInLeaveActive,
+    exitDone: style.skewInLeaveActive,
+    appear: style.skewInEnter,
+    appearActive: style.skewInEnterActive
+  },
+  none: {
+    enter: style.noneEnter,
+    enterActive: style.noneEnterActive,
+    enterDone: style.noneEnterActive,
+    exit: style.noneLeave,
+    exitActive: style.noneLeaveActive,
+    exitDone: style.noneLeaveActive,
+    appear: style.noneEnter,
+    appearActive: style.noneEnterActive
+  },
+  default: {
+    enter: style.defaultEnter,
+    enterActive: style.defaultEnterActive,
+    enterDone: style.defaultEnterActive,
+    exit: style.defaultLeave,
+    exitActive: style.defaultLeaveActive,
+    exitDone: style.defaultLeaveActive,
+    appear: style.defaultEnter,
+    appearActive: style.defaultEnterActive
+  }
+};

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -107,7 +107,8 @@ export default function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: isAnimate && FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,

package/es/Select/Select.js

@@ -355,7 +355,7 @@ export class SelectComponent extends Component {
         needCloseOnSelect && this.handlePopupClose(e);
       }
 
-      if (!isPopupOpen && isPopupOpenOnEnter) {
+      if (!isPopupReady && isPopupOpenOnEnter) {
         this.togglePopup(e);
       }
     } else if (keyCode === 27) {

package/es/Tab/TabContentWrapper.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
@@ -12,16 +14,19 @@ const TabContentWrapper = _ref => {
     dataId,
     selectedTab,
     onScroll,
-    dataSelectorId
+    dataSelectorId,
+    tagName,
+    a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
-    dataSelectorId: dataSelectorId
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;

package/es/Tab/props/defaultProps.js

@@ -9,7 +9,8 @@ export const TabContent_defaultProps = {
 };
 export const TabContentWrapper_defaultProps = {
   children: [],
-  dataSelectorId: 'tabContentWrapper'
+  dataSelectorId: 'tabContentWrapper',
+  a11y: {}
 };
 export const Tabs_defaultProps = {
   isAnimate: false,

package/es/Tab/props/propTypes.js

@@ -40,7 +40,9 @@ export const TabContentWrapper_propTypes = {
   onScroll: PropTypes.func,
   selectedTab: PropTypes.string,
   style: PropTypes.object,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  a11y: PropTypes.object,
+  tagName: PropTypes.string
 };
 export const Tabs_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

package/es/v1/Animation/Animation.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
-import style from '../../common/transition.module.css';
+import { animationStyle } from './utils';
 export default function Animation(props) {
   let {
     name,
@@ -15,91 +15,9 @@ export default function Animation(props) {
     onExit = () => {},
     delayClassName = null
   } = props;
-  const animation = {
-    zoomIn: {
-      enter: style.zoomInEnter,
-      enterActive: style.zoomInEnterActive,
-      enterDone: style.zoomInEnterActive,
-      exit: style.zoomInLeave,
-      exitActive: style.zoomInLeaveActive,
-      exitDone: style.zoomInLeaveActive,
-      appear: style.zoomInEnter,
-      appearActive: style.zoomInEnterActive
-    },
-    scaleIn: {
-      enter: style.scaleInEnter,
-      enterActive: style.scaleInEnterActive,
-      enterDone: style.scaleInEnterActive,
-      exit: style.scaleInLeave,
-      exitActive: style.scaleInLeaveActive,
-      exitDone: style.scaleInLeaveActive,
-      appear: style.scaleInEnter,
-      appearActive: style.scaleInEnterActive
-    },
-    fadeIn: {
-      enter: style.fadeInEnter,
-      enterActive: style.fadeInEnterActive,
-      enterDone: style.fadeInEnterActive,
-      exit: style.fadeInLeave,
-      exitActive: style.fadeInLeaveActive,
-      exitDone: style.fadeInLeaveActive,
-      appear: style.fadeInEnter,
-      appearActive: style.fadeInEnterActive
-    },
-    slideLeft: {
-      enter: style.slideLeftEnter,
-      enterActive: style.slideLeftEnterActive,
-      enterDone: style.slideLeftEnterActive,
-      exit: style.slideLeftLeave,
-      exitActive: style.slideLeftLeaveActive,
-      exitDone: style.slideLeftLeaveActive,
-      appear: style.slideLeftEnter,
-      appearActive: style.slideLeftEnterActive
-    },
-    slideDown: {
-      enter: style.slideDownEnter,
-      enterActive: style.slideDownEnterActive,
-      enterDone: style.slideDownEnterActive,
-      exit: style.slideDownLeave,
-      exitActive: style.slideDownLeaveActive,
-      exitDone: style.slideDownLeaveActive,
-      appear: style.slideDownEnter,
-      appearActive: style.slideDownEnterActive
-    },
-    skewIn: {
-      enter: style.skewInEnter,
-      enterActive: style.skewInEnterActive,
-      enterDone: style.skewInEnterActive,
-      exit: style.skewInLeave,
-      exitActive: style.skewInLeaveActive,
-      exitDone: style.skewInLeaveActive,
-      appear: style.skewInEnter,
-      appearActive: style.skewInEnterActive
-    },
-    none: {
-      enter: style.noneEnter,
-      enterActive: style.noneEnterActive,
-      enterDone: style.noneEnterActive,
-      exit: style.noneLeave,
-      exitActive: style.noneLeaveActive,
-      exitDone: style.noneLeaveActive,
-      appear: style.noneEnter,
-      appearActive: style.noneEnterActive
-    },
-    default: {
-      enter: style.defaultEnter,
-      enterActive: style.defaultEnterActive,
-      enterDone: style.defaultEnterActive,
-      exit: style.defaultLeave,
-      exitActive: style.defaultLeaveActive,
-      exitDone: style.defaultLeaveActive,
-      appear: style.defaultEnter,
-      appearActive: style.defaultEnterActive
-    }
-  };
-  let newClassNames = delayClassName ? Object.assign({}, animation[name], {
-    exit: `${delayClassName} ${animation[name].exit}`
-  }) : animation[name];
+  let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
+    exit: `${delayClassName} ${animationStyle[name].exit}`
+  }) : animaanimationStyletion[name];
   return /*#__PURE__*/React.createElement(CSSTransition, {
     classNames: newClassNames && newClassNames,
     in: isActive,

package/es/v1/Animation/utils.js

@@ -0,0 +1,83 @@
+import style from '../../common/transition.module.css';
+export const animationStyle = {
+  zoomIn: {
+    enter: style.zoomInEnter,
+    enterActive: style.zoomInEnterActive,
+    enterDone: style.zoomInEnterActive,
+    exit: style.zoomInLeave,
+    exitActive: style.zoomInLeaveActive,
+    exitDone: style.zoomInLeaveActive,
+    appear: style.zoomInEnter,
+    appearActive: style.zoomInEnterActive
+  },
+  scaleIn: {
+    enter: style.scaleInEnter,
+    enterActive: style.scaleInEnterActive,
+    enterDone: style.scaleInEnterActive,
+    exit: style.scaleInLeave,
+    exitActive: style.scaleInLeaveActive,
+    exitDone: style.scaleInLeaveActive,
+    appear: style.scaleInEnter,
+    appearActive: style.scaleInEnterActive
+  },
+  fadeIn: {
+    enter: style.fadeInEnter,
+    enterActive: style.fadeInEnterActive,
+    enterDone: style.fadeInEnterActive,
+    exit: style.fadeInLeave,
+    exitActive: style.fadeInLeaveActive,
+    exitDone: style.fadeInLeaveActive,
+    appear: style.fadeInEnter,
+    appearActive: style.fadeInEnterActive
+  },
+  slideLeft: {
+    enter: style.slideLeftEnter,
+    enterActive: style.slideLeftEnterActive,
+    enterDone: style.slideLeftEnterActive,
+    exit: style.slideLeftLeave,
+    exitActive: style.slideLeftLeaveActive,
+    exitDone: style.slideLeftLeaveActive,
+    appear: style.slideLeftEnter,
+    appearActive: style.slideLeftEnterActive
+  },
+  slideDown: {
+    enter: style.slideDownEnter,
+    enterActive: style.slideDownEnterActive,
+    enterDone: style.slideDownEnterActive,
+    exit: style.slideDownLeave,
+    exitActive: style.slideDownLeaveActive,
+    exitDone: style.slideDownLeaveActive,
+    appear: style.slideDownEnter,
+    appearActive: style.slideDownEnterActive
+  },
+  skewIn: {
+    enter: style.skewInEnter,
+    enterActive: style.skewInEnterActive,
+    enterDone: style.skewInEnterActive,
+    exit: style.skewInLeave,
+    exitActive: style.skewInLeaveActive,
+    exitDone: style.skewInLeaveActive,
+    appear: style.skewInEnter,
+    appearActive: style.skewInEnterActive
+  },
+  none: {
+    enter: style.noneEnter,
+    enterActive: style.noneEnterActive,
+    enterDone: style.noneEnterActive,
+    exit: style.noneLeave,
+    exitActive: style.noneLeaveActive,
+    exitDone: style.noneLeaveActive,
+    appear: style.noneEnter,
+    appearActive: style.noneEnterActive
+  },
+  default: {
+    enter: style.defaultEnter,
+    enterActive: style.defaultEnterActive,
+    enterDone: style.defaultEnterActive,
+    exit: style.defaultLeave,
+    exitActive: style.defaultLeaveActive,
+    exitDone: style.defaultLeaveActive,
+    appear: style.defaultEnter,
+    appearActive: style.defaultEnterActive
+  }
+};

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -107,7 +107,8 @@ export default function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: isAnimate && FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,

package/es/v1/Select/Select.js

@@ -357,7 +357,7 @@ export class SelectComponent extends Component {
         needCloseOnSelect && this.handlePopupClose(e);
       }
 
-      if (!isPopupOpen && isPopupOpenOnEnter) {
+      if (!isPopupReady && isPopupOpenOnEnter) {
         this.togglePopup(e);
       }
     } else if (keyCode === 27) {

package/es/v1/Tab/TabContentWrapper.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
@@ -12,16 +14,19 @@ const TabContentWrapper = _ref => {
     dataId,
     selectedTab,
     onScroll,
-    dataSelectorId
+    dataSelectorId,
+    tagName,
+    a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
-    dataSelectorId: dataSelectorId
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;

package/es/v1/Tab/props/defaultProps.js

@@ -9,7 +9,8 @@ export const TabContent_defaultProps = {
 };
 export const TabContentWrapper_defaultProps = {
   children: [],
-  dataSelectorId: 'tabContentWrapper'
+  dataSelectorId: 'tabContentWrapper',
+  a11y: {}
 };
 export const Tabs_defaultProps = {
   isAnimate: false,

package/es/v1/Tab/props/propTypes.js

@@ -40,7 +40,9 @@ export const TabContentWrapper_propTypes = {
   onScroll: PropTypes.func,
   selectedTab: PropTypes.string,
   style: PropTypes.object,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  a11y: PropTypes.object,
+  tagName: PropTypes.string
 };
 export const Tabs_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

package/lib/Animation/Animation.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _transitionModule = _interopRequireDefault(require("../common/transition.module.css"));
+var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -66,91 +66,9 @@ var Animation = /*#__PURE__*/function (_React$Component) {
           onExit = _this$props$onExit === void 0 ? function () {} : _this$props$onExit,
           _this$props$delayClas = _this$props.delayClassName,
           delayClassName = _this$props$delayClas === void 0 ? null : _this$props$delayClas;
-      var animation = {
-        zoomIn: {
-          enter: _transitionModule["default"].zoomInEnter,
-          enterActive: _transitionModule["default"].zoomInEnterActive,
-          enterDone: _transitionModule["default"].zoomInEnterActive,
-          exit: _transitionModule["default"].zoomInLeave,
-          exitActive: _transitionModule["default"].zoomInLeaveActive,
-          exitDone: _transitionModule["default"].zoomInLeaveActive,
-          appear: _transitionModule["default"].zoomInEnter,
-          appearActive: _transitionModule["default"].zoomInEnterActive
-        },
-        scaleIn: {
-          enter: _transitionModule["default"].scaleInEnter,
-          enterActive: _transitionModule["default"].scaleInEnterActive,
-          enterDone: _transitionModule["default"].scaleInEnterActive,
-          exit: _transitionModule["default"].scaleInLeave,
-          exitActive: _transitionModule["default"].scaleInLeaveActive,
-          exitDone: _transitionModule["default"].scaleInLeaveActive,
-          appear: _transitionModule["default"].scaleInEnter,
-          appearActive: _transitionModule["default"].scaleInEnterActive
-        },
-        fadeIn: {
-          enter: _transitionModule["default"].fadeInEnter,
-          enterActive: _transitionModule["default"].fadeInEnterActive,
-          enterDone: _transitionModule["default"].fadeInEnterActive,
-          exit: _transitionModule["default"].fadeInLeave,
-          exitActive: _transitionModule["default"].fadeInLeaveActive,
-          exitDone: _transitionModule["default"].fadeInLeaveActive,
-          appear: _transitionModule["default"].fadeInEnter,
-          appearActive: _transitionModule["default"].fadeInEnterActive
-        },
-        slideLeft: {
-          enter: _transitionModule["default"].slideLeftEnter,
-          enterActive: _transitionModule["default"].slideLeftEnterActive,
-          enterDone: _transitionModule["default"].slideLeftEnterActive,
-          exit: _transitionModule["default"].slideLeftLeave,
-          exitActive: _transitionModule["default"].slideLeftLeaveActive,
-          exitDone: _transitionModule["default"].slideLeftLeaveActive,
-          appear: _transitionModule["default"].slideLeftEnter,
-          appearActive: _transitionModule["default"].slideLeftEnterActive
-        },
-        slideDown: {
-          enter: _transitionModule["default"].slideDownEnter,
-          enterActive: _transitionModule["default"].slideDownEnterActive,
-          enterDone: _transitionModule["default"].slideDownEnterActive,
-          exit: _transitionModule["default"].slideDownLeave,
-          exitActive: _transitionModule["default"].slideDownLeaveActive,
-          exitDone: _transitionModule["default"].slideDownLeaveActive,
-          appear: _transitionModule["default"].slideDownEnter,
-          appearActive: _transitionModule["default"].slideDownEnterActive
-        },
-        skewIn: {
-          enter: _transitionModule["default"].skewInEnter,
-          enterActive: _transitionModule["default"].skewInEnterActive,
-          enterDone: _transitionModule["default"].skewInEnterActive,
-          exit: _transitionModule["default"].skewInLeave,
-          exitActive: _transitionModule["default"].skewInLeaveActive,
-          exitDone: _transitionModule["default"].skewInLeaveActive,
-          appear: _transitionModule["default"].skewInEnter,
-          appearActive: _transitionModule["default"].skewInEnterActive
-        },
-        none: {
-          enter: _transitionModule["default"].noneEnter,
-          enterActive: _transitionModule["default"].noneEnterActive,
-          enterDone: _transitionModule["default"].noneEnterActive,
-          exit: _transitionModule["default"].noneLeave,
-          exitActive: _transitionModule["default"].noneLeaveActive,
-          exitDone: _transitionModule["default"].noneLeaveActive,
-          appear: _transitionModule["default"].noneEnter,
-          appearActive: _transitionModule["default"].noneEnterActive
-        },
-        "default": {
-          enter: _transitionModule["default"].defaultEnter,
-          enterActive: _transitionModule["default"].defaultEnterActive,
-          enterDone: _transitionModule["default"].defaultEnterActive,
-          exit: _transitionModule["default"].defaultLeave,
-          exitActive: _transitionModule["default"].defaultLeaveActive,
-          exitDone: _transitionModule["default"].defaultLeaveActive,
-          appear: _transitionModule["default"].defaultEnter,
-          appearActive: _transitionModule["default"].defaultEnterActive
-        }
-      };
-      var newClassNames = delayClassName ? Object.assign({}, animation[name], {
-        exit: "".concat(delayClassName, " ").concat(animation[name].exit)
-      }) : animation[name];
+      var newClassNames = delayClassName ? Object.assign({}, _utils.animationStyle[name], {
+        exit: "".concat(delayClassName, " ").concat(_utils.animationStyle[name].exit)
+      }) : _utils.animationStyle[name];
       return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
         classNames: newClassNames && newClassNames,
         "in": isActive,