@zohodesk/dot 1.0.0-temp-187.24 → 1.0.0-temp-225

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

@@ -0,0 +1,205 @@
+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, { Component } from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+/**** Components ****/
+
+import Lookup from "../../../lookup/Lookup/Lookup";
+import AlertHeader from "../AlertHeader/AlertHeader";
+import Button from '@zohodesk/components/es/Button/Button';
+import Section from "../../../lookup/Section/Section";
+import FormAction from "../../../FormAction/FormAction";
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { getUniqueId } from '@zohodesk/components/es/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);
+  } // componentDidMount() {
+  //   let { isActive } = this.props;
+  //   if (isActive) {
+  //     document.addEventListener('keydown', this.documentKeydownHandler)
+  //   }
+  // }
+  // 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(e = {}) {
+  //   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);
+  //   }
+  // }
+
+
+  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,
+      isDefaultFocus,
+      onEsc
+    } = 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();
+    let ariaLeaveButtonId = this.getAriaId();
+    let ariaStayButtonId = this.getAriaId();
+    a11y = {
+      ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
+      ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
+    };
+    return /*#__PURE__*/React.createElement(Lookup, _extends({
+      onClose: onEsc == 'close' ? onClose : onCancelClick,
+      needFocusScope: true,
+      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,
+      customProps: {
+        'data-a11y-autofocus': isDefaultFocus
+      }
+    }, PrimaryButtonProps, {
+      a11y: {
+        'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
+      },
+      id: ariaLeaveButtonId
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+      dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
+      text: cancelText,
+      onClick: onCancelClick,
+      palette: "secondary"
+    }, SecondaryButtonProps, {
+      a11y: {
+        'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
+      },
+      id: ariaStayButtonId
+    }))))) : null))));
+  }
+
+}
+AlertLookup.propTypes = propTypes;
+AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   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: 1.428;
+  composes: wbreak from '~@zohodesk/components/es/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/es/common/common.module.css';
+}
+.verticalScroll {
+  composes: oflowy from '~@zohodesk/components/es/common/common.module.css';
+}
+.bothScroll {
+  composes: oflowA from '~@zohodesk/components/es/common/common.module.css';
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AlertLookup from "../AlertLookup";
+describe('AlertLookup', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlertLookup, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true defult', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AlertLookup, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/version2/lookup/AlertLookup/__tests__/__snapshots__/AlertLookup.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertLookup rendering isActive is true defult 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 snow"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  >
+    <div
+      class="flex cover rowdir hCenter"
+      data-id="reactFreezeLayer"
+      data-selector-id="container"
+      data-test-id="reactFreezeLayer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertLookup rendering the defult props 1`] = `<DocumentFragment />`;

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

@@ -0,0 +1,13 @@
+export const defaultProps = {
+  isActive: false,
+  size: 'small',
+  wrapHeader: false,
+  dataId: 'alertPopup',
+  isDefaultFocus: true,
+  customProps: {},
+  align: 'top',
+  childAnimationName: 'flyDown',
+  isHtmlContent: false,
+  scroll: '',
+  onEsc: 'cancel'
+};

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

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+export const 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,
+  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'])
+};

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-weight: var(--zd-fw-semibold);
+    composes: ftsmooth from '~@zohodesk/components/es/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/lookup/index.js

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

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

@@ -0,0 +1,191 @@
+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 "./props/defaultProps";
+import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
+import AutoClose from "../../../actions/AutoClose";
+import Button from '@zohodesk/components/es/Button/Button';
+import FormAction from "../../../FormAction/FormAction";
+import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+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'
+  },
+  primary: {
+    buttonPalette: 'primaryFilled'
+  }
+};
+export function DesktopNotificationUI(props) {
+  let {
+    type = '',
+    submitText,
+    cancelText,
+    submitType,
+    isMore,
+    message,
+    isAnimate,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    dataSelectorId,
+    isClose,
+    needAutoZindex,
+    title,
+    subTitle,
+    needIcon,
+    info,
+    secondaryInfo,
+    titleVariant,
+    getSectionContainer,
+    isShrinkView,
+    size,
+    onClose,
+    needClose,
+    customClass = {},
+    i18nKeys = {},
+    customProps,
+    responsiveId
+  } = 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;
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 760
+      }])
+    };
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.parentElement,
+    style: needAutoZindex && isAnimate ? {
+      zIndex: `${Zindex}`
+    } : {},
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass}
+            ${isShrinkView ? style.globalNotify : ''} ${containerClass}  ${uptoTablet ? style.tapWidth : style[`${size}`]}`,
+      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`,
+      "data-test-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);
+  }));
+}
+DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
+export default function DesktopNotification(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: DesktopNotificationUI
+  }));
+}
+DesktopNotification.propTypes = propTypes;
+DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {
+//   DesktopNotification.docs = {
+//     componentGroup: 'DesktopNotification',
+//     folderName: 'Alert'
+//   };
+// }