@zohodesk/dot 1.2.1 → 1.2.3

package/es/v1/Loader/Loader.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import style from '../../Loader/Loader.module.css';
+export default class Loader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getNextIndex = getZIndex(this);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.ajaxLoader,
+      style: {
+        zIndex: `${this.getNextIndex()}`
+      }
+    }, /*#__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,7 +1,7 @@
 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 style from '../../MessageBanner/MessageBanner.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/lib/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/ToastMessage/ToastMessage.js

@@ -0,0 +1,203 @@
+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, { useState } from 'react';
+import { defaultProps } from '../../ToastMessage/props/defaultProps';
+import { propTypes } from '../../ToastMessage/props/propTypes'; //components
+
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+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';
+import AutoClose from '../actions/AutoClose';
+import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
+
+import style from '../../ToastMessage/ToastMessage.module.css';
+
+function ToastMessageUI(props) {
+  let [messageState, setMessageState] = useState(props.messageState);
+  let {
+    type,
+    subject,
+    info,
+    submitText,
+    cancelText,
+    iconName,
+    iconSize,
+    submitType,
+    isIconMid,
+    needClose,
+    iconPalette,
+    isMore,
+    message,
+    isAnimate,
+    getLeftContainer,
+    getInnerBottomContainer,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    dataSelectorId,
+    isClose,
+    onClose,
+    needAutoZindex,
+    a11y
+  } = props;
+
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+    onClose && onClose();
+  }
+
+  function onClickCancel(e) {
+    onCancel && onCancel();
+    onClose && onClose();
+  }
+
+  function changeMessageState(e) {
+    cancelBubblingEffect(e);
+    setMessageState(!messageState);
+  }
+
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let channelIcon = /*#__PURE__*/React.createElement(Icon, {
+    iconClass: style[iconPalette],
+    name: iconName,
+    size: iconSize
+  });
+  let getNextIndex = useZIndex();
+  let Zindex = isAnimate ? getNextIndex() : null,
+      getNextId = useUniqueId(),
+      titleId = getNextId(),
+      infoId = getNextId();
+  let {
+    role = 'alert',
+    ariaLive = 'assertive',
+    ariaAtomic = true,
+    ariaDescribedby = infoId,
+    ariaLabelledby = titleId
+  } = a11y;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`alert${type}`] ? style[`alert${type}`] : ''}`,
+    isCover: false,
+    dataId: dataId,
+    style: needAutoZindex && isAnimate ? {
+      zIndex: `${Zindex}`
+    } : {},
+    role: role,
+    "aria-live": ariaLive,
+    "aria-atomic": ariaAtomic,
+    "aria-describedby": ariaDescribedby,
+    "aria-labelledby": ariaLabelledby,
+    dataSelectorId: dataSelectorId
+  }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertifychild,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.alertifybanner
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.alertleft,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: isIconMid ? 'vertical' : '',
+    alignBox: "row"
+  }, type != 'success' && !getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.alertico}`
+  }, /*#__PURE__*/React.createElement("span", null, channelIcon)) : getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.alertico}`
+  }, getLeftContainer()) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    isCover: false
+  }, type == 'success' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertTitleLeft
+  }, channelIcon) : null, /*#__PURE__*/React.createElement(Box, {
+    className: style.alertTitle,
+    flexible: true,
+    "data-title": subject,
+    id: titleId
+  }, subject)), info ? /*#__PURE__*/React.createElement("p", {
+    className: style.alertMessage,
+    "data-title": info,
+    id: infoId
+  }, info) : null, getInnerBottomContainer ? /*#__PURE__*/React.createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.closeIconPrimary}`,
+    onClick: onClose,
+    dataId: `${dataId}_close`,
+    tagName: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    isBold: true,
+    name: "ZD-close",
+    size: "18"
+  })) : null)), type != 'information' ? /*#__PURE__*/React.createElement(Box, {
+    className: style.alertright
+  }, /*#__PURE__*/React.createElement(Container, {
+    className: style.alerttab
+  }, needClose ? /*#__PURE__*/React.createElement("button", {
+    className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
+    onClick: onClose,
+    "data-id": `${dataId}_closeRight`,
+    "data-test-id": `${dataId}_closeRight`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close",
+    size: "18"
+  })) : null, submitText ? /*#__PURE__*/React.createElement(Box, {
+    className: `${getSubmitContainer ? style.sumbitBorder : cancelText ? style.notSolo : style.mainbutton} ${getSubmitContainer ? '' : style[submitType]} `,
+    flexible: true,
+    onClick: onClickSubmit,
+    dataId: `${dataId}_submitButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
+    flexible: true,
+    tagName: "button"
+  }, submitText))) : null, cancelText ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.cancelButton}`,
+    flexible: true,
+    onClick: onClose,
+    dataId: `${dataId}_cancelButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
+    flexible: true,
+    onClick: onClickCancel,
+    dataId: `${dataId}_cancelButtonInner`,
+    tagName: "button"
+  }, cancelText), isMore ? /*#__PURE__*/React.createElement(Box, {
+    className: `${a11yStyle.buttonReset} ${style.dropdown}`,
+    onClick: changeMessageState,
+    dataId: `${dataId}_moreIcon`,
+    tagName: "button",
+    "aria-expanded": messageState ? true : false,
+    "aria-haspopup": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "7"
+  })) : null)) : null)) : null)) : null, isMore ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.message} ${messageState ? '' : style.messageOff}`,
+    tagName: "p"
+  }, message) : null, getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
+}
+
+export default function ToastMessage(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: ToastMessageUI
+  }));
+}
+ToastMessage.propTypes = propTypes;
+ToastMessage.defaultProps = defaultProps; // if (__DOCS__) {
+//   ToastMessage.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/Upload/Upload.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { defaultProps } from '../../Upload/props/defaultProps';
+import { propTypes } from '../../Upload/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Image from '../Image/Image';
+import style from '../../Upload/Upload.module.css';
+export default class Upload extends React.Component {
+  render() {
+    let {
+      isPreview,
+      tooltip,
+      dataId,
+      dataSelectorId,
+      progressValue,
+      onClick,
+      iconName,
+      fileSize,
+      imgSrc,
+      isPreviewType,
+      onRemove,
+      size,
+      getRef,
+      palette
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      className: `${style.container} ${style[palette]} ${style[size]} ${isPreview ? style.preview : ''}
+`,
+      dataId: dataId,
+      "data-title": tooltip,
+      isCover: false,
+      eleRef: getRef,
+      dataSelectorId: dataSelectorId
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement("div", {
+      "data-id": `${dataId}_attachLoading`,
+      "data-test-id": `${dataId}_attachLoading`,
+      className: style.loader,
+      style: {
+        width: `${progressValue}%`
+      }
+    }) : null, isPreviewType ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
+      src: imgSrc,
+      className: `${style.uploadimage} `,
+      alt: "Uploaded Image",
+      dataId: `${dataId}_fileName`
+    }), /*#__PURE__*/React.createElement("div", {
+      className: style.overlay,
+      onClick: onClick
+    })) : /*#__PURE__*/React.createElement(Box, {
+      className: style.attachInfo,
+      onClick: onClick,
+      dataId: `${dataId}_openNewTab`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      iconClass: style.fileIcon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: style.attachsize
+    }, fileSize))), typeof onRemove !== 'undefined' && onRemove != null ? /*#__PURE__*/React.createElement("span", {
+      className: style.uploadclose,
+      onClick: onRemove,
+      "data-id": `${dataId}_deleteUpload`,
+      "data-test-id": `${dataId}_deleteUpload`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-close",
+      isBold: true
+    })) : null);
+  }
+
+}
+Upload.propTypes = propTypes;
+Upload.defaultProps = defaultProps; // if (__DOCS__) {
+//   Upload.docs = {
+//     componentGroup: 'Upload'
+//   };
+// }

package/es/v1/actions/AutoClose.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import { defaultProps } from '../../actions/props/defaultProps';
+import { propTypes } from '../../actions/props/propTypes';
+export default function AutoClose(props) {
+  let {
+    Element,
+    isClose: givenClose,
+    onPortalClose,
+    autoClose,
+    hideTime
+  } = props;
+  let [isClose, setClose] = useState(givenClose);
+
+  function onClose(e) {
+    cancelBubblingEffect(e);
+    onPortalClose && onPortalClose();
+  }
+
+  useEffect(() => {
+    let id;
+
+    if (autoClose) {
+      id = setTimeout(() => {
+        setClose(true);
+        setTimeout(onClose, 300); // For animation
+      }, hideTime);
+    }
+
+    return () => {
+      if (autoClose) {
+        clearTimeout(id);
+      }
+    };
+  }, []);
+  let newProps = Object.assign({}, props, {
+    isClose,
+    onClose
+  });
+  return /*#__PURE__*/React.createElement(Element, newProps);
+}
+AutoClose.propTypes = propTypes;
+AutoClose.defaultProps = defaultProps;

package/es/v1/alert/index.js

@@ -0,0 +1,2 @@
+export { default as AlertHeader } from './AlertHeader/AlertHeader';
+export { default as AlertLookup } from './AlertLookup/AlertLookup';

package/es/v1/avatar/AvatarClose/AvatarClose.js

@@ -0,0 +1,53 @@
+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 '../../../avatar/AvatarClose/props/defaultProps';
+import { propTypes } from '../../../avatar/AvatarClose/props/propTypes';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import { Icon } from '@zohodesk/icons';
+import style from '../../../avatar/AvatarClose/AvatarClose.module.css';
+export default class AvatarClose extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      title,
+      src,
+      name,
+      size,
+      isClose,
+      onClick,
+      customProps,
+      dataSelectorId
+    } = this.props;
+    let {
+      AvatarCloseProps = {},
+      AvatarProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: style.container,
+      "data-selector-id": dataSelectorId
+    }, AvatarCloseProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+      src: src,
+      name: name,
+      title: title,
+      size: size
+    }, AvatarProps)), isClose && /*#__PURE__*/React.createElement("span", {
+      className: style.pop,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.icon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-plus"
+    }))));
+  }
+
+}
+AvatarClose.propTypes = propTypes;
+AvatarClose.defaultProps = defaultProps; // if (__DOCS__) {
+//   AvatarClose.docs = {
+//     componentGroup: 'Avatar Group'
+//   };
+// }