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

package/es/v1/Drawer/Drawer.js

@@ -1,15 +1,15 @@
 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/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+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/lib/Provider/ZindexProvider';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Heading from '@zohodesk/components/lib/Heading/Heading';
-import FreezeLayer from '../../FreezeLayer/FreezeLayer';
+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';
@@ -143,11 +143,11 @@ export default function Drawer(props) {
       focusScopeProps = {}
     } = customProps;
     const {
-      autoFocus = true,
-      restoreFocus = true,
-      needArrowLoop = false,
-      needTabLoop = true,
-      enableEnterAction = false
+      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) {
@@ -186,12 +186,12 @@ export default function Drawer(props) {
       flexible: true
     }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
       elementRef: contentRef,
-      autoFocus: autoFocus,
-      needTabLoop: needTabLoop,
-      restoreFocus: restoreFocus,
-      needArrowLoop: needArrowLoop,
+      needAutoFocus: needAutoFocus,
+      needFocusLoop: needFocusLoop,
+      needRestoreFocus: needRestoreFocus,
+      needListNavigation: needListNavigation,
       onClose: onClose,
-      enableEnterAction: enableEnterAction
+      needEnterAction: needEnterAction
     }, content) : content);
   }
 

package/es/v1/FlipCard/FlipCard.js

@@ -3,12 +3,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../FlipCard/props/defaultProps';
 import { propTypes } from '../../FlipCard/props/propTypes';
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
-import ChannelIcon from '../../ChannelIcon/ChannelIcon';
-import AvatarIcon from '../../avatar/AvatarIcon/AvatarIcon';
-import AvatarUser from '../../avatar/AvatarUser/AvatarUser';
+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) {
@@ -126,5 +126,5 @@ FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
 //   FlipCard.docs = {
 //     componentGroup: 'Molecule'
-//   }; 
+//   };
 // }

package/es/v1/FormAction/FormAction.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../FormAction/props/defaultProps';
 import { propTypes } from '../../FormAction/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../FormAction/FormAction.module.css';
 export const LeftSide = props => {
   props.children;

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'
+//   };
+// }

package/es/v1/{version2/GlobalNotification → GlobalNotification}/GlobalNotification.js

@@ -1,13 +1,13 @@
 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, { useEffect } from 'react';
-import { defaultProps } from '../../../version2/GlobalNotification/props/defaultProps';
-import { propTypes } from '../../../version2/GlobalNotification/props/propTypes';
-import AutoClose from '../../../actions/AutoClose';
-import AlertIcons from '../alertIcons/AlertIcons';
-import AlertClose from '../AlertClose/AlertClose';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from '../../../version2/GlobalNotification/GlobalNotification.module.css';
+import { defaultProps } from '../../version2/GlobalNotification/props/defaultProps';
+import { propTypes, UI_propTypes, new_propTypes } from '../../version2/GlobalNotification/props/propTypes';
+import AutoClose from '../../actions/AutoClose';
+import AlertIcons from '../alert/alertIcons/AlertIcons';
+import AlertClose from '../alert/AlertClose/AlertClose';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import style from '../../version2/GlobalNotification/GlobalNotification.module.css';
 export default function GlobalNotification(props) {
   let {
     type,
@@ -104,8 +104,10 @@ export function GlobalNotificationUI(props) {
     type: type
   }))));
 }
+GlobalNotificationUI.propTypes = UI_propTypes;
 export function GlobalNotificationNew(props) {
   return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
     Element: GlobalNotificationUI
   }));
-}
+}
+GlobalNotificationNew.propTypes = new_propTypes;

package/es/v1/IconButton/IconButton.js

@@ -4,9 +4,9 @@ import React, { useState } from 'react';
 import { defaultProps } from '../../IconButton/props/defaultProps';
 import { propTypes } from '../../IconButton/props/propTypes';
 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';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/es/v1/RippleEffect/RippleEffect';
 import style from '../../IconButton/IconButton.module.css';
 export default function IconButton(props) {
   let {

package/es/v1/Image/Image.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { defaultProps } from '../../Image/props/defaultProps';
+import { propTypes } from '../../Image/props/propTypes';
+import style from '../../Image/Image.module.css';
+export default class Image extends React.Component {
+  render() {
+    let {
+      alt,
+      src,
+      className,
+      isCover,
+      title,
+      onClick,
+      dataId,
+      htmlId,
+      eleRef,
+      original
+    } = this.props;
+    return /*#__PURE__*/React.createElement("img", {
+      src: src,
+      alt: alt,
+      "data-title": title,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
+      onClick: onClick,
+      id: htmlId,
+      ref: eleRef,
+      "data-original": original
+    });
+  }
+
+}
+Image.propTypes = propTypes;
+Image.defaultProps = defaultProps; // if (__DOCS__) {
+//   Image.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/ImportantNotes/ImportantNotes.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../ImportantNotes/props/defaultProps';
 import { propTypes } from '../../ImportantNotes/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { Icon } from '@zohodesk/icons';
 import style from '../../ImportantNotes/ImportantNotes.module.css';
 export default function ImportantNotes(props) {

package/es/v1/Link/Link.js

@@ -84,7 +84,8 @@ export default function Link(props) {
   }, others, {
     onClick: callBack
   }, customProps, {
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    tabIndex: "0"
   }), children);
 }
 Link.defaultProps = defaultProps;

package/es/v1/Loader/Loader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
+import style from '../../Loader/Loader.module.css';
+export default function Loader() {
+  let getNextId = useZIndex();
+  let Zindex = getNextId();
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.ajaxLoader,
+    style: {
+      zIndex: `${Zindex}`
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.loader
+  }));
+}

package/es/v1/Message/Message.js

@@ -0,0 +1,118 @@
+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 '../../Message/props/defaultProps';
+import { propTypes, MessageUI_propTypes, MessageNew_propTypes } from '../../Message/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import AutoClose from '../actions/AutoClose';
+import style from '../../Message/Message.module.css';
+export default class Message extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hideMessage: false
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let {
+      showMessage,
+      hideMessage
+    } = this.props;
+
+    if (showMessage !== nextProps.showMessage) {
+      if (nextProps.type != 'alert') {
+        setTimeout(() => {
+          hideMessage();
+        }, 3000);
+      }
+    }
+  }
+
+  componentDidMount() {
+    let {
+      type,
+      hideMessage
+    } = this.props;
+
+    if (type != 'alert') {
+      setTimeout(() => {
+        hideMessage();
+      }, 3000);
+    }
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(MessageUI, this.props);
+  }
+
+}
+Message.propTypes = propTypes;
+Message.defaultProps = defaultProps; // if (__DOCS__) {
+//   Message.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }
+
+export function MessageUI(props) {
+  function onClose(e) {
+    let {
+      hideMessage,
+      onClose
+    } = props;
+    hideMessage && hideMessage(e);
+    onClose && onClose(e);
+  }
+
+  let {
+    type,
+    message,
+    onClick,
+    i18nKeys,
+    dataSelectorId
+  } = props;
+  let {
+    closeTitle = 'Close'
+  } = i18nKeys;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.message,
+    "data-id": `show_${type}_message`,
+    "data-test-id": `show_${type}_message`,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style[type]
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.tickIcn
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: type == 'alert' ? 'ZD-notifiExclamation' : type == 'info' ? 'ZD-info31' : 'ZD-check',
+    isBold: true,
+    size: "10"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: style.text,
+    onClick: onClick,
+    "data-id": "infoMessage",
+    "data-test-id": "infoMessage",
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: style.close,
+    "data-title": closeTitle,
+    onClick: onClose,
+    "data-id": `close_${type}_message`,
+    "data-test-id": `close_${type}_message`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-closee",
+    isBold: true,
+    size: "10"
+  }))));
+}
+MessageUI.propTypes = MessageUI_propTypes;
+export function MessageNew(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: MessageUI
+  }));
+}
+MessageNew.propTypes = MessageNew_propTypes;

package/es/v1/MessageBanner/MessageBanner.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { defaultProps } from '../../MessageBanner/props/defaultProps';
 import { propTypes } from '../../MessageBanner/props/propTypes';
-import Link from '../../Link/Link';
+import Link from '../Link/Link';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../MessageBanner/MessageBanner.module.css';
 export default function MessageBanner(props) {
   let {

package/es/v1/NewStar/NewStar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import { defaultProps } from '../../NewStar/props/defaultProps';
 import { propTypes } from '../../NewStar/props/propTypes';
 import style from '../../NewStar/NewStar.module.css';

package/es/v1/PlusIcon/PlusIcon.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { defaultProps } from '../../PlusIcon/props/defaultProps';
+import { propTypes } from '../../PlusIcon/props/propTypes';
+import style from '../../PlusIcon/PlusIcon.module.css';
+import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+export default class PlusIcon extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      dataId,
+      iconName,
+      iconClass,
+      iconSize,
+      size,
+      onClick,
+      title,
+      customClass
+    } = this.props;
+    return /*#__PURE__*/React.createElement("span", {
+      className: style.container,
+      onClick: onClick,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-title": title
+    }, /*#__PURE__*/React.createElement(AvatarIcon, {
+      name: iconName,
+      iconClass: `${iconClass} ${style.icon}`,
+      iconSize: iconSize,
+      size: size,
+      className: `${customClass} ${style.plusIcon}`
+    }));
+  }
+
+}
+PlusIcon.defaultProps = defaultProps;
+PlusIcon.propTypes = propTypes; // if (__DOCS__) {
+//   PlusIcon.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'Ticket DetailView'
+//   };
+// }

package/es/v1/Separator/Separator.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { defaultProps } from '../../Separator/props/defaultProps';
+import { propTypes } from '../../Separator/props/propTypes';
+import style from '../../Separator/Separator.module.css';
+export default class Separator extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      children,
+      type,
+      customSeparatorType,
+      palette,
+      wrap,
+      shrink,
+      aligndirection,
+      customClass
+    } = this.props;
+    const {
+      customWrapper,
+      customSeparator,
+      customChildren
+    } = customClass;
+    const data = children.filter(el => el !== null && el !== undefined && el !== false);
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: aligndirection,
+      align: aligndirection === 'row' ? 'vertical' : '',
+      wrap: wrap,
+      isCover: false,
+      className: `${style.varClass} ${customWrapper}`
+    }, data.map((child, i) => {
+      if (child) {
+        if (data.length - 1 == i || aligndirection == 'column') {
+          return child && /*#__PURE__*/React.createElement(Box, {
+            shrink: shrink,
+            key: i,
+            className: customChildren
+          }, child);
+        }
+
+        return child && /*#__PURE__*/React.createElement(React.Fragment, {
+          key: i
+        }, /*#__PURE__*/React.createElement(Box, {
+          shrink: shrink,
+          key: i,
+          className: customChildren
+        }, child), /*#__PURE__*/React.createElement(Box, {
+          className: `${style.separator} ${style[palette]} ${customSeparatorType ? '' : style[type]} ${customSeparator} `,
+          key: i
+        }, customSeparatorType ? customSeparatorType : type == 'slash' ? '/' : type == 'arrow' ? '>' : type == 'comma' ? ',' : '\u2022'));
+      }
+    }));
+  }
+
+}
+Separator.defaultProps = defaultProps;
+Separator.propTypes = propTypes;

package/es/v1/TagWithIcon/TagWithIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../TagWithIcon/props/defaultProps';
 import { propTypes } from '../../TagWithIcon/props/propTypes';
-import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import Icon from '@zohodesk/icons/es/Icon';
 import style from '../../TagWithIcon/TagWithIcon.module.css';
 export default function TagWithIcon(props) {