@zohodesk/dot 1.0.0-temp-156 → 1.0.0-temp-159

package/es/v1/ChannelIcon/ChannelIcon.js

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import { Icon } from '@zohodesk/icons';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
+import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+import { defaultProps } from '../../ChannelIcon/props/defaultProps';
+import { propTypes } from '../../ChannelIcon/props/propTypes';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import style from '../../ChannelIcon/ChannelIcon.module.css';
+
+const ChannelIcon = props => {
+  let {
+    name,
+    action,
+    iconSize,
+    iconTitle,
+    size,
+    topicIcon,
+    topicIconTitle,
+    topicIconSize,
+    topicIconColor,
+    iconClass,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    iconColor,
+    needTopicBorder,
+    topicClass,
+    renderIconOnly,
+    iconName,
+    title,
+    dataSelectorId
+  } = props;
+  let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
+  let customizedChannelName = null;
+
+  if (!defaultChannelObj) {
+    customizedChannelName = name;
+  } else {
+    iconName = defaultChannelObj[action];
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: style.container,
+    "data-selector-id": dataSelectorId
+  }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
+    name: customizedChannelName,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    dataId: dataId,
+    needTitle: title,
+    title: title
+  }) : !renderIconOnly ? iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
+    name: iconName,
+    iconSize: iconSize,
+    size: size,
+    iconClass: `${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''} ${iconClass ? iconClass : ''} `,
+    dataId: dataId,
+    className: className,
+    iconColor: iconColor,
+    title: iconTitle
+  }) : /*#__PURE__*/React.createElement(Avatar, {
+    name: name,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    needTitle: title,
+    title: title
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${iconClass ? iconClass : ''} ${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''}`,
+    title: iconTitle,
+    dataId: dataId
+  }), topicIcon ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass ? topicClass : ''}`,
+    "data-title": topicIconTitle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: topicIcon,
+    size: topicIconSize,
+    iconClass: style[`topic_${topicIconColor}`] ? `${style.topicIcon} ${style[`topic_${topicIconColor}`]}` : '',
+    dataId: dataId
+  })) : null);
+};
+
+ChannelIcon.defaultProps = defaultProps;
+ChannelIcon.propTypes = propTypes;
+export default ChannelIcon;

package/es/v1/Drawer/Drawer.js

@@ -0,0 +1,271 @@
+import React, { useRef } from 'react';
+import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from '../../Drawer/props/defaultProps';
+import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from '../../Drawer/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
+import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { Icon } from '@zohodesk/icons';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+import Heading from '@zohodesk/components/es/v1/Heading/Heading';
+import FreezeLayer from '../FreezeLayer/FreezeLayer';
+import FormAction from '../FormAction/FormAction';
+import IconButton from '../IconButton/IconButton';
+import style from '../../Drawer/Drawer.module.css';
+export function Header(props) {
+  let {
+    title,
+    onClose,
+    children,
+    className,
+    paddingSize,
+    closeTitle,
+    iconName,
+    iconSize,
+    onIconClick,
+    isIconBold,
+    dataId,
+    flexible,
+    getChildren,
+    iconTitle,
+    isBoxIcon,
+    getTitleChildren
+  } = props;
+  return /*#__PURE__*/React.createElement(CardHeader, {
+    customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
+    dataId: dataId
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: style.subheader
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/React.createElement(Box, {
+    className: style.iconWrapper
+  }, isBoxIcon ? /*#__PURE__*/React.createElement(IconButton, {
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onIconClick,
+    hoverType: "border",
+    isBold: isIconBold,
+    title: iconTitle
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    onClick: onIconClick,
+    title: iconTitle
+  })) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
+    flexible: flexible,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical"
+  }, title ? /*#__PURE__*/React.createElement(Box, {
+    "data-title": title,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Heading, {
+    title: title,
+    className: style.title,
+    a11y: {
+      tabindex: '0'
+    }
+  })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onClose,
+    dataId: "closeButton",
+    title: closeTitle,
+    iconName: "ZD-cross",
+    iconSize: "11",
+    a11y: {
+      ariaLabel: 'Close'
+    }
+  })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getChildren())) : null);
+}
+Header.propTypes = Header_propTypes;
+Header.defaultProps = Header_defaultProps;
+export function Content(props) {
+  let {
+    children,
+    className,
+    paddingSize,
+    eleRef
+  } = props;
+  return /*#__PURE__*/React.createElement(CardContent, {
+    scroll: "vertical",
+    isScrollAttribute: true,
+    customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
+    eleRef: eleRef
+  }, children);
+}
+Content.propTypes = Content_propTypes;
+export function Footer(props) {
+  let {
+    paddingLeftSize,
+    paddingRightClass,
+    children,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(FormAction, {
+    size: size,
+    paddingLeftSize: paddingLeftSize,
+    paddingRightClass: paddingRightClass
+  }, children);
+}
+Footer.propTypes = Footer_propTypes;
+Footer.defaultProps = Footer_defaultProps;
+export default function Drawer(props) {
+  const contentRef = useRef(null);
+  const getNextIndex = useZIndex();
+
+  function drawers(uptoTablet, styleByResolutions) {
+    let {
+      children,
+      size,
+      paddingSize,
+      subDrawerActive,
+      subDrawerChildren,
+      onBodyClick,
+      onClose,
+      needFocusScope,
+      customProps
+    } = props;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      needAutoFocus = true,
+      needRestoreFocus = true,
+      needListNavigation = false,
+      needFocusLoop = true,
+      needEnterAction = false
+    } = focusScopeProps;
+    let childrenWithProps = React.Children.map(children, child => {
+      if (child.type === Header || child.type === Footer || child.type === Content) {
+        let {
+          paddingSize: childPaddingSize
+        } = child.props || {};
+        return paddingSize || childPaddingSize ? /*#__PURE__*/React.cloneElement(child, {
+          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+        }) : child;
+      }
+
+      return child;
+    });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: contentRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
+      className: style.columns
+    }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: "slideRight",
+      isActive: subDrawerActive
+    }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
+      className: styleByResolutions,
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: contentRef,
+      needAutoFocus: needAutoFocus,
+      needFocusLoop: needFocusLoop,
+      needRestoreFocus: needRestoreFocus,
+      needListNavigation: needListNavigation,
+      onClose: onClose,
+      needEnterAction: needEnterAction
+    }, content) : content);
+  }
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
+
+  let {
+    needFreeze,
+    palette,
+    isActive,
+    onClose,
+    forwardRef,
+    responsiveId,
+    subDrawerSize,
+    subDrawerClass,
+    subDrawerActive,
+    customClass,
+    needAutoZindex,
+    innerPortalName
+  } = props;
+  return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
+    return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
+      onClick: onClose,
+      isActive: isActive,
+      animationName: "fade",
+      childAnimationName: "slideRight",
+      palette: palette,
+      forwardRef: forwardRef,
+      customClass: customClass,
+      needAutoZindex: needAutoZindex
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, uptoTablet ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }) : null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: uptoTablet ? style.mobModal : style.drawerModal
+    }, !subDrawerActive && innerPortalName ? /*#__PURE__*/React.createElement("div", {
+      "data-portal": innerPortalName
+    }) : null)), drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      isActive: isActive,
+      name: "slideRight"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "right",
+      alignBox: "row",
+      scroll: "none",
+      eleRef: forwardRef,
+      className: `${style.isOverlay} ${customClass}`,
+      style: isActive && needAutoZindex ? {
+        zIndex: `${getNextIndex()}`
+      } : {}
+    }, drawers(uptoTablet, styleByResolutions)));
+  });
+}
+Drawer.propTypes = Drawer_propTypes;
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/v1/ExternalLink/ExternalLink.js

@@ -0,0 +1,49 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import { defaultProps } from '../../ExternalLink/props/defaultProps';
+import { propTypes } from '../../ExternalLink/props/propTypes';
+/**** CSS ****/
+
+import style from '../../ExternalLink/ExternalLink.module.css';
+
+const ExternalLink = props => {
+  const {
+    href,
+    title,
+    target,
+    className,
+    children,
+    rel,
+    dataId,
+    onClick,
+    customProps
+  } = props;
+
+  let addHttp = url => {
+    let regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
+
+    if (!regEx.test(url)) {
+      return `http://${url}`;
+    }
+
+    return url;
+  };
+
+  let urlOutput = href && typeof href !== 'boolean' ? addHttp(String(href)) : 'javascript:void(0);';
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: urlOutput,
+    target: target,
+    className: `${style.link} ${className ? className : ''}`,
+    "data-title": title,
+    rel: rel,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick
+  }, customProps), children);
+};
+
+ExternalLink.defaultProps = defaultProps;
+ExternalLink.propTypes = propTypes;
+export default ExternalLink;

package/es/v1/FlipCard/FlipCard.js

@@ -0,0 +1,130 @@
+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 { defaultProps } from '../../FlipCard/props/defaultProps';
+import { propTypes } from '../../FlipCard/props/propTypes';
+import CheckBox from '@zohodesk/components/es/v1/CheckBox/CheckBox';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import AvatarSize from '@zohodesk/components/es/v1/Provider/AvatarSize';
+import ChannelIcon from '../ChannelIcon/ChannelIcon';
+import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+import AvatarUser from '../avatar/AvatarUser/AvatarUser';
+import { stopBubbling } from '../../utils/General';
+import style from '../../FlipCard/FlipCard.module.css';
+export default function FlipCard(props) {
+  let {
+    id,
+    action,
+    name,
+    initial,
+    isChecked,
+    noNeedFlip,
+    size,
+    channel,
+    isPaidUser,
+    isPortalUser,
+    src,
+    icon,
+    iconSize,
+    iconClass,
+    ticListContainer,
+    ticList,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    frontClass,
+    needTitle,
+    iconColor,
+    tourId,
+    isFilledCheckbox,
+    channelTitle,
+    customProps
+  } = props;
+  const {
+    CheckBoxProps = {},
+    ChannelIconProps = {},
+    AvatarIconProps = {},
+    AvatarUserProps = {}
+  } = customProps;
+
+  const onClick = e => {
+    if (!noNeedFlip) {
+      stopBubbling(e);
+    }
+  };
+
+  const onChange = (isChecked, e) => {
+    let {
+      onChange
+    } = props;
+    stopBubbling(e);
+    onChange(id, isChecked, e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
+    onClick: onClick,
+    "data-id": ticListContainer,
+    "data-test-id": ticListContainer,
+    "data-tour": tourId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-id": ticList,
+    "data-test-id": ticList
+  }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: `${style.front} ${frontClass ? frontClass : ''}`
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+    isFilled: isFilledCheckbox,
+    checked: isChecked,
+    onChange: onChange,
+    id: `checkbox_${id}`,
+    dataId: `listViewCheckBox_${id}`
+  }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: style.back
+  }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
+    name: channel,
+    action: action,
+    size: size,
+    iconSize: iconSize,
+    iconClass: iconClass,
+    dataId: channel,
+    className: className,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass,
+    iconColor: iconColor,
+    title: channelTitle,
+    iconTitle: channelTitle
+  }, ChannelIconProps)) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
+    name: icon,
+    iconSize: iconSize,
+    size: size,
+    iconClass: iconClass,
+    dataId: icon,
+    className: className,
+    iconColor: iconColor,
+    title: needTitle ? name : ''
+  }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
+    name: name,
+    initial: initial,
+    size: size,
+    isPaid: isPaidUser,
+    isPortal: isPortalUser,
+    src: src,
+    dataId: dataId,
+    needTitle: needTitle,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass
+  }, AvatarUserProps)))));
+}
+FlipCard.propTypes = propTypes;
+FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }

package/es/v1/FormAction/FormAction.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { defaultProps } from '../../FormAction/props/defaultProps';
+import { propTypes } from '../../FormAction/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import style from '../../FormAction/FormAction.module.css';
+export const LeftSide = props => {
+  props.children;
+};
+export const RightSide = props => {
+  props.children;
+};
+export const Center = props => {
+  props.children;
+};
+export default function FormAction(props) {
+  let {
+    size,
+    children,
+    paddingLeftSize,
+    paddingRightClass,
+    dataSelectorId
+  } = props;
+  let leftbuttonGroup = [],
+      rightbuttonGroup = [],
+      centerbuttonGroup = [];
+  React.Children.map(children, child => {
+    if (!child) {
+      return child;
+    } else if (child.type === LeftSide) {
+      leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
+    } else if (child.type === RightSide) {
+      rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
+    } else if (child.type === Center) {
+      centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
+    } else {
+      leftbuttonGroup.push(child);
+    }
+  });
+  let hasLeftChild = leftbuttonGroup.length > 0;
+  let hasRightChild = rightbuttonGroup.length > 0;
+  let hasCenterChild = centerbuttonGroup.length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.wrapperDiv,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+    className: `
+                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
+
+                        ${style[`${size}Footer`]}
+                    `
+  }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
+    flexible: hasRightChild ? true : false,
+    shrink: !hasRightChild && hasLeftChild ? true : false
+  }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
+    shrink: hasRightChild && !hasLeftChild ? true : false
+  }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : centerbuttonGroup[0]) : null));
+}
+FormAction.propTypes = propTypes;
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/FreezeLayer/FreezeLayer.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { defaultProps } from '../../FreezeLayer/props/defaultProps';
+import { propTypes } from '../../FreezeLayer/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import { mergeStyle } from '@zohodesk/utils';
+import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
+import cssJSLogic from '../../FreezeLayer/css/cssJSLogic';
+import useFreezeLayer from '../../FreezeLayer/useFreezeLayer';
+import style from '../../FreezeLayer/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,
+    "data-drag-parent": true,
+    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'
+//   };
+// }