@zohodesk/dot 1.0.0-temp-169 → 1.0.0-temp-171

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,6 +1,6 @@
 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 React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
 import AutoClose from '../../actions/AutoClose';
@@ -8,40 +8,34 @@ import AlertIcons from '../alertIcons/AlertIcons';
 import AlertClose from '../AlertClose/AlertClose';
 import style from './GlobalNotification.module.css';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 export default class GlobalNotification extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       hideMessage: false
     };
+    this.setTimeoutId = null;
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidMount() {
     let {
-      showMessage,
       hideMessage,
-      type
+      hideTime,
+      id,
+      needAutoClose
     } = this.props;
 
-    if (showMessage !== nextProps.showMessage || type !== nextProps.type) {
-      if (!['danger', 'error', 'warning'].includes(nextProps.type)) {
-        setTimeout(() => {
-          hideMessage();
-        }, 3000);
-      }
+    if (needAutoClose) {
+      this.setTimoutId = setTimeout(() => {
+        hideMessage(id);
+      }, hideTime);
     }
   }
 
-  componentDidMount() {
-    let {
-      type,
-      hideMessage
-    } = this.props;
-
-    if (!['danger', 'error', 'warning'].includes(type)) {
-      setTimeout(() => {
-        hideMessage();
-      }, 3000);
+  componentWillUnmount() {
+    if (this.setTimeoutId) {
+      clearTimeout(this.setTimeoutId);
     }
   }
 
@@ -53,7 +47,10 @@ export default class GlobalNotification extends React.Component {
       onClick,
       i18nKeys = {},
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      id,
+      needNotificationExpandUI,
+      notificationCount
     } = this.props;
     let {
       closeTitle = 'Close'
@@ -65,7 +62,10 @@ export default class GlobalNotification extends React.Component {
       onClick: onClick,
       closeTitle: closeTitle,
       customProps: customProps,
-      dataSelectorId: dataSelectorId
+      dataSelectorId: dataSelectorId,
+      id: id,
+      needNotificationExpandUI: needNotificationExpandUI,
+      notificationCount: notificationCount
     });
   }
 
@@ -79,12 +79,17 @@ GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
 // }
 
 export function GlobalNotificationUI(props) {
+  const [shadowClose, setshadowClose] = useState(true);
+
   function onClose(e) {
+    setshadowClose(false);
     let {
       hideMessage,
-      onClose
+      onClose,
+      id
     } = props;
-    hideMessage && hideMessage(e);
+    cancelBubblingEffect(e);
+    hideMessage && hideMessage(id);
     onClose && onClose(e);
   }
 
@@ -94,13 +99,15 @@ export function GlobalNotificationUI(props) {
     onClick,
     closeTitle = '',
     customProps = {},
-    dataSelectorId
+    dataSelectorId,
+    needNotificationExpandUI,
+    notificationCount
   } = props;
   let {
     ExtraProps = {}
   } = customProps;
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: `${style.message} ${type ? style[type] : ''}`,
+    className: `${style.message} ${!needNotificationExpandUI && notificationCount > 1 && shadowClose ? style.stackShadowOne : ''} ${!needNotificationExpandUI && notificationCount > 2 && shadowClose ? style.stackShadowTwo : ''} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -8,39 +8,97 @@
 
 .message {
   composes: varClass;
-  position: absolute;
+  /* position: relative; */
   top: 0 ;
-  z-index: 1000;
+  z-index: 1;
+  justify-self: center;
+  /* overflow: hidden; */
   /*Hook for editor alert*/
-  pointer-events: none;
+  /* right: 0;
   text-align: center;
+  left: 0;
+  pointer-events: none; */
+}
+
+.stackShadowTwo::before {
+  content: '';
+  position: absolute;
+  /* css:theme-validation:ignore */
+  height: var(--zd_size20) ;
+  width: 90% ;
+  bottom: calc( var(--zd_size10) * -1 ) ;
+  background-color: var(--globalnotification_bg_color);
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+[dir=ltr] .stackShadowTwo::before {
+  left: 50% ;
+  right: 50% ;
+  transform: translate(-50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+[dir=rtl] .stackShadowTwo::before {
+  right: 50% ;
+  left: 50% ;
+  transform: translate(50%);
+  animation: behindInfo 0.8s forwards;
 }
 
-[dir=ltr] .message {
-  right: 0 ;
-  left: 0 ;
+.stackShadowOne::after {
+  content: '';
+  position: absolute;
+  /* css:theme-validation:ignore */
+  height: var(--zd_size20) ;
+  width: 95% ;
+  bottom: calc( var(--zd_size5) * -1 ) ;
+  background-color: var(--globalnotification_bg_color);
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
 }
 
-[dir=rtl] .message {
-  left: 0 ;
-  right: 0 ;
+[dir=ltr] .stackShadowOne::after {
+  left: 50% ;
+  right: 50% ;
+  transform: translate(-50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+[dir=rtl] .stackShadowOne::after {
+  right: 50% ;
+  left: 50% ;
+  transform: translate(50%);
+  animation: behindInfo 0.8s forwards;
+}
+
+@keyframes behindInfo {
+  from, 40% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 .container {
   position: relative;
   pointer-events: initial;
+  /* box-shadow: var(--zd_bs_globalnotification_container); */
   /* css:theme-validation:ignore */
   /* css:theme-validation:ignore */
   /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
-  max-width: var(--zd_size490) ;
+  width: var(--zd_size420) ;
+  z-index: 1;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  box-shadow: var(--zd_bs_globalnotification_container);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   background-color: var(--globalnotification_bg_color);
   border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 1px 1px 1px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
 }
 
 [dir=ltr] .container {
@@ -102,7 +160,9 @@
   font-size: var(--zd_font_size14) ;
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
+  line-height: 1.4286;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 [dir=ltr] .text {

package/es/version2/GlobalNotification/props/propTypes.js

@@ -9,19 +9,24 @@ export const propTypes = {
   i18nKeys: PropTypes.object,
   customProps: PropTypes.shape({
     ExtraProps: PropTypes.object
-  })
+  }),
+  id: PropTypes.number,
+  hideTime: PropTypes.number,
+  isFloating: PropTypes.bool,
+  isExpand: PropTypes.bool,
+  stack: PropTypes.number
 };
 export const UI_propTypes = {
   dataSelectorId: PropTypes.string,
-  onClose: PropTypes.func,
   closeTitle: PropTypes.string,
-  hideMessage: PropTypes.func,
   message: PropTypes.string,
   onClick: PropTypes.func,
   type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
   customProps: PropTypes.shape({
     ExtraProps: PropTypes.object
-  })
+  }),
+  isExpand: PropTypes.bool,
+  stack: PropTypes.number
 };
 export const new_propTypes = {
   Element: PropTypes.element,

package/es/version2/errorstate/V2_ErrorStates.module.css

@@ -8,7 +8,7 @@
   font-family: var(--zd_bold);
 }
 .desc {
-  line-height: var(--zd_size22);
+  line-height: 1.5714;
 }
 .large .errorState {
   width: var(--zd_size450) ;

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -56,7 +56,7 @@
 .title {
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size18) ;
-  line-height: var(--zd_size22);
+  line-height: 1.2222;
   font-family: var(--zd_bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;

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

@@ -5,7 +5,7 @@
 .innerSection {
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size20);
+  line-height: 1.428;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   padding: var(--zd_size17) var(--zd_size30) var(--zd_size30) ;
 }

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

@@ -108,7 +108,7 @@
 
 .subTitle {
   font-size: var(--zd_font_size15) ;
-  line-height: var(--zd_size20);
+  line-height: 1.3333;
   font-family: var(--zd_semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -119,7 +119,7 @@
 
 .infoText {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size18);
+  line-height: 1.2857;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -65,7 +65,7 @@ export default class DesktopNotificationHeader extends Component {
         $ui_className: style.title,
         $ui_tagName: "h1",
         $ui_size: uptoTablet ? '16' : '18',
-        $ui_lineHeight: "20",
+        $ui_lineHeight: "1.2",
         $ui_weight: "bold",
         $flag_reset: true,
         $ui_wordBreak: "breakWord"

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

@@ -67,7 +67,7 @@
 }
 
 .primary .infoText {
-    line-height: var(--zd_size18);
+    line-height: 1;
   }
 
   .primary .close {
@@ -96,7 +96,7 @@
   }
 
   .secondary .infoText {
-    line-height: var(--zd_size20);
+    line-height: 1.4286;
   }
 
   .secondary .iconContainer {

package/lib/Attachment/Attachment.module.css

@@ -82,12 +82,12 @@
 
 .medium .atatchName {
   font-size: var(--zd_font_size14) ;
-  line-height: var(--zd_size20);
+  line-height: 1.4286;
 }
 
 .small .atatchName {
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size15);
+  line-height: 1.25;
 }
 
 .attachSize {
@@ -123,12 +123,14 @@
   left: calc( var(--zd_size1) * -1 ) ;
 }
 
+/* css:lineheight-validation:ignore */
 .medium .attachDownload {
   height: var(--zd_size25) ;
   width: var(--zd_size25) ;
   line-height: var(--zd_size23);
 }
 
+/* css:lineheight-validation:ignore */
 .small .attachDownload {
   height: var(--zd_size20) ;
   width: var(--zd_size20) ;

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: var(--zd_size36);
+    line-height: 1.6364;
     border-radius: 50%;
     cursor: pointer;
 }

package/lib/Drawer/Drawer.js

@@ -342,7 +342,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           customClass = _this$props5.customClass,
           needAutoZindex = _this$props5.needAutoZindex,
           innerPortalName = _this$props5.innerPortalName;
-      var zindexNumber = this.getNextIndex();
+      var zindexNumber = isActive ? this.getNextIndex() : '';
       return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: responsiveId

package/lib/ImportantNotes/ImportantNotes.module.css

@@ -2,19 +2,23 @@
   background: var(--zdt_importantnotes_bg);
   padding: var(--zd_size5) var(--zd_size10) ;
 }
+
 .title {
   font-size: var(--zd_font_size13) ;
-  line-height: var(--zd_font_size18);
+  line-height: 1.3846;
   color: var(--zdt_importantnotes_title_text);
 }
+
 .icon {
   color: var(--zdt_importantnotes_icon);
   font-size: 0 ;
   margin-top: var(--zd_size1) ;
 }
+
 [dir=ltr] .icon {
   margin-right: var(--zd_size5) ;
 }
+
 [dir=rtl] .icon {
   margin-left: var(--zd_size5) ;
-}
+}

package/lib/ToastMessage/ToastMessage.module.css

@@ -177,14 +177,14 @@
 .alertMessage {
   font-size: var(--zd_font_size12) ;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size16);
+  line-height: 1.3333;
   color: var(--zdt_toastmessage_alert_text);
   margin-top: var(--zd_size5) ;
 }
 
 .buttonText {
   font-size: inherit ;
-  line-height: var(--zd_size14);
+  line-height: normal;
   text-align: center;
   padding: 0 var(--zd_size7) ;
   cursor: pointer;
@@ -290,6 +290,7 @@
   background: var(--zdt_toastmessage_dropdown_bg);
 }
 
+/* css:lineheight-validation:ignore */
 .fill {
   width: var(--zd_size29) ;
   height: var(--zd_size29) ;

package/lib/Upload/Upload.module.css

@@ -88,7 +88,7 @@
   width: var(--zd_size12) ;
   top: 0 ;
   position: absolute;
-  line-height: var(--zd_size10);
+  line-height: 0.8333;
   font-size: var(--zd_font_size12) ;
   text-align: center;
 }

package/lib/alert/AlertLookup/AlertLookup.module.css

@@ -3,7 +3,7 @@
 }
 
 .innerSection {
-  line-height: var(--zd_size25);
+  line-height: 1.6667;
   color: var(--zdt_alertlookup_innersection_text);
   font-size: var(--zd_font_size15) ;
   word-break: break-word;

package/lib/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -1,12 +1,15 @@
+/* css:lineheight-validation:ignore */
 .container {
   position: relative;
   line-height: var(--zd_size18);
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   padding: var(--zd_size3) var(--zd_size15) ;
   cursor: pointer;
-}[dir=ltr] .container {
+}
+[dir=ltr] .container {
   margin-left: var(--zd_size15) ;
-}[dir=rtl] .container {
+}
+[dir=rtl] .container {
   margin-right: var(--zd_size15) ;
 }
 .container:hover {

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -58,8 +58,11 @@
 [dir=rtl] .linkDesc, [dir=rtl] .desc {
   margin-left: var(--zd_size4) ;
 }
-.desc {
-  line-height: var(--zd_size19);
+.small .desc {
+  line-height: 1.584;
+}
+.medium .desc {
+  line-height: 1.358;
 }
 .link {
   /* css:theme-validation:ignore */

package/lib/errorstate/EmptyStates.module.css

@@ -33,15 +33,15 @@
 }
 .title {
   font-size: var(--zd_font_size50) ;
-  line-height: var(--zd_size70);
+  line-height: 1.4;
 }
 .tabletTitle {
   font-size: var(--zd_font_size24) ;
-  line-height: var(--zd_size50);
+  line-height: 2.0833;
 }
 .mobileTitle {
   font-size: var(--zd_font_size22) ;
-  line-height: var(--zd_size30);
+  line-height: 1.3636;
 }
 .subtitle {
   font-size: var(--zd_font_size30) ;

package/lib/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -13,7 +13,7 @@
   font-size: var(--zd_font_size30) ;
 }
 .lastBox {
-  line-height: var(--zd_size24);
+  line-height: 1.7143;
   font-size: var(--zd_font_size14) ;
   margin: 0 auto ;
   margin-bottom: var(--zd_size20) ;

package/lib/form/fields/Fields.module.css

@@ -169,7 +169,7 @@
   color: var(--zdt_fields_phitag_text);
   font-size: var(--zd_font_size12) ;
   height: var(--zd_size18) ;
-  line-height: var(--zd_size18);
+  line-height: 1.5;
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
   padding: 0 var(--zd_size5) ;

package/lib/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -12,7 +12,7 @@
   font-size: var(--zd_font_size12) ;
   display: inline-block;
   color: var(--zdt_setupdetail_backicon);
-  line-height: var(--zd_size30);
+  line-height: 2.5;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
@@ -29,7 +29,7 @@
 }
 .title {
   font-size: var(--zd_font_size16) ;
-  line-height: var(--zd_size16);
+  line-height: 1;
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
@@ -57,7 +57,7 @@
   padding: var(--zd_size12) 0 0 var(--zd_size15) ;
 }
 .helpInfo {
-  line-height: var(--zd_size26);
+  line-height: 2.3636;
   height: var(--zd_size28) ;
   width: var(--zd_size28) ;
   color: var(--zdt_setupdetail_helpinfo_text);
@@ -120,7 +120,7 @@
   height: var(--zd_size26) ;
   width: var(--zd_size26) ;
   font-size: var(--zd_font_size12) ;
-  line-height: var(--zd_size24);
+  line-height: 2;
   text-align: center;
   border: 1px solid var(--zdt_setupdetail_infoicon_border);
   border-radius: 2px;

package/lib/list/listCommon.module.css

@@ -20,6 +20,7 @@
   font-size: var(--zd_font_size16) ;
 }
 
+/* css:lineheight-validation:ignore */
 .secondaryPanel {
   line-height: var(--zd_size18);
   composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';

package/lib/list/status/StatusListItem/StatusListItem.module.css

@@ -31,7 +31,7 @@
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
 .value,.multiLineValue {
-  line-height: var(--zd_size20);
+  line-height: 1.5385;
 }
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';

package/lib/lookup/header/Close/LookupClose.module.css

@@ -1,7 +1,7 @@
 .container {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
-  line-height: var(--zd_size25);
+  line-height: 2.7778;
   color: var(--zdt_lookupclose_default_text);
   transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
   font-size: var(--zd_font_size9) ;

package/lib/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -26,7 +26,7 @@
 /* Label Style */
 .labelCnt {
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
+  line-height: 1.6667;
   color: var(--zdt_viewdropdown_label_text);
   cursor: pointer;
 }

package/lib/setup/header/Search/Search.module.css

@@ -13,6 +13,7 @@
 .active .input, .input:hover {
   border-bottom-color: var(--zdt_search_input_border);
 }
+/* css:lineheight-validation:ignore */
 .icon {
   position: absolute;
   top: 0 ;

package/lib/setup/header/Views/Views.module.css

@@ -5,6 +5,7 @@
 }[dir=rtl] .container {
   margin-left: var(--zd_size15) ;
 }
+/* css:lineheight-validation:ignore */
 .icon {
   display: inline-block;
   color: var(--zdt_views_icon);

package/lib/setup/helptips/Description/HelpTipsDescription.module.css

@@ -1,6 +1,6 @@
 .text {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_helptips_text);
-  line-height: var(--zd_size24);
+  line-height: 1.7143;
   margin: var(--zd_size10) 0 ;
 }

package/lib/v1/ActionButton/ActionButton.js

@@ -7,9 +7,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("../../ActionButton/props/defaultProps");
+var _defaultProps = require("./props/defaultProps");
 
-var _propTypes = require("../../ActionButton/props/propTypes");
+var _propTypes = require("./props/propTypes");
 
 var _Popup = _interopRequireDefault(require("@zohodesk/components/es/v1/Popup/Popup"));