@zohodesk/dot 1.0.0-temp-132 → 1.0.0-temp-133

package/README.md

@@ -2,6 +2,26 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.xxx
+
+- Contrast option implemented through preprocess. Category key value added for all color variables.
+
+# 1.0.0-beta.250
+
+- - **FreezeLayer** - converted to functional component
+
+# 1.0.0-beta.249
+ 
+- **FreezeLayer** - Issue fix: While click on the freezelayer, drawer/any dialog box won't close if any text highlighted in the product.
+
+# 1.0.0-beta.248
+ 
+- **AvatarFlip** - `customProps` has been added.
+
+- **AvatarStatus** -  `needDefaultBorder` prop added for all components.
+
+- **AvatarWithTeam** - `teamBorderActive` prop has been added.
+
 # 1.0.0-beta.247
  
 - **ActionButton** - arrowBoxDataId prop removed .

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -4,7 +4,7 @@
 	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
 	--zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);
+	--zdt_actionButton_separator_border: var(--zdt_m_cta_secondary_border_borderLighterBoth);
 	--zdt_actionButton_separator_hover_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primaryFilled_text: var(--zdt_cta_secondary_text);
 	--zdt_actionButton_primary_text: var(--zdt_cta_primary_text);

package/assets/Appearance/default/mode/dotDefaultMode.module.css

@@ -4,7 +4,7 @@
 	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
 	--zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);
+	--zdt_actionButton_separator_border: var(--zdt_m_cta_secondary_border_borderLighterBoth);
 	--zdt_actionButton_separator_hover_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primaryFilled_text: var(--zdt_cta_secondary_text);
 	--zdt_actionButton_primary_text: var(--zdt_cta_primary_text);

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -4,7 +4,7 @@
 	--zdt_actionButton_primaryFilled_hover_bg: var(--zdt_cta_primary_hover_bg);
 	--zdt_actionButton_primary_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primary_hover_border: var(--zdt_cta_primary_hover_border);
-	--zdt_actionButton_separator_border: var(--zdt_cta_secondary_border);
+	--zdt_actionButton_separator_border: var(--zdt_m_cta_secondary_border_borderLighterBoth);
 	--zdt_actionButton_separator_hover_border: var(--zdt_cta_primary_border);
 	--zdt_actionButton_primaryFilled_text: var(--zdt_cta_secondary_text);
 	--zdt_actionButton_primary_text: var(--zdt_cta_primary_text);

package/es/ActionButton/ActionButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';

package/es/Attachment/Attachment.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Link from '../Link/Link';
 import style from './Attachment.module.css';

package/es/AttachmentViewer/AttachmentViewer.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from './props/defaultProps';
 import { AttachmentViewer_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';

package/es/ChannelIcon/ChannelIcon.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import { getChannelMappingObj } from '../utils/ChannelIconMapping';

package/es/Drawer/Drawer.js

@@ -9,7 +9,7 @@ import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/V
 import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import Heading from '@zohodesk/components/lib/Heading/Heading';
 import IconButton from '../IconButton/IconButton';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';

package/es/FreezeLayer/FreezeLayer.js

@@ -1,121 +1,68 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
+import { mergeStyle } from '@zohodesk/components/es/utils/';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import { getDotLibraryConfig } from '../Provider/Config';
-export default class FreezeLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: props.isActive,
-      isChildActive: false
-    };
-    this.getNextIndex = getZIndex(this);
-    this.isFreezeLayerEnabled = false;
-  }
-  enableFreeze() {
-    if (!this.isFreezeLayerEnabled) {
-      this.isFreezeLayerEnabled = true;
-      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
-      freezeLayerEnable && freezeLayerEnable();
-    }
-  }
-  disableFreeze() {
-    if (this.isFreezeLayerEnabled) {
-      this.isFreezeLayerEnabled = false;
-      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
-      freezeLayerDisable && freezeLayerDisable();
-    }
-  }
-  componentDidMount() {
-    let {
-      isActive
-    } = this.props;
-    if (isActive) {
-      this.setState({
-        isChildActive: true
-      });
-      this.enableFreeze();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    let {
-      isActive
-    } = this.props;
-    if (isActive != prevProps.isActive) {
-      if (isActive) {
-        this.enableFreeze();
-        this.setState({
-          isActive: true
-        }, () => {
-          this.setState({
-            isChildActive: true
-          });
-        });
-      } else {
-        this.disableFreeze();
-        this.setState({
-          isChildActive: false
-        }, () => {
-          this.setState({
-            isActive: false
-          });
-        });
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.disableFreeze();
-  }
-  render() {
-    let {
-      children,
-      align,
-      childAnimationName,
-      palette,
-      onClick,
-      animationName,
-      zIndex,
-      runOnMount,
-      forwardRef,
-      isSvgMask,
-      customClass,
-      needAutoZindex
-    } = this.props;
-    let {
-      isActive,
-      isChildActive
-    } = this.state;
-    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: animationName && animationName,
-      isActive: isActive,
-      runOnMount: runOnMount
-    }, /*#__PURE__*/React.createElement("div", {
-      style: isActive && needAutoZindex ? {
-        zIndex: `${this.getNextIndex()}`
-      } : {},
-      className: `
-              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
-            `,
-      onClick: onClick ? onClick : null,
-      ref: forwardRef
-    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: childAnimationName,
-      isActive: isChildActive,
-      enterDelay: palette === 'plain' ? 0 : 300,
-      component: Container,
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children))));
-  }
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import cssJSLogic from './css/cssJSLogic';
+import useFreezeLayer from './useFreezeLayer';
+import style from './css/FreezeLayer.module.css';
+export default function FreezeLayer(props) {
+  let {
+    isActive: propsActive,
+    children,
+    align,
+    childAnimationName,
+    palette,
+    onClick,
+    animationName,
+    runOnMount,
+    forwardRef,
+    isSvgMask,
+    needAutoZindex,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    freezeClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const getNextIndex = useZIndex();
+  const {
+    isActive,
+    isChildActive,
+    handleClick
+  } = useFreezeLayer({
+    isActive: propsActive,
+    onClick
+  });
+  return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: animationName && animationName,
+    isActive: isActive,
+    runOnMount: runOnMount
+  }, /*#__PURE__*/React.createElement("div", {
+    style: isActive && needAutoZindex ? {
+      zIndex: `${getNextIndex()}`
+    } : {},
+    className: freezeClass,
+    onClick: handleClick,
+    ref: forwardRef
+  }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: childAnimationName,
+    isActive: isChildActive,
+    enterDelay: palette === 'plain' ? 0 : 300,
+    component: Container,
+    alignBox: "row",
+    align: align,
+    dataId: "reactFreezeLayer"
+  }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: align,
+    dataId: "reactFreezeLayer"
+  }, children))));
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;

package/es/FreezeLayer/css/cssJSLogic.js

@@ -0,0 +1,23 @@
+import { compileClassNames } from '@zohodesk/components/es/utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    zIndex,
+    palette,
+    isSvgMask,
+    customClass
+  } = props;
+  let zIndexClass = `index${zIndex}`;
+  let freezeClass = compileClassNames({
+    [style.container]: true,
+    [customClass]: !!customClass,
+    [style[zIndexClass]]: !!zIndex,
+    [style[palette]]: !isSvgMask && !!palette
+  });
+  return {
+    freezeClass
+  };
+}

package/es/FreezeLayer/index.js

@@ -0,0 +1,2 @@
+export { default as FreezeLayer } from './FreezeLayer';
+export { default as FreezeLayerPropTypes } from './props/propTypes';

package/es/FreezeLayer/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   zIndex: '5',
   isSvgMask: false,
   customClass: '',
+  customStyle: {},
   needAutoZindex: true
 };

package/es/FreezeLayer/props/propTypes.js

@@ -13,5 +13,6 @@ export const propTypes = {
   onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
+  customStyle: PropTypes.object,
   zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
 };

package/es/FreezeLayer/useFreezeLayer.js

@@ -0,0 +1,50 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { isTextSelected } from '@zohodesk/components/es/utils/Common';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default function useFreezeLayer(_ref) {
+  let {
+    isActive: propsActive,
+    onClick
+  } = _ref;
+  const [isActive, setActive] = useState(propsActive);
+  const [isChildActive, setChildActive] = useState(false);
+  let isFreezeLayerEnabled = useRef(false);
+  function handleClick() {
+    if (onClick && !isTextSelected()) {
+      onClick();
+    }
+  }
+  function enableFreeze() {
+    if (!isFreezeLayerEnabled.current) {
+      isFreezeLayerEnabled.current = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+  function disableFreeze() {
+    if (isFreezeLayerEnabled.current) {
+      isFreezeLayerEnabled.current = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+  useEffect(() => {
+    if (propsActive) {
+      enableFreeze();
+      setActive(true);
+      setTimeout(() => setChildActive(true));
+    } else {
+      disableFreeze();
+      setChildActive(false);
+      setTimeout(() => setActive(false));
+    }
+    return () => {
+      disableFreeze();
+    };
+  }, [propsActive]);
+  return {
+    isActive,
+    isChildActive,
+    handleClick
+  };
+}

package/es/IconButton/IconButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';

package/es/ImportantNotes/ImportantNotes.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './ImportantNotes.module.css';
 export default class ImportantNotes extends React.Component {
   constructor(props) {

package/es/Message/Message.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import AutoClose from '../actions/AutoClose';
 import style from './Message.module.css';
 export default class Message extends React.Component {

package/es/MessageBanner/MessageBanner.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Link from '../Link/Link';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import style from './MessageBanner.module.css';
 export default class MessageBanner extends React.Component {

package/es/NewStar/NewStar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
 import style from './NewStar.module.css';
 export default class NewStar extends React.Component {

package/es/ToastMessage/ToastMessage.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 //components
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';

package/es/Upload/Upload.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Image from '../Image/Image';
 import style from './Upload.module.css';

package/es/alert/AlertHeader/AlertHeader.js

@@ -3,7 +3,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Title from '../../lookup/header/Title/Title';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Close from '../../lookup/header/Close/Close';
 import style from './AlertHeader.module.css';
 export default class AlertHeader extends Component {

package/es/avatar/AvatarClose/AvatarClose.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './AvatarClose.module.css';
 export default class AvatarClose extends React.Component {
   constructor(props) {

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './AvatarCollision.module.css';
 export default class AvatarCollision extends React.Component {
   constructor(props) {

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
 import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
 import style from './AvatarIcon.module.css';

package/es/avatar/AvatarThread/AvatarThread.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './AvatarThread.module.css';
 export default class AvatarThread extends React.Component {
   render() {

package/es/avatar/AvatarUser/AvatarUser.js

@@ -6,7 +6,7 @@ import { propTypes } from './props/propTypes';
 /**** Components ****/
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarIcon from '../AvatarIcon/AvatarIcon';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import style from './AvatarUser.module.css';
 /**** Methods ****/
 

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container } from '@zohodesk/components/lib/Layout';
+import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import style from './FreezeLayer.module.css';
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default class FreezeLayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isActive: props.isActive,
+      isChildActive: false
+    };
+    this.getNextIndex = getZIndex(this);
+    this.isFreezeLayerEnabled = false;
+  }
+  enableFreeze() {
+    if (!this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+  disableFreeze() {
+    if (this.isFreezeLayerEnabled) {
+      this.isFreezeLayerEnabled = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+  componentDidMount() {
+    let {
+      isActive
+    } = this.props;
+    if (isActive) {
+      this.setState({
+        isChildActive: true
+      });
+      this.enableFreeze();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
+    if (isActive != prevProps.isActive) {
+      if (isActive) {
+        this.enableFreeze();
+        this.setState({
+          isActive: true
+        }, () => {
+          this.setState({
+            isChildActive: true
+          });
+        });
+      } else {
+        this.disableFreeze();
+        this.setState({
+          isChildActive: false
+        }, () => {
+          this.setState({
+            isActive: false
+          });
+        });
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.disableFreeze();
+  }
+  render() {
+    let {
+      children,
+      align,
+      childAnimationName,
+      palette,
+      onClick,
+      animationName,
+      zIndex,
+      runOnMount,
+      forwardRef,
+      isSvgMask,
+      customClass,
+      needAutoZindex
+    } = this.props;
+    let {
+      isActive,
+      isChildActive
+    } = this.state;
+    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: animationName && animationName,
+      isActive: isActive,
+      runOnMount: runOnMount
+    }, /*#__PURE__*/React.createElement("div", {
+      style: isActive && needAutoZindex ? {
+        zIndex: `${this.getNextIndex()}`
+      } : {},
+      className: `
+              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
+            `,
+      onClick: onClick ? onClick : null,
+      ref: forwardRef
+    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: childAnimationName,
+      isActive: isChildActive,
+      enterDelay: palette === 'plain' ? 0 : 300,
+      component: Container,
+      alignBox: "row",
+      align: align,
+      dataId: "reactFreezeLayer"
+    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: align,
+      dataId: "reactFreezeLayer"
+    }, children))));
+  }
+}
+FreezeLayer.propTypes = propTypes;
+FreezeLayer.defaultProps = defaultProps;
+
+// if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }