@zohodesk/dot 1.7.26 → 1.8.2

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -7,6 +7,8 @@ import AlertClose from "../AlertClose/AlertClose";
 import style from "./GlobalNotification.module.css";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import getCurrentTime from '@zohodesk/utils/es/getCurrentTime';
+import { STATUS } from "./utils/constants";
 export default class GlobalNotification extends React.Component {
   constructor(props) {
     super(props);
@@ -15,6 +17,8 @@ export default class GlobalNotification extends React.Component {
       shadowClose: true
     };
     this.onClose = this.onClose.bind(this);
+    this.getNotificationData = this.getNotificationData.bind(this);
+    this.handleStatusChange = this.handleStatusChange.bind(this);
   }
 
   componentDidMount() {
@@ -24,18 +28,44 @@ export default class GlobalNotification extends React.Component {
       id,
       needAutoClose
     } = this.props;
+    this.handleStatusChange(STATUS.MOUNTED);
 
     if (needAutoClose) {
       this.hideMessageTimer = setTimeout(() => {
         hideMessage(id);
+        this.handleStatusChange(STATUS.DISMISSING);
       }, hideTime);
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.id === this.props.id && (prevProps.message !== this.props.message || prevProps.type !== this.props.type)) {
+      this.handleStatusChange(STATUS.UPDATED);
+    }
+  }
+
   componentWillUnmount() {
     if (this.hideMessageTimer) {
       clearTimeout(this.hideMessageTimer);
     }
+
+    this.handleStatusChange(STATUS.UNMOUNTED);
+  }
+
+  handleStatusChange(status) {
+    const {
+      onStatusChange
+    } = this.props;
+
+    if (typeof onStatusChange == 'function') {
+      const notificationData = this.getNotificationData();
+      const currentTime = getCurrentTime();
+      onStatusChange({
+        status,
+        ...notificationData,
+        time: currentTime
+      });
+    }
   }
 
   onClose(e) {
@@ -47,20 +77,31 @@ export default class GlobalNotification extends React.Component {
     this.setState({
       shadowClose: false
     });
+    this.handleStatusChange(STATUS.DISMISSING);
     hideMessage && hideMessage(id);
     onClose && onClose(e);
   }
 
+  getNotificationData() {
+    const {
+      id,
+      type,
+      message
+    } = this.props;
+    return {
+      id,
+      type,
+      message
+    };
+  }
+
   render() {
     let {
-      type,
-      message,
       hideMessage,
       onClick,
       i18nKeys = {},
       customProps,
       dataSelectorId,
-      id,
       needShadow,
       shadowCount,
       eleRef
@@ -71,15 +112,13 @@ export default class GlobalNotification extends React.Component {
     let {
       closeTitle = 'Close'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
-      type: type,
-      message: message,
+    const notificationData = this.getNotificationData();
+    return /*#__PURE__*/React.createElement(GlobalNotificationUI, { ...notificationData,
       hideMessage: hideMessage,
       onClick: onClick,
       closeTitle: closeTitle,
       customProps: customProps,
       dataSelectorId: dataSelectorId,
-      id: id,
       shadowCount: shadowCount,
       onClose: this.onClose,
       needShadow: shadowClose && needShadow,

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

@@ -126,7 +126,8 @@
   --globalnotification_text_color: var(--zdt_globalnotification_info_text);
 }
 
-.danger,.error {
+.danger,
+.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
   --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
   --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
@@ -148,7 +149,7 @@
 
 .text {
   font-size: var(--zd_font_size14) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   line-height: 1.4286;
   overflow: hidden;

package/es/version2/GlobalNotification/__tests__/GlobalNotification.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import GlobalNotification from "../GlobalNotification";
+import { STATUS } from "../utils/constants";
 describe('GlobalNotification', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +9,12 @@ describe('GlobalNotification', () => {
     } = render( /*#__PURE__*/React.createElement(GlobalNotification, null));
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('GlobalNotification Constants', () => {
+  test('should have correct constant values', () => {
+    expect(STATUS.MOUNTED).toBe('mounted');
+    expect(STATUS.UPDATED).toBe('updated');
+    expect(STATUS.DISMISSING).toBe('dismissing');
+    expect(STATUS.UNMOUNTED).toBe('unmounted');
+  });
 });

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

@@ -10,12 +10,13 @@ export const propTypes = {
   customProps: PropTypes.shape({
     ExtraProps: PropTypes.object
   }),
-  id: PropTypes.number,
+  id: PropTypes.string,
   hideTime: PropTypes.number,
   needAutoClose: PropTypes.bool,
   isCollapseView: PropTypes.bool,
   shadowCount: PropTypes.number,
-  needShadow: PropTypes.bool
+  needShadow: PropTypes.bool,
+  onStatusChange: PropTypes.func
 };
 export const UI_propTypes = {
   dataSelectorId: PropTypes.string,
@@ -28,7 +29,7 @@ export const UI_propTypes = {
   }),
   needShadow: PropTypes.bool,
   shadowCount: PropTypes.number,
-  id: PropTypes.number,
+  id: PropTypes.string,
   onClose: PropTypes.func
 };
 export const new_propTypes = {

package/es/version2/GlobalNotification/utils/constants.js

@@ -0,0 +1,6 @@
+export const STATUS = {
+  MOUNTED: 'mounted',
+  UNMOUNTED: 'unmounted',
+  UPDATED: 'updated',
+  DISMISSING: 'dismissing'
+};

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

@@ -5,7 +5,7 @@
   margin-top: var(--zd_size15) ;
 }
 .title {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 .desc {
   line-height: 1.5714;

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

@@ -1,6 +1,7 @@
 .varClass {
   --commonalert_border_color: var(--zdt_commonalert_default_border);
 }
+
 .container {
   composes: varClass;
   position: relative;
@@ -9,12 +10,15 @@
   border-color: var(--commonalert_border_color);
   border-width: 2px 0 0 0;
 }
+
 .headerLayout {
   min-height: var(--zd_size54) ;
 }
+
 [dir=ltr] .headerLayout {
   padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20) ;
 }
+
 [dir=rtl] .headerLayout {
   padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45) ;
 }
@@ -23,11 +27,13 @@
   --commonalert_border_color: var(--zdt_commonalert_success_border);
 }
 
-.info,.notification {
+.info,
+.notification {
   --commonalert_border_color: var(--zdt_commonalert_info_border);
 }
 
-.danger,.error {
+.danger,
+.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
 }
 
@@ -52,7 +58,7 @@
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size18) ;
   line-height: 1.2222;
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   cursor: default;

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

@@ -14,7 +14,7 @@
 
 .noteTitle {
     font-size: var(--zd_font_size13) ;
-    font-family: var(--zd_semibold);
+    font-weight: var(--zd-fw-semibold);
     composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 

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

@@ -36,7 +36,8 @@
 .large {
   width: var(--zd_size580) ;
 }
-.tapWidth{
+
+.tapWidth {
   max-width: 100% ;
   min-width: 100% ;
 }
@@ -109,7 +110,7 @@
 .subTitle {
   font-size: var(--zd_font_size15) ;
   line-height: 1.3333;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
 }
 
@@ -130,4 +131,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

package/lib/ActionButton/ActionButton.module.css

@@ -98,7 +98,7 @@
 
 .txt {
   font-size: var(--zd_font_size13) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   text-transform: capitalize;
 }
 

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }

package/lib/AudioPlayer/AudioPlayer.module.css

@@ -74,7 +74,7 @@
 .line {
     color: var(--zdt_audioplayer_line_text);
     font-size: var(--zd_font_size13) ;
-    font-family: var(--zd_semibold);
+    font-weight: var(--zd-fw-semibold);
 }
 
 .disable {

package/lib/DotProvider/hooks/useDotProvider.js

@@ -23,6 +23,8 @@ require("@zohodesk/components/es/common/basic.module.css");
 
 require("@zohodesk/variables/es/fontFamilyVariables.module.css");
 
+require("@zohodesk/variables/es/fontWeightVariables.module.css");
+
 require("@zohodesk/components/es/common/boxShadow.module.css");
 
 require("../../common/dot_boxShadow.module.css");

package/lib/Drawer/Drawer.module.css

@@ -109,7 +109,7 @@
 
 .title {
   color: var(--zdt_drawer_title_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }

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

@@ -20,7 +20,7 @@
   max-width: var(--zd_size430) ;
 }
 .title {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--titleColor);
   word-wrap: break-word;
 }

package/lib/emptystate/EditionPage/EditionPage.css

@@ -6,12 +6,12 @@
 }
 .header {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin-top: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin: var(--zd_size20) 0 ;
 }
 .content {

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

@@ -1,5 +1,5 @@
 .headtingText {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   font-size: var(--zd_font_size50) ;
   letter-spacing: var(--zd_size1);
   margin-bottom: var(--zd_size5) ;

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -10,10 +10,8 @@ exports[`CurrencyField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -45,9 +43,6 @@ exports[`CurrencyField rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/lib/form/fields/DateField/__tests__/__snapshots__/DateField.spec.js.snap

@@ -18,10 +18,8 @@ exports[`DateField rendering the defult props 1`] = `
           data-test-id="dateField(formatted_undefined)_widget"
         >
           <div
-            class="container effect  placeHolder  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -77,9 +75,6 @@ exports[`DateField rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/form/fields/MultiSelectField/__tests__/__snapshots__/MultiSelectField.spec.js.snap

@@ -29,10 +29,8 @@ exports[`MultiSelectField rendering the defult props 1`] = `
           "
           />
           <div
-            class="container effect  custmInputWrapper  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"

package/lib/form/fields/PhoneField/__tests__/__snapshots__/PhoneField.spec.js.snap

@@ -22,10 +22,8 @@ exports[`PhoneField rendering the defult props 1`] = `
           class="fieldContainer "
         >
           <div
-            class="container effect    flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -57,9 +55,6 @@ exports[`PhoneField rendering the defult props 1`] = `
                 data-test-id="containerComponent"
               />
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/form/fields/SelectField/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -19,10 +19,8 @@ exports[`SelectField rendering the defult props 1`] = `
           data-test-id="selectComponent"
         >
           <div
-            class="container effect  input  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -96,9 +94,6 @@ exports[`SelectField rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              class="line borderColor_default "
-            />
           </div>
         </div>
       </div>

package/lib/form/fields/TagsMultiSelect/__tests__/__snapshots__/TagsMultiSelect.spec.js.snap

@@ -25,10 +25,8 @@ exports[`TagsMultiSelect rendering the defult props 1`] = `
           class="custmSpan"
         />
         <div
-          class="container effect  custmInp  flex rowdir"
-          data-id="containerComponent"
+          class="varClass customContainer   effect     container custmInp  flex rowdir"
           data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

package/lib/form/fields/TagsMultiSelectField/__tests__/__snapshots__/TagsMultiSelectField.spec.js.snap

@@ -31,10 +31,8 @@ exports[`TagsMultiSelectField rendering the defult props 1`] = `
             class="custmSpan"
           />
           <div
-            class="container effect  custmInp  flex rowdir"
-            data-id="containerComponent"
+            class="varClass customContainer   effect     container custmInp  flex rowdir"
             data-selector-id="textBoxIcon"
-            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"

package/lib/form/fields/TextBoxField/__tests__/__snapshots__/TextBoxField.spec.js.snap

@@ -10,10 +10,8 @@ exports[`TextBoxField rendering the defult props 1`] = `
       class="fieldContainer "
     >
       <div
-        class="container effect    flex rowdir"
-        data-id="containerComponent"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
         data-selector-id="textBoxIcon"
-        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -45,9 +43,6 @@ exports[`TextBoxField rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
-        <div
-          class="line borderColor_default "
-        />
       </div>
     </div>
   </div>

package/lib/form/fields/TextEditor/TextEditor.js

@@ -290,7 +290,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
         var customStyleTag = document.createElement('style');
         customStyleTag.type = 'text/css';
         var customizedCSS = "pre {white-space: pre-wrap} ".concat(customCSS);
-        var fontCSS = "@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}";
+        var fontCSS = "@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}\n      @font-face {font-family: 'ZohoPuvi';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: 400;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: ZDLato;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'Roboto';font-weight: 400;font-style: normal;font-display: swap;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}";
         customStyleTag.textContent = "".concat(customizedCSS, " ").concat(fontCSS);
         iframeHead.appendChild(customStyleTag);
       }

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

@@ -32,7 +32,7 @@
 .textEditor * {
   box-sizing: initial;
   line-height: initial;
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .textEditor {
@@ -717,7 +717,7 @@
 }
 
 :global .KB_Editor textarea.ze_area {
-  font-family: var(--zd_regular) !important;
+  font-weight: var(--zd-fw-normal) !important;
   font-size: var(--zd_font_size14)  !important;
   padding: var(--zd_size15) var(--zd_size20)  !important;
 }

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

@@ -30,7 +30,7 @@
 .title {
   font-size: var(--zd_font_size16) ;
   line-height: 1;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--zdt_setupdetail_backicon);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -15,14 +15,14 @@
   cursor: not-allowed;
 }
 .textBold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
 .textStyle, .link{
   display: block
 }
 .textStyle.textBold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
   color: var(--zdt_secondaryText_black_text);
 }
 .ticketId,
@@ -64,7 +64,7 @@
 .ticketIdLink {
   cursor: pointer;
 }
-.ticketIdLink:hover, .ticketIdLink:focus {
+.ticketIdLink:hover,.ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
 .primaryAccountNameCnt {
@@ -72,13 +72,13 @@
 }
 /* status */
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 .font_semibold,
 .font_bold,

package/lib/list/Subject/Subject.module.css

@@ -14,15 +14,15 @@
 }
 
 .font_regular {
-  font-family: var(--zd_regular);
+  font-weight: var(--zd-fw-normal);
 }
 
 .font_semibold {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
 }
 
 .font_bold {
-  font-family: var(--zd_bold);
+  font-weight: var(--zd-fw-bold);
 }
 
 .font_semibold,

package/lib/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -1,12 +1,14 @@
 .container {
   text-align: center;
 }
+
 .image {
   margin: var(--zd_size20) auto ;
 }
+
 .contentDiv {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   margin-top: var(--zd_size15) ;
-}
+}