@zohodesk/dot 1.0.0-temp-187.17 → 1.0.0-temp-220.1

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.27
+
+- **GlobalNotification**
+ - `onStatusChange` prop added.
+
 # 1.7.26
 
 - `list/SecondaryText/PhoneNumber.js`

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

@@ -221,10 +221,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
-}
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
 }

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,14 +160,12 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = '',
-      dropBoxClass = ''
+      textBoxIconWrapperClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      ListItemProps = {}
+      TagProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -256,8 +254,7 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropdown
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -289,7 +286,7 @@ export default class TagsMultiSelect extends React.Component {
         let {
           name,
           isNew,
-          listProps
+          listItemProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -302,9 +299,8 @@ export default class TagsMultiSelect extends React.Component {
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
-          customProps: listProps,
-          customClass: listItemClass,
-          ...ListItemProps
+          customProps: listItemProps,
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,8 +52,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TagProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,19 +48,15 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      ToggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, { ...ToggleDropDownProps,
+    return /*#__PURE__*/React.createElement(ToggleDropDown, {
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,8 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -178,12 +178,8 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {},
-      customClass
+      a11y = {}
     } = this.props;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -251,8 +247,7 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

package/es/list/status/StatusDropdown/props/defaultProps.js

@@ -18,6 +18,5 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -56,8 +56,5 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object,
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
-  })
+  targetOffset: PropTypes.object
 };

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

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -89,10 +90,6 @@
 }
 /* Status Type */
 .statusType {
-  --status_listitem_bullet_min_height: var(--zd_size8);
-  --status_listitem_bullet_min_width: var(--zd_size8);
-  min-height: var(--status_listitem_bullet_min_height);
-  min-width: var(--status_listitem_bullet_min_width);
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
   border-radius: 50%;

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.getNotiifcationData = this.getNotiifcationData.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.getNotiifcationData();
+      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);
   }
 
+  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 +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.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/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/lib/form/fields/Fields.module.css

@@ -221,10 +221,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
-}
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
 }

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -222,17 +222,13 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customClass$listItem = customClass.listItemClass,
           listItemClass = _customClass$listItem === void 0 ? '' : _customClass$listItem,
           _customClass$textBoxI = customClass.textBoxIconWrapperClass,
-          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI,
-          _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          textBoxIconWrapperClass = _customClass$textBoxI === void 0 ? '' : _customClass$textBoxI;
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
       var isEditable = !isReadOnly;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder || isEditable && isFocus ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
@@ -310,8 +306,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           boxPosition: boxPosition,
           isPadding: false,
           customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
           },
           dataId: "".concat(dataId, "_dropbox"),
           isResponsivePadding: true,
@@ -342,8 +337,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         }, searchList.map(function (item, index) {
           var name = item.name,
               isNew = item.isNew,
-              listProps = item.listProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+              listItemProps = item.listItemProps;
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
             key: index,
             index: index,
             autoHover: true,
@@ -354,9 +349,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             highlight: selectSearchIndex === index,
             getRef: _this3.getSelectedItemRef,
             isDisabled: listDisabled,
-            customProps: listProps,
+            customProps: listItemProps,
             customClass: listItemClass
-          }, ListItemProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TagsMultiSelect/props/propTypes.js

@@ -62,8 +62,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
     TagWrapperProps: _propTypes["default"].object,
-    TagProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
+    TagProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,8 +25,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -102,10 +100,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys,
-          customProps = _this$props3.customProps;
-      var _customProps$ToggleDr = customProps.ToggleDropDownProps,
-          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
+          i18nKeys = _this$props3.i18nKeys;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -114,7 +109,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({}, ToggleDropDownProps, {
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -143,7 +138,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      }));
+      });
     }
   }]);
 

package/lib/list/DepartmentDropDown/props/defaultProps.js

@@ -9,7 +9,6 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };
 exports.defaultProps = defaultProps;

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -31,7 +31,5 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
-  ToggleDropDownProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -247,10 +247,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderTargetElement = _this$props4.renderTargetElement,
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
-          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
-          customClass = _this$props4.customClass;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -313,8 +310,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
-            customDropBox: dropBoxClass
+            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,

package/lib/list/status/StatusDropdown/props/defaultProps.js

@@ -24,7 +24,6 @@ var defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false,
-  customClass: {}
+  isRestrictScroll: false
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -30,7 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
-  dropBoxClass: _propTypes2["default"].string
-})), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

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

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -89,10 +90,6 @@
 }
 /* Status Type */
 .statusType {
-  --status_listitem_bullet_min_height: var(--zd_size8);
-  --status_listitem_bullet_min_width: var(--zd_size8);
-  min-height: var(--status_listitem_bullet_min_height);
-  min-width: var(--status_listitem_bullet_min_width);
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
   border-radius: 50%;

package/lib/version2/GlobalNotification/GlobalNotification.js

@@ -27,10 +27,20 @@ var _Layout = require("@zohodesk/components/es/Layout");
 
 var _Common = require("@zohodesk/components/es/utils/Common");
 
+var _getCurrentTime = _interopRequireDefault(require("@zohodesk/utils/es/getCurrentTime"));
+
+var _constants = require("./utils/constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -67,30 +77,61 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
       shadowClose: true
     };
     _this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
+    _this.getNotiifcationData = _this.getNotiifcationData.bind(_assertThisInitialized(_this));
+    _this.handleStatusChange = _this.handleStatusChange.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(GlobalNotification, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       var _this$props = this.props,
           hideMessage = _this$props.hideMessage,
           hideTime = _this$props.hideTime,
           id = _this$props.id,
           needAutoClose = _this$props.needAutoClose;
+      this.handleStatusChange(_constants.STATUS.MOUNTED);
 
       if (needAutoClose) {
         this.hideMessageTimer = setTimeout(function () {
           hideMessage(id);
+
+          _this2.handleStatusChange(_constants.STATUS.DISMISSING);
         }, hideTime);
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.id === this.props.id && (prevProps.message !== this.props.message || prevProps.type !== this.props.type)) {
+        this.handleStatusChange(_constants.STATUS.UPDATED);
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (this.hideMessageTimer) {
         clearTimeout(this.hideMessageTimer);
       }
+
+      this.handleStatusChange(_constants.STATUS.UNMOUNTED);
+    }
+  }, {
+    key: "handleStatusChange",
+    value: function handleStatusChange(status) {
+      var onStatusChange = this.props.onStatusChange;
+
+      if (typeof onStatusChange == 'function') {
+        var notificationData = this.getNotiifcationData();
+        var currentTime = (0, _getCurrentTime["default"])();
+        onStatusChange(_objectSpread(_objectSpread({
+          status: status
+        }, notificationData), {}, {
+          time: currentTime
+        }));
+      }
     }
   }, {
     key: "onClose",
@@ -102,42 +143,51 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
       this.setState({
         shadowClose: false
       });
+      this.handleStatusChange(_constants.STATUS.DISMISSING);
       hideMessage && hideMessage(id);
       onClose && onClose(e);
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "getNotiifcationData",
+    value: function getNotiifcationData() {
       var _this$props3 = this.props,
-          type = _this$props3.type,
-          message = _this$props3.message,
-          hideMessage = _this$props3.hideMessage,
-          onClick = _this$props3.onClick,
-          _this$props3$i18nKeys = _this$props3.i18nKeys,
-          i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
-          customProps = _this$props3.customProps,
-          dataSelectorId = _this$props3.dataSelectorId,
           id = _this$props3.id,
-          needShadow = _this$props3.needShadow,
-          shadowCount = _this$props3.shadowCount,
-          eleRef = _this$props3.eleRef;
+          type = _this$props3.type,
+          message = _this$props3.message;
+      return {
+        id: id,
+        type: type,
+        message: message
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+          hideMessage = _this$props4.hideMessage,
+          onClick = _this$props4.onClick,
+          _this$props4$i18nKeys = _this$props4.i18nKeys,
+          i18nKeys = _this$props4$i18nKeys === void 0 ? {} : _this$props4$i18nKeys,
+          customProps = _this$props4.customProps,
+          dataSelectorId = _this$props4.dataSelectorId,
+          needShadow = _this$props4.needShadow,
+          shadowCount = _this$props4.shadowCount,
+          eleRef = _this$props4.eleRef;
       var shadowClose = this.state.shadowClose;
       var _i18nKeys$closeTitle = i18nKeys.closeTitle,
           closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
-      return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
-        type: type,
-        message: message,
+      var notificationData = this.getNotiifcationData();
+      return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, _extends({}, notificationData, {
         hideMessage: hideMessage,
         onClick: onClick,
         closeTitle: closeTitle,
         customProps: customProps,
         dataSelectorId: dataSelectorId,
-        id: id,
         shadowCount: shadowCount,
         onClose: this.onClose,
         needShadow: shadowClose && needShadow,
         eleRef: eleRef
-      });
+      }));
     }
   }]);
 

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

@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
 
 var _GlobalNotification = _interopRequireDefault(require("../GlobalNotification"));
 
+var _constants = require("../utils/constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('GlobalNotification', function () {
@@ -15,4 +17,12 @@ describe('GlobalNotification', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('GlobalNotification Constants', function () {
+  test('should have correct constant values', function () {
+    expect(_constants.STATUS.MOUNTED).toBe('mounted');
+    expect(_constants.STATUS.UPDATED).toBe('updated');
+    expect(_constants.STATUS.DISMISSING).toBe('dismissing');
+    expect(_constants.STATUS.UNMOUNTED).toBe('unmounted');
+  });
 });

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

@@ -20,12 +20,13 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     ExtraProps: _propTypes["default"].object
   }),
-  id: _propTypes["default"].number,
+  id: _propTypes["default"].string,
   hideTime: _propTypes["default"].number,
   needAutoClose: _propTypes["default"].bool,
   isCollapseView: _propTypes["default"].bool,
   shadowCount: _propTypes["default"].number,
-  needShadow: _propTypes["default"].bool
+  needShadow: _propTypes["default"].bool,
+  onStatusChange: _propTypes["default"].func
 };
 exports.propTypes = propTypes;
 var UI_propTypes = {
@@ -39,7 +40,7 @@ var UI_propTypes = {
   }),
   needShadow: _propTypes["default"].bool,
   shadowCount: _propTypes["default"].number,
-  id: _propTypes["default"].number,
+  id: _propTypes["default"].string,
   onClose: _propTypes["default"].func
 };
 exports.UI_propTypes = UI_propTypes;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATUS = void 0;
+var STATUS = {
+  MOUNTED: 'mounted',
+  UNMOUNTED: 'unmounted',
+  UPDATED: 'updated',
+  DISMISSING: 'dismissing'
+};
+exports.STATUS = STATUS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-187.17",
+  "version": "1.0.0-temp-220.1",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "docs": "npm run css:review && review:props && react-cli docs",
-    "prepublishOnly": "node prePublish.js && npm run css:review  && npm run review:props",
+    "prepublishOnly": "node prePublish.js && npm run downloadOnly && npm run css:review  && npm run review:props",
     "postpublish": "node postPublish.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
@@ -73,17 +73,17 @@
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "../components",
+    "@zohodesk/components": "1.4.21",
     "@zohodesk/hooks": "2.0.6",
     "@zohodesk/icons": "1.1.3",
     "@zohodesk/layout": "^3.1.0",
     "@zohodesk/svg": "1.2.3",
-    "@zohodesk/utils": "1.3.15",
+    "@zohodesk/utils": "1.0.0-temp-1.1",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
-    "@zohodesk/dotkit": "1.0.3",
+    "@zohodesk/dotkit": "1.0.0-temp-1.5",
     "@zohodesk/react-cli": "1.1.27"
   },
   "peerDependencies": {
@@ -95,7 +95,7 @@
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/utils": "1.3.15",
+    "@zohodesk/utils": "1.0.0-temp-1.1",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0"
   }