@zohodesk/dot 1.0.0-temp-203.5 → 1.0.0-temp-203.6

package/README.md

@@ -2,6 +2,21 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.5 (yet to publish)
+
+- **AttachmentViewer** 
+  - `avatarProps` prop has been added under the `customProps` group.
+
+- **ChannelIcon** 
+  - `avatarProps`, `avatarIconProps` and `iconProps` prop has been added under the `customProps` group.
+
+- **PlusIcon**
+  - `customProps` prop has been added.
+
+# 1.7.4
+
+- **Loader** - Theme-based adaptation in loader, removed existing multi-color gradient loader.
+
 # 1.7.3
 
 - **RadioField**

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -276,9 +276,6 @@
 	--zdt_thread_iconText: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_thread_hover_iconText: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
-	/* loader */
-	--zdt_loader_gradient_bg: linear-gradient(to right, rgb(206, 34, 50) 0%, rgb(96, 128, 64) 20%, rgb(144, 178, 71) 40%, rgb(249, 221, 75) 60%, rgb(9, 116, 176) 80%, rgb(206, 34, 50) 100%);
-	
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(71,157,255);
 }

package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(69,161,89);
 }

package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(255,128,31);
 }

package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(233,79,79);
 }

package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(218, 22.86%, calc(13.73% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(215,152,53);
 }

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -276,9 +276,6 @@
 	--zdt_thread_iconText: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_thread_hover_iconText: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
-	/* loader */
-	--zdt_loader_gradient_bg: linear-gradient(to right, rgb(206, 34, 50) 0%, rgb(96, 128, 64) 20%, rgb(144, 178, 71) 40%, rgb(249, 221, 75) 60%, rgb(9, 116, 176) 80%, rgb(206, 34, 50) 100%);
-	
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(228, 18.01%, calc(31.57% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(227, 27.27%, calc(23.73% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(227, 27.27%, calc(23.73% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(71,157,255);
 }

package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(190, 37.35%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(190, 43.40%, calc(10.39% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(190, 43.40%, calc(10.39% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(69,161,89);
 }

package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(54, 46.03%, calc(12.35% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(39, 30.91%, calc(10.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(39, 30.91%, calc(10.78% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(255,128,31);
 }

package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(351, 23.46%, calc(15.88% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(322, 38.78%, calc(9.61% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(322, 38.78%, calc(9.61% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(233,79,79);
 }

package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc( 0.08 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(67, 33.33%, calc(10.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(67, 33.33%, calc(10.59% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(215,152,53);
 }

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -276,9 +276,6 @@
 	--zdt_thread_iconText: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_thread_hover_iconText: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
-	/* loader */
-	--zdt_loader_gradient_bg: linear-gradient(to right, rgb(206, 34, 50) 0%, rgb(96, 128, 64) 20%, rgb(144, 178, 71) 40%, rgb(249, 221, 75) 60%, rgb(9, 116, 176) 80%, rgb(206, 34, 50) 100%);
-	
 	/* lookup header common */
 	--zdt_lookupheader_default_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_lookupheader_white_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(71,157,255);
 }

package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(69,161,89);
 }

package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(255,128,31);
 }

package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(233,79,79);
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css

@@ -13,4 +13,7 @@
 	--zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
+	
+	/* loader */
+	--zdt_loader_bg: rgb(215,152,53);
 }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -363,8 +363,12 @@ export default class AttachmentViewer extends Component {
       needDownload,
       i18nKeys,
       isActive,
-      dataId
+      dataId,
+      customProps
     } = this.props;
+    const {
+      avatarProps = {}
+    } = customProps;
     const totalLen = data.length;
     const selectedAttachment = data[selectedIndex] || {};
     const selectedImgUrl = selectedAttachment.viewUrl;
@@ -552,7 +556,8 @@ export default class AttachmentViewer extends Component {
         name: authorName,
         size: "xmedium",
         src: authorHref,
-        palette: "info"
+        palette: "info",
+        ...avatarProps
       }), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         className: style.authorName,

package/es/AttachmentViewer/props/defaultProps.js

@@ -11,5 +11,6 @@ export const AttachmentViewer_defaultProps = {
   i18nKeys: {},
   maintainZoom: false,
   isActive: false,
-  dataId: 'AttachmentViewer'
+  dataId: 'AttachmentViewer',
+  customProps: {}
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '@zohodesk/components/es/Avatar/props/propTypes';
 export const AttachmentImage_propTypes = {
   alt: PropTypes.string,
   customClass: PropTypes.shape({
@@ -32,5 +33,8 @@ export const AttachmentViewer_propTypes = {
   responsiveId: PropTypes.string,
   maintainZoom: PropTypes.bool,
   isActive: PropTypes.bool,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  customProps: PropTypes.shape({
+    avatarProps: PropTypes.exact(AvatarProps)
+  })
 };

package/es/ChannelIcon/ChannelIcon.js

@@ -34,8 +34,14 @@ export default class ChannelIcon extends Component {
       renderIconOnly,
       iconName,
       title,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
+    const {
+      avatarProps = {},
+      avatarIconProps = {},
+      iconProps = {}
+    } = customProps;
     let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
     let customizedChannelName = null;
 
@@ -56,7 +62,8 @@ export default class ChannelIcon extends Component {
       customClass: customTextClass,
       dataId: dataId,
       needTitle: title,
-      title: title
+      title: title,
+      ...avatarProps
     }) : !renderIconOnly ? iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
       name: iconName,
       iconSize: iconSize,
@@ -65,7 +72,8 @@ export default class ChannelIcon extends Component {
       dataId: dataId,
       className: className,
       iconColor: iconColor,
-      title: iconTitle
+      title: iconTitle,
+      ...avatarIconProps
     }) : /*#__PURE__*/React.createElement(Avatar, {
       name: name,
       size: size,
@@ -74,13 +82,15 @@ export default class ChannelIcon extends Component {
       customClass: customTextClass,
       dataId: dataId,
       needTitle: title,
-      title: title
+      title: title,
+      ...avatarProps
     }) : /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize,
       iconClass: `${iconClass ? iconClass : ''} ${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''}`,
       title: iconTitle,
-      dataId: dataId
+      dataId: dataId,
+      ...iconProps
     }), topicIcon ? /*#__PURE__*/React.createElement("span", {
       className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass ? topicClass : ''}`,
       "data-title": topicIconTitle

package/es/ChannelIcon/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   name: 'phone',
   needTopicBorder: true,
   renderIconOnly: false,
-  dataSelectorId: 'channelIcon'
+  dataSelectorId: 'channelIcon',
+  customProps: {}
 };

package/es/ChannelIcon/props/propTypes.js

@@ -1,4 +1,7 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '@zohodesk/components/es/Avatar/props/propTypes';
+import { propTypes as AvatarIconProps } from '../../avatar/AvatarIcon/props/propTypes';
+import { IconProps as IconPropTypes } from '@zohodesk/icons/es/Icon/props/propTypes';
 export const propTypes = {
   action: PropTypes.string,
   className: PropTypes.string,
@@ -21,5 +24,10 @@ export const propTypes = {
   topicIconColor: PropTypes.string,
   topicIconSize: PropTypes.string,
   topicIconTitle: PropTypes.string,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.shape({
+    avatarProps: PropTypes.exact(AvatarProps),
+    avatarIconProps: PropTypes.exact(AvatarIconProps),
+    iconProps: PropTypes.exact(IconPropTypes)
+  })
 };

package/es/Loader/Loader.module.css

@@ -11,19 +11,20 @@
 .loader {
   width: 100% ;
   /*  Variable:Ignore  */
-  height: 3px;
-  background-image: var(--zdt_loader_gradient_bg);
-  background-size: 200% auto;
+  height: 5px;
+  background-size: 50% auto;
 }
 [dir=ltr] .loader {
+  background-image: linear-gradient(to right, var(--zdt_loader_bg) 30%, var(--dot_solitude) 50%, var(--zdt_loader_bg) 90%);
   background-position: 0 100%;
-  animation:  loading-ltr 3s infinite;
+  animation:  loading-ltr 2s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
 }
 [dir=rtl] .loader {
+  background-image: linear-gradient(to left, var(--zdt_loader_bg) 30%, var(--dot_solitude) 50%, var(--zdt_loader_bg) 90%);
   background-position: 100% 100%;
-  animation:  loading-rtl 3s infinite;
+  animation:  loading-rtl 2s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
 }
@@ -33,7 +34,7 @@
     background-position: 0 0;
   }
   100% {
-    background-position: -200% 0;
+    background-position: 200% 0;
   }
 }
 
@@ -42,6 +43,6 @@
     background-position: 100% 0;
   }
   100% {
-    background-position: 300% 0;
+    background-position: -100% 0;
   }
 }

package/es/PlusIcon/PlusIcon.js

@@ -17,7 +17,8 @@ export default class PlusIcon extends React.Component {
       size,
       onClick,
       title,
-      customClass
+      customClass,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
       className: style.container,
@@ -30,7 +31,8 @@ export default class PlusIcon extends React.Component {
       iconClass: `${iconClass} ${style.icon}`,
       iconSize: iconSize,
       size: size,
-      className: `${customClass} ${style.plusIcon}`
+      className: `${customClass} ${style.plusIcon}`,
+      customProps: customProps
     }));
   }
 

package/es/PlusIcon/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   iconSize: '16',
   dataId: 'addreqNowbutton',
   iconClass: '',
-  customClass: ''
+  customClass: '',
+  customProps: {}
 };

package/es/PlusIcon/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarIconProps } from '../../avatar/AvatarIcon/props/propTypes.js';
 export const propTypes = {
   dataId: PropTypes.string,
   iconClass: PropTypes.string,
@@ -7,5 +8,6 @@ export const propTypes = {
   onClick: PropTypes.func,
   size: PropTypes.oneOf(['small', 'xsmall', 'xxsmall', 'medium', 'xmedium', 'xlarge']),
   title: PropTypes.string,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  customProps: PropTypes.exact(AvatarIconProps)
 };

package/es/utils/getCurrentTime.js

@@ -0,0 +1,10 @@
+export default function getCurrentTime() {
+  const now = new Date();
+  const hours = now.getHours();
+  const minutes = now.getMinutes().toString().padStart(2, '0');
+  const seconds = now.getSeconds().toString().padStart(2, '0');
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const formattedHours = hours % 12 || 12; // Convert 24-hour time to 12-hour format
+
+  return `${formattedHours}:${minutes}:${seconds} ${ampm}`;
+}

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -4,9 +4,10 @@ import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
 import AutoClose from '../../actions/AutoClose';
 import AlertIcons from '../alertIcons/AlertIcons';
 import AlertClose from '../AlertClose/AlertClose';
-import style from './v2GlobalNotification.module.css';
+import style from './GlobalNotification.module.css';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import getCurrentTime from '../../utils/getCurrentTime';
 export default class GlobalNotification extends React.Component {
   constructor(props) {
     super(props);
@@ -15,6 +16,8 @@ export default class GlobalNotification extends React.Component {
       shadowClose: true
     };
     this.onClose = this.onClose.bind(this);
+    this.getNotiifcationData = this.getNotiifcationData.bind(this);
+    this.handleStatusChange = this.handleStatusChange.bind(this);
   }
 
   componentDidMount() {
@@ -24,20 +27,48 @@ export default class GlobalNotification extends React.Component {
       id,
       needAutoClose
     } = this.props;
+    this.handleStatusChange('mounted');
 
     if (needAutoClose) {
       this.hideMessageTimer = setTimeout(() => {
         hideMessage(id);
+        this.handleStatusChange('dismissing');
       }, hideTime);
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id && (prevProps.message !== this.props.message || prevProps.type !== this.props.type)) {
+      this.handleStatusChange('updated');
+    }
+  }
+
   componentWillUnmount() {
     if (this.hideMessageTimer) {
       clearTimeout(this.hideMessageTimer);
     }
+
+    this.handleStatusChange('unmounted');
   }
 
+  handleStatusChange(status) {
+    const {
+      onStatusChange
+    } = this.props;
+    const notificationData = this.getNotiifcationData();
+    const currentTime = getCurrentTime();
+
+    if (typeof onStatusChange == 'function') {
+      onStatusChange({
+        status,
+        ...notificationData,
+        time: currentTime
+      });
+    }
+  }
+
+  handleNotificationClose() {}
+
   onClose(e) {
     const {
       onClose,
@@ -47,20 +78,31 @@ export default class GlobalNotification extends React.Component {
     this.setState({
       shadowClose: false
     });
+    this.handleStatusChange('dismissing');
     hideMessage && hideMessage(id);
     onClose && onClose(e);
   }
 
+  getNotiifcationData() {
+    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 +113,13 @@ export default class GlobalNotification extends React.Component {
     let {
       closeTitle = 'Close'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
-      type: type,
-      message: message,
+    const notificationData = this.getNotiifcationData();
+    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/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -5,7 +5,7 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 import AlertClose from '../../AlertClose/AlertClose';
 import AlertIcons from '../../alertIcons/AlertIcons';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import Typography from '@zohodesk/components/es/v1/Typography/Typography';
+import Typography from '@zohodesk/components/es/Typography/Typography';
 import style from './DesktopNotificationHeader.module.css';
 export default class DesktopNotificationHeader extends Component {
   constructor(props) {

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -445,7 +445,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           needDownload = _this$props2.needDownload,
           i18nKeys = _this$props2.i18nKeys,
           isActive = _this$props2.isActive,
-          dataId = _this$props2.dataId;
+          dataId = _this$props2.dataId,
+          customProps = _this$props2.customProps;
+      var _customProps$avatarPr = customProps.avatarProps,
+          avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
       var selectedImgUrl = selectedAttachment.viewUrl;
@@ -629,12 +632,12 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: "row",
           align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
           name: authorName,
           size: "xmedium",
           src: authorHref,
           palette: "info"
-        }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, avatarProps)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           className: _AttachmentViewerModule["default"].authorName,
           "data-title": authorName

package/lib/AttachmentViewer/props/defaultProps.js

@@ -18,6 +18,7 @@ var AttachmentViewer_defaultProps = {
   i18nKeys: {},
   maintainZoom: false,
   isActive: false,
-  dataId: 'AttachmentViewer'
+  dataId: 'AttachmentViewer',
+  customProps: {}
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/AttachmentViewer/props/propTypes.js

@@ -7,6 +7,8 @@ exports.AttachmentViewer_propTypes = exports.AttachmentImage_propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("@zohodesk/components/es/Avatar/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var AttachmentImage_propTypes = {
@@ -43,6 +45,9 @@ var AttachmentViewer_propTypes = {
   responsiveId: _propTypes["default"].string,
   maintainZoom: _propTypes["default"].bool,
   isActive: _propTypes["default"].bool,
-  dataId: _propTypes["default"].string
+  dataId: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    avatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
+  })
 };
 exports.AttachmentViewer_propTypes = AttachmentViewer_propTypes;