@zohodesk/dot 1.0.0-beta.233 → 1.0.0-beta.235

package/es/list/Thread/Thread.module.css

@@ -16,15 +16,9 @@
 .align_left .count {
   position: absolute;
   line-height: normal;
-  top: var(--zd_size3);
-}
-[dir=ltr] .align_left .count {
   text-align: left;
   left: var(--zd_size8);
-}
-[dir=rtl] .align_left .count {
-  text-align: right;
-  right: var(--zd_size8);
+  top: var(--zd_size3);
 }
 .align_right {
   composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -32,12 +26,6 @@
 .align_right .count {
   position: relative;
   bottom: var(--zd_size2);
-}
-[dir=ltr] .align_right .count {
   right: var(--zd_size5);
   float: right;
-}
-[dir=rtl] .align_right .count {
-  left: var(--zd_size5);
-  float: left;
 }

package/es/list/Thread/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  align: 'left',
+  className: ''
+};

package/es/list/Thread/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  align: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+  count: PropTypes.string,
+  dataId: PropTypes.string,
+  iconTitle: PropTypes.string
+};

package/es/list/UserTime/UserTime.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Box } from '@zohodesk/components/lib/Layout';
 import { UserTimeDiffFormat } from '@zohodesk/i18n';
@@ -70,22 +71,8 @@ export default class UserTime extends Component {
   }
 
 }
-UserTime.propTypes = {
-  ago: PropTypes.string,
-  containerClass: PropTypes.string,
-  dataId: PropTypes.string,
-  format: PropTypes.func,
-  icon: PropTypes.oneOf(['closedTime', 'overdue', 'createdTime', 'completedTask', 'dueTime']),
-  iconClass: PropTypes.string,
-  iconColor: PropTypes.oneOf(['red', 'green', 'orange', 'gray']),
-  later: PropTypes.string,
-  textClass: PropTypes.string,
-  title: PropTypes.string,
-  to: PropTypes.string
-};
-UserTime.defaultProps = {
-  dataId: 'userTime'
-};
+UserTime.propTypes = propTypes;
+UserTime.defaultProps = defaultProps;
 
 if (false) {
   UserTime.docs = {

package/es/list/UserTime/UserTime.module.css

@@ -31,15 +31,9 @@
 }
 .iconStyle {
   display: block;
-}
-[dir=ltr] .iconStyle {
   margin-right: var(--zd_size3);
   margin-left: var(--zd_size1);
 }
-[dir=rtl] .iconStyle {
-  margin-left: var(--zd_size3);
-  margin-right: var(--zd_size1);
-}
 /* colors */
 .iconColor {
   color: var(--icon_color)

package/es/list/UserTime/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  dataId: 'userTime'
+};

package/es/list/UserTime/props/propTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  ago: PropTypes.string,
+  containerClass: PropTypes.string,
+  dataId: PropTypes.string,
+  format: PropTypes.func,
+  icon: PropTypes.oneOf(['closedTime', 'overdue', 'createdTime', 'completedTask', 'dueTime']),
+  iconClass: PropTypes.string,
+  iconColor: PropTypes.oneOf(['red', 'green', 'orange', 'gray']),
+  later: PropTypes.string,
+  textClass: PropTypes.string,
+  title: PropTypes.string,
+  to: PropTypes.string
+};

package/es/list/listCommon.module.css

@@ -5,12 +5,9 @@
 .inlineFlex {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .avatarMargin {
+.avatarMargin {
   margin-right: var(--zd_size25);
 }
-[dir=rtl] .avatarMargin {
-  margin-left: var(--zd_size25);
-}
 .subject {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   font-size: var(--zd_font_size16);
@@ -21,13 +18,8 @@
 }
 .statusColumn {
   composes: inlineBlockMiddle;
-}
-[dir=ltr] .statusColumn {
   text-align: right;
 }
-[dir=rtl] .statusColumn {
-  text-align: left;
-}
 .classic .floatingIconContainer {
   display: none;
 }

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Box, Container } from '@zohodesk/components/lib/Layout';
@@ -449,71 +450,6 @@ if (false) {
   };
 }
 
-StatusDropdown.defaultProps = {
-  keyName: 'name',
-  idName: 'key',
-  isArrow: false,
-  searchBoxSize: 'small',
-  isDisabled: false,
-  showIconOnHover: false,
-  isReadOnly: false,
-  isEditable: true,
-  isDataLoaded: true,
-  needTick: true,
-  targetAlign: 'vertical',
-  needResponsive: true,
-  arrowIconPosition: 'default',
-  boxSize: 'medium',
-  needExternalPopupState: false,
-  statusColor: 'statusColor'
-};
-StatusDropdown.propTypes = {
-  activeStyle: PropTypes.string,
-  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
-  bottom: PropTypes.number,
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  hoverStyle: PropTypes.string,
-  idName: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isEditable: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearch: PropTypes.bool,
-  keyName: PropTypes.string,
-  left: PropTypes.number,
-  needExternalPopupState: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onTogglePopup: PropTypes.func,
-  options: PropTypes.array.isRequired,
-  placeHolderText: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  right: PropTypes.number,
-  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  searchEmptyHint: PropTypes.string,
-  searchErrorText: PropTypes.string,
-  showIconOnHover: PropTypes.bool,
-  showOnHover: PropTypes.bool,
-  statusColor: PropTypes.string,
-  targetAlign: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around']),
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  value: PropTypes.node
-};
+StatusDropdown.defaultProps = defaultProps;
+StatusDropdown.propTypes = propTypes;
 export default Popup(StatusDropdown);

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -14,23 +14,16 @@
 .title {
   padding-top: var(--zd_size6);
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
+.default_arrow,
+.overlay_arrow {
   padding: 0 0 0 var(--zd_size5);
 }
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0;
-}
 .overlay_arrow {
   position: absolute;
+  left: 100%;
   top: 50%;
   transform: translateY(-50%) perspective(1px);
 }
-[dir=ltr] .overlay_arrow {
-  left: 100%;
-}
-[dir=rtl] .overlay_arrow {
-  right: 100%;
-}
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
@@ -57,18 +50,12 @@
 .cursor {
   cursor: pointer;
 }
-[dir=ltr] .dropBoxContainer {
+.dropBoxContainer {
   text-align: left;
 }
-[dir=rtl] .dropBoxContainer {
-  text-align: right;
-}
-[dir=ltr] .iconBox {
+.iconBox {
   margin-right: var(--zd_size4);
 }
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4);
-}
 .iconBox > i {
   display: block;
 }
@@ -77,8 +64,8 @@
   margin: 0 auto;
 }
 .seperatedLine {
-  height: var(--zd_size1);
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
+  height: var(--zd_size1);
   margin: var(--zd_size9) 0 var(--zd_size10);
 }
 .hiddenInput {

package/es/list/status/StatusDropdown/props/defaultProps.js

@@ -0,0 +1,18 @@
+export const defaultProps = {
+  keyName: 'name',
+  idName: 'key',
+  isArrow: false,
+  searchBoxSize: 'small',
+  isDisabled: false,
+  showIconOnHover: false,
+  isReadOnly: false,
+  isEditable: true,
+  isDataLoaded: true,
+  needTick: true,
+  targetAlign: 'vertical',
+  needResponsive: true,
+  arrowIconPosition: 'default',
+  boxSize: 'medium',
+  needExternalPopupState: false,
+  statusColor: 'statusColor'
+};

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  activeStyle: PropTypes.string,
+  arrowIconPosition: PropTypes.oneOf(['default', 'overlay']),
+  bottom: PropTypes.number,
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  boxSize: PropTypes.oneOf(['small', 'medium', 'mlarge', 'large']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  hoverStyle: PropTypes.string,
+  idName: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isDataLoaded: PropTypes.bool,
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isEditable: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupActive: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearch: PropTypes.bool,
+  keyName: PropTypes.string,
+  left: PropTypes.number,
+  needExternalPopupState: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onTogglePopup: PropTypes.func,
+  options: PropTypes.array.isRequired,
+  placeHolderText: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  right: PropTypes.number,
+  searchBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  searchEmptyHint: PropTypes.string,
+  searchErrorText: PropTypes.string,
+  showIconOnHover: PropTypes.bool,
+  showOnHover: PropTypes.bool,
+  statusColor: PropTypes.string,
+  targetAlign: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around']),
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  value: PropTypes.node
+};

package/es/list/status/StatusListItem/StatusListItem.js

@@ -1,8 +1,9 @@
-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); }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /**** Components ****/
 
@@ -111,47 +112,8 @@ export default class StatusListItem extends React.Component {
   }
 
 }
-StatusListItem.defaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  id: '',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  bulletColor: 'black',
-  a11y: {}
-};
-StatusListItem.propTypes = {
-  active: PropTypes.bool,
-  autoHover: PropTypes.bool,
-  bulletColor: PropTypes.oneOf(['black', 'orange', 'green']),
-  disableTitle: PropTypes.string,
-  getRef: PropTypes.func,
-  highlight: PropTypes.bool,
-  href: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  index: PropTypes.number,
-  isDisabled: PropTypes.bool,
-  isLink: PropTypes.bool,
-  needBorder: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  target: PropTypes.oneOf(['blank', 'self']),
-  title: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaSelected: PropTypes.bool,
-    ariaHidden: PropTypes.bool
-  })
-};
+StatusListItem.defaultProps = defaultProps;
+StatusListItem.propTypes = propTypes;
 
 if (false) {
   StatusListItem.docs = {

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -2,56 +2,46 @@
   color: var(--zdt_statuslistitem_list_text);
   font-size: var(--zd_font_size13);
   position: relative;
-  list-style: none;
   cursor: pointer;
+  list-style: none;
 }
-[dir=ltr] .withBorder {
+.withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
-[dir=rtl] .withBorder {
-  border-right: 1px solid var(--zdt_statuslistitem_default_border);
-}
-[dir=ltr] .small {
+.small {
   padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
 }
-[dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
-}
 .medium {
   padding: var(--zd_size9) var(--zd_size20);
 }
 .large {
-  height: var(--zd_size48);
-}
-[dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
-}
-[dir=rtl] .large {
-  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  height: var(--zd_size48);
 }
 
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 
-[dir=ltr] .withBorder.active {
+.withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
 
-[dir=rtl] .withBorder.active {
-  border-right-color: var(--zdt_statuslistitem_default_active_border);
-}
-
-.default.hover, .default.effect:hover {
+.default.hover,
+.default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
-.primary.hover, .primary.effect:hover, .selected {
+.primary.hover,
+.primary.effect:hover,
+.selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
-.secondary.hover, .secondary.effect:hover {
+.secondary.hover,
+.secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
-.list.active.default, .list.active.primary {
+.list.active.default,
+.list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
 .list.active.secondary {
@@ -65,34 +55,21 @@
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-}
-[dir=ltr] .tickIcon {
   right: var(--zd_size20);
 }
-[dir=rtl] .tickIcon {
-  left: var(--zd_size20);
-}
 .tickIcon > i {
   display: block;
 }
-[dir=ltr] .active.withTick {
+.active.withTick {
   padding-right: var(--zd_size39);
 }
-[dir=rtl] .active.withTick {
-  padding-left: var(--zd_size39);
-}
 /* Status Type */
 .statusType {
   width: var(--zd_size8);
   height: var(--zd_size8);
   border-radius: 50%;
-}
-[dir=ltr] .statusType {
   margin-right: var(--zd_size13);
 }
-[dir=rtl] .statusType {
-  margin-left: var(--zd_size13);
-}
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }

package/es/list/status/StatusListItem/props/defaultProps.js

@@ -0,0 +1,14 @@
+export const defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  id: '',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  bulletColor: 'black',
+  a11y: {}
+};

package/es/list/status/StatusListItem/props/propTypes.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  autoHover: PropTypes.bool,
+  bulletColor: PropTypes.oneOf(['black', 'orange', 'green']),
+  disableTitle: PropTypes.string,
+  getRef: PropTypes.func,
+  highlight: PropTypes.bool,
+  href: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  index: PropTypes.number,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  target: PropTypes.oneOf(['blank', 'self']),
+  title: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaSelected: PropTypes.bool,
+    ariaHidden: PropTypes.bool
+  })
+};

package/es/lookup/EmptyPage/EmptyPage.js

@@ -1,6 +1,7 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
 import EmptyAccounts from '@zohodesk/svg/lib/emptystate/version3/EmptyAccounts';
 import EmptyContact from '@zohodesk/svg/lib/emptystate/version3/EmptyContact';
@@ -55,14 +56,8 @@ export default class EmptyPage extends Component {
   }
 
 }
-EmptyPage.propTypes = {
-  title: PropTypes.string,
-  type: PropTypes.oneOf(['search', 'account', 'contact', 'product'])
-};
-EmptyPage.defaultProps = {
-  title: 'No Results Found',
-  type: 'search'
-};
+EmptyPage.propTypes = propTypes;
+EmptyPage.defaultProps = defaultProps;
 
 if (false) {
   EmptyPage.docs = {

package/es/lookup/EmptyPage/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  title: 'No Results Found',
+  type: 'search'
+};

package/es/lookup/EmptyPage/props/propTypes.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['search', 'account', 'contact', 'product'])
+};

package/es/lookup/Lookup/Lookup.js

@@ -1,6 +1,7 @@
 /*** Libraries ***/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /*** Components ***/
 
 import FreezeLayer from '../../FreezeLayer/FreezeLayer';
@@ -82,28 +83,8 @@ export default class Lookup extends Component {
   }
 
 }
-Lookup.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaDescribedby: PropTypes.string,
-    ariaModal: PropTypes.bool
-  }),
-  onKeyDown: PropTypes.func,
-  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
-};
-Lookup.defaultProps = {
-  size: 'medium',
-  customClass: '',
-  a11y: {},
-  childAnimationName: 'flyDown'
-};
+Lookup.propTypes = propTypes;
+Lookup.defaultProps = defaultProps;
 
 if (false) {
   Lookup.docs = {

package/es/lookup/Lookup/Lookup.module.css

@@ -1,12 +1,12 @@
 .container {
-  font-size: var(--zd_font_size16);
   padding-bottom: var(--zd_size10);
+  font-size: var(--zd_font_size16);
 }
 .box {
   position: relative;
+  margin: auto;
   height: 100%;
   width: 100%;
-  margin: auto;
 }
 /* Size */
 .smallSize {

package/es/lookup/Lookup/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  size: 'medium',
+  customClass: '',
+  a11y: {},
+  childAnimationName: 'flyDown'
+};