@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.220

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -0,0 +1,254 @@
+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, { Component } from 'react';
+import PropTypes from 'prop-types';
+/**** Components ****/
+
+import Lookup from '../../../lookup/Lookup/Lookup';
+import AlertHeader from '../AlertHeader/AlertHeader';
+import Button from '@zohodesk/components/lib/Button/Button';
+import Section from '../../../lookup/Section/Section';
+import FormAction from '../../../FormAction/FormAction';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+/**** CSS ****/
+
+import style from './AlertLookupNew.module.css';
+let buttonPaletteObject = {
+  success: {
+    buttonPalette: 'successFilled'
+  },
+  error: {
+    buttonPalette: 'dangerFilled'
+  },
+  danger: {
+    buttonPalette: 'dangerFilled'
+  },
+  warning: {
+    buttonPalette: 'dangerFilled'
+  },
+  info: {
+    buttonPalette: 'primaryFilled'
+  },
+  notification: {
+    buttonPalette: 'primaryFilled'
+  }
+};
+export default class AlertLookup extends Component {
+  constructor(props) {
+    super(props);
+    this.getAriaId = getUniqueId(this);
+    this.documentKeydownHandler = this.documentKeydownHandler.bind(this);
+    this.getButtonRef = this.getButtonRef.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    let {
+      isActive
+    } = this.props;
+
+    if (prevProps.isActive !== isActive) {
+      isActive ? document.addEventListener('keydown', this.documentKeydownHandler) : document.removeEventListener('keydown', this.documentKeydownHandler);
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.documentKeydownHandler);
+  }
+
+  documentKeydownHandler() {
+    let e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+      onSubmitClick,
+      onCancelClick,
+      isActive,
+      onEsc,
+      onClose
+    } = this.props;
+
+    if (e.keyCode === 27 && isActive) {
+      e && e.preventDefault && e.preventDefault();
+      onEsc == 'close' ? onClose && onClose(e) : onCancelClick && onCancelClick(e);
+    } else if (e.keyCode === 13 && isActive) {
+      e && e.preventDefault && e.preventDefault();
+      onSubmitClick && onSubmitClick(e);
+    }
+  }
+
+  getButtonRef(el) {
+    this.okButton = el;
+    let {
+      isDefaultFocus
+    } = this.props;
+
+    if (isDefaultFocus) {
+      // el && el.focus();
+      setTimeout(() => {
+        this.okButton && this.okButton.focus && this.okButton.focus();
+      }, 100);
+    }
+  }
+
+  render() {
+    let {
+      isActive,
+      size,
+      type = 'danger',
+      title,
+      message,
+      confirmationMessage,
+      submitText,
+      cancelText,
+      onSubmitClick,
+      onCancelClick,
+      children,
+      forwardRef,
+      onClose,
+      headerChildren,
+      wrapHeader,
+      dataId,
+      onLookupClick,
+      customClass = {},
+      needIcon,
+      a11y,
+      customProps,
+      align,
+      childAnimationName,
+      isHtmlContent,
+      scroll
+    } = this.props;
+    const {
+      LookupProps = {},
+      AlertHeaderProps = {},
+      PrimaryButtonProps = {},
+      SecondaryButtonProps = {}
+    } = customProps;
+    let {
+      containerClass = '',
+      sectionClass = ''
+    } = customClass;
+    let {
+      buttonPalette = 'dangerFilled'
+    } = buttonPaletteObject[type] || {};
+    let ariaMessageId = this.getAriaId();
+    let ariaConfirmMsgId = this.getAriaId();
+    let ariaTitleId = this.getAriaId();
+    a11y = {
+      ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
+      ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
+    };
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
+      isActive: isActive,
+      size: size,
+      dataId: dataId,
+      forwardRef: forwardRef,
+      onClick: onLookupClick,
+      customClass: containerClass,
+      a11y: a11y,
+      childAnimationName: childAnimationName
+    }, LookupProps), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: align,
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Section, {
+      alignBox: "row",
+      className: style.section
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
+      htmlId: ariaTitleId,
+      title: title,
+      type: type,
+      needIcon: needIcon,
+      onClose: onClose,
+      breakChildren: wrapHeader
+    }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
+    }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
+      id: ariaMessageId,
+      dangerouslySetInnerHTML: {
+        __html: message
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
+      id: ariaMessageId
+    }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+      id: ariaConfirmMsgId,
+      className: `${message ? style.confirmMsgText : ''}`
+    }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+      className: style.footer
+    }, /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xmedium"
+    }, /*#__PURE__*/React.createElement(Button, _extends({
+      text: submitText,
+      dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
+      onClick: onSubmitClick,
+      palette: buttonPalette,
+      getRef: this.getButtonRef
+    }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+      dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
+      text: cancelText,
+      onClick: onCancelClick,
+      palette: "secondary"
+    }, SecondaryButtonProps))))) : null))));
+  }
+
+}
+AlertLookup.propTypes = {
+  cancelText: PropTypes.string,
+  children: PropTypes.node,
+  confirmationMessage: PropTypes.string,
+  customClass: PropTypes.object,
+  dataId: PropTypes.string,
+  forwardRef: PropTypes.object,
+  headerChildren: PropTypes.func,
+  isActive: PropTypes.bool,
+  isDefaultFocus: PropTypes.bool,
+  message: PropTypes.node,
+  needIcon: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onClose: PropTypes.func,
+  onLookupClick: PropTypes.func,
+  onSubmitClick: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'xmedium', 'medium']),
+  submitText: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification']),
+  wrapHeader: PropTypes.bool,
+  alertTitleId: PropTypes.string,
+  a11y: PropTypes.object,
+  customProps: PropTypes.shape({
+    LookupProps: PropTypes.object,
+    AlertHeaderProps: PropTypes.object,
+    PrimaryButtonProps: PropTypes.object,
+    SecondaryButtonProps: PropTypes.object
+  }),
+  align: PropTypes.oneOf(['top', 'vertical']),
+  childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
+  isHtmlContent: PropTypes.bool,
+  scroll: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  onEsc: PropTypes.oneOf(['close', 'cancel'])
+};
+AlertLookup.defaultProps = {
+  isActive: false,
+  size: 'small',
+  wrapHeader: false,
+  dataId: 'alertPopup',
+  isDefaultFocus: true,
+  customProps: {},
+  align: 'top',
+  childAnimationName: 'flyDown',
+  isHtmlContent: false,
+  scroll: '',
+  onEsc: 'cancel'
+};
+
+if (false) {
+  AlertLookup.docs = {
+    componentGroup: 'AlertLookup',
+    folderName: 'Alert'
+  };
+}

package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -0,0 +1,44 @@
+.section {
+  min-height: auto;
+}
+
+.innerSection {
+  color: var(--zdt_alertlookupnew_text);
+  font-size: var(--zd_font_size14);
+  line-height: var(--zd_size18);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
+}
+
+[dir=ltr] .buttonGap {
+  margin: 0 0 0 var(--zd_size12);
+}
+
+[dir=rtl] .buttonGap {
+  margin: 0 var(--zd_size12) 0 0;
+}
+
+.confirmMsgText {
+  margin-top: var(--zd_size20);
+}
+
+.extraSmall .innerSection {
+  padding: var(--zd_size30) var(--zd_size16) var(--zd_size46);
+}
+
+.footer {
+  overflow: hidden;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+}
+.horizontalScroll, .verticalScroll, .bothScroll {
+  height: 100%;
+}
+.horizontalScroll {
+  composes: oflowx from '~@zohodesk/components/lib/common/common.module.css';
+}
+.verticalScroll {
+  composes: oflowy from '~@zohodesk/components/lib/common/common.module.css';
+}
+.bothScroll {
+  composes: oflowA from '~@zohodesk/components/lib/common/common.module.css';
+}

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -0,0 +1,33 @@
+/* Notes */
+
+.noteContainer {
+    padding: var(--zd_size4) var(--zd_size30) 0;
+}
+
+[dir=ltr] .noteContainer {
+    border-left: solid 1px var(--zdt_alertlookup_border);
+}
+
+[dir=rtl] .noteContainer {
+    border-right: solid 1px var(--zdt_alertlookup_border);
+}
+
+.noteTitle {
+    font-size: var(--zd_font_size13);
+    font-family: var(--zd_semibold);
+    composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.noteUl {
+    padding: var(--zd_size14) var(--zd_size16) 0;
+    margin: 0;
+}
+
+.noteUl li {
+    font-size: var(--zd_font_size12);
+    /* line-height: var(--zd_size14); */
+    color: var(--zdt_alertlookuop_text);
+    list-style-type: disc;
+    line-height: initial;
+    margin-bottom: var(--zd_size15);
+}

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -0,0 +1,209 @@
+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); }
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import AutoClose from '../../../actions/AutoClose';
+import Button from '@zohodesk/components/lib/Button/Button';
+import FormAction from '../../../FormAction/FormAction';
+import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import style from './DesktopNotification.module.css';
+let buttonPaletteObject = {
+  success: {
+    buttonPalette: 'successFilled'
+  },
+  error: {
+    buttonPalette: 'dangerFilled'
+  },
+  danger: {
+    buttonPalette: 'dangerFilled'
+  },
+  warning: {
+    buttonPalette: 'dangerFilled'
+  },
+  info: {
+    buttonPalette: 'primaryFilled'
+  },
+  notification: {
+    buttonPalette: 'primaryFilled'
+  }
+};
+export function DesktopNotificationUI(props) {
+  let {
+    type = '',
+    submitText,
+    cancelText,
+    submitType,
+    isMore,
+    message,
+    isAnimate,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    isClose,
+    needAutoZindex,
+    title,
+    subTitle,
+    needIcon,
+    info,
+    secondaryInfo,
+    titleVariant,
+    getSectionContainer,
+    isShrinkView,
+    size,
+    onClose,
+    needClose,
+    customClass = {},
+    i18nKeys = {},
+    customProps
+  } = props;
+  let {
+    closeTitle = 'Close'
+  } = i18nKeys;
+  let {
+    containerClass
+  } = customClass;
+  let {
+    buttonPalette = 'dangerFilled'
+  } = buttonPaletteObject[type] || {};
+  let {
+    ExtraProps = {}
+  } = customProps;
+
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+  }
+
+  function onClickCancel(e) {
+    onCancel && onCancel();
+  }
+
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let getNextIndex = useZIndex();
+  let Zindex = isAnimate ? getNextIndex() : null;
+  let uiVariantOne = title && (info || secondaryInfo);
+  let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.parentElement,
+    style: needAutoZindex && isAnimate ? {
+      zIndex: `${Zindex}`
+    } : {}
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
+    isCover: false,
+    dataId: dataId,
+    isInline: uiVariantTwo
+  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+    type: type,
+    title: title,
+    variant: titleVariant,
+    needIcon: needIcon,
+    onClose: onClose,
+    closeTitle: closeTitle,
+    dataId: `${dataId}_close`,
+    needClose: needClose
+  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column"
+  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${style.section} ${style.infoText}`
+  }, subTitle && /*#__PURE__*/React.createElement("div", {
+    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+    className: `${info ? style.secondaryInfo : ''}`
+  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+    className: style.footer
+  }, isMore ? /*#__PURE__*/React.createElement("div", {
+    className: `${style.message}`,
+    tagName: "p"
+  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+    size: "small",
+    paddingLeftSize: "xmedium"
+  }, submitText ? /*#__PURE__*/React.createElement("div", {
+    onClick: onClickSubmit,
+    "data-id": `${dataId}_submitButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: submitText,
+    palette: submitType ? submitType : buttonPalette
+  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    text: cancelText,
+    palette: "secondary",
+    dataId: `${dataId}_cancelButton`,
+    onClick: onClickCancel
+  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+}
+export default function DesktopNotification(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: DesktopNotificationUI
+  }));
+}
+DesktopNotification.propTypes = {
+  autoClose: PropTypes.bool,
+  cancelText: PropTypes.string,
+  customClass: PropTypes.object,
+  dataId: PropTypes.string,
+  getBottomContainer: PropTypes.func,
+  getSectionContainer: PropTypes.func,
+  getSubmitContainer: PropTypes.func,
+  hidePopNotification: PropTypes.func,
+  hideTime: PropTypes.string,
+  i18nKeys: PropTypes.object,
+  id: PropTypes.string,
+  info: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isClose: PropTypes.bool,
+  isMore: PropTypes.bool,
+  isShrinkView: PropTypes.bool,
+  message: PropTypes.string,
+  needAutoZindex: PropTypes.bool,
+  needClose: PropTypes.bool,
+  needIcon: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onClose: PropTypes.func,
+  onSubmit: PropTypes.func,
+  secondaryInfo: PropTypes.string,
+  size: PropTypes.oneOf(['medium', 'large']),
+  subTitle: PropTypes.string,
+  submitText: PropTypes.string,
+  submitType: PropTypes.oneOf(['primary', 'danger', 'success']),
+  titleVariant: PropTypes.oneOf(['primary', 'secondary']),
+  type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
+  customProps: PropTypes.shape({
+    ExtraProps: PropTypes.object
+  })
+};
+DesktopNotification.defaultProps = {
+  isMore: false,
+  isAnimate: true,
+  isClose: false,
+  autoClose: false,
+  hideTime: '3000',
+  dataId: 'toastMessage',
+  needAutoZindex: true,
+  needIcon: true,
+  titleVariant: 'primary',
+  isShrinkView: false,
+  needClose: true,
+  customProps: {}
+};
+
+if (false) {
+  DesktopNotification.docs = {
+    componentGroup: 'DesktopNotification',
+    folderName: 'Alert'
+  };
+}

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -0,0 +1,106 @@
+.parentElement {
+  position: relative;
+  margin-bottom: var(--zd_size7);
+}
+.container {
+  color: var(--zdt_desktopnotification_text);
+  transition: all var(--zd_transition4);
+  position: relative;
+  max-height: 100%;
+  pointer-events: auto;
+  background-color: var(--zdt_desktopnotification_bg);
+  box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+}
+[dir=ltr] .container {
+  transform-origin: right center;
+}
+[dir=rtl] .container {
+  transform-origin: left center;
+}
+.globalNotify {
+  max-width: var(--zd_size490);
+  min-width: var(--zd_size394);
+}
+/* Size */
+.medium {
+  width: var(--zd_size452);
+}
+.large {
+  width: var(--zd_size580);
+}
+/* Animation Style */
+.closeAnimation {
+  max-height: 0;
+  transition: all var(--zd_transition3) 0.4s;
+  margin-bottom: 0;
+}
+.animation {
+  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+[dir=ltr] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+[dir=rtl] .animation {
+  animation-duration: var(--zd_transition4);
+  -webkit-animation-duration: var(--zd_transition4);
+}
+.leftanimate {
+  composes: slideLeft from '~@zohodesk/components/lib/common/animation.module.css';
+  composes: animation;
+}
+.leftnoanimate {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+.rightanimate {
+  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
+  composes: animation;
+  composes: closeAnimation;
+}
+/* Container Style */
+.message {
+  position: relative;
+  color: var(--zd_smoke18);
+  font-size: var(--zd_font_size11);
+  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
+  height: var(--zd_size33);
+  transition: padding var(--zd_transition3), height var(--zd_transition3);
+  border-top: 1px solid var(--zd_smoke1);
+  cursor: pointer;
+}
+[dir=ltr] .message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+}
+[dir=rtl] .message {
+  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
+}
+.message:hover {
+  background: var(--zd_alabaster);
+}
+/* Section */
+.section {
+  padding: var(--zd_size15) var(--zd_size30) var(--zd_size30);
+}
+.subTitle {
+  font-size: var(--zd_font_size15);
+  line-height: var(--zd_size20);
+  font-family: var(--zd_semibold);
+  composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
+}
+.subTitleMargin {
+  margin-bottom: var(--zd_size17);
+}
+.infoText {
+  font-size: var(--zd_font_size14);
+  line-height: var(--zd_size18);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+}
+.secondaryInfo {
+  margin-top: var(--zd_size20);
+}
+.footer {
+  overflow: hidden;
+  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+}