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

package/lib/services/components/Attachment/AttachmentViewerWrapper.js

@@ -0,0 +1,137 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _AttachmentViewer = _interopRequireDefault(require("@zohodesk/dot/es/AttachmentViewer/AttachmentViewer"));
+
+var _utils = require("../../helpers/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 AttachmentViewerWrapper(props) {
+  var isActive = props.isActive,
+      needDownload = props.needDownload,
+      previewObj = props.previewObj,
+      orgId = props.orgId,
+      hideAttachmentViewer = props.hideAttachmentViewer,
+      i18nKeys = props.i18nKeys;
+
+  var _ref = previewObj || {},
+      _ref$previewData = _ref.previewData,
+      previewData = _ref$previewData === void 0 ? [] : _ref$previewData,
+      selectedIndex = _ref.selectedIndex;
+
+  var _i18nKeys$nextText = i18nKeys.nextText,
+      nextText = _i18nKeys$nextText === void 0 ? 'Next' : _i18nKeys$nextText,
+      _i18nKeys$previousTex = i18nKeys.previousText,
+      previousText = _i18nKeys$previousTex === void 0 ? 'Previous' : _i18nKeys$previousTex,
+      _i18nKeys$zoomOutText = i18nKeys.zoomOutText,
+      zoomOutText = _i18nKeys$zoomOutText === void 0 ? 'Zoom Out' : _i18nKeys$zoomOutText,
+      _i18nKeys$zoomInText = i18nKeys.zoomInText,
+      zoomInText = _i18nKeys$zoomInText === void 0 ? 'Zoom In' : _i18nKeys$zoomInText,
+      _i18nKeys$newTabText = i18nKeys.newTabText,
+      newTabText = _i18nKeys$newTabText === void 0 ? 'Open in new tab' : _i18nKeys$newTabText,
+      _i18nKeys$downloadTex = i18nKeys.downloadText,
+      downloadText = _i18nKeys$downloadTex === void 0 ? 'Download' : _i18nKeys$downloadTex,
+      _i18nKeys$closeText = i18nKeys.closeText,
+      closeText = _i18nKeys$closeText === void 0 ? 'Close' : _i18nKeys$closeText,
+      _i18nKeys$hideText = i18nKeys.hideText,
+      hideText = _i18nKeys$hideText === void 0 ? 'Hide' : _i18nKeys$hideText,
+      _i18nKeys$showText = i18nKeys.showText,
+      showText = _i18nKeys$showText === void 0 ? 'Show' : _i18nKeys$showText;
+  var viewerRef = (0, _react.useRef)(null);
+
+  function addListener() {
+    window.addEventListener('keyup', handleKeyUp);
+  }
+
+  function removeListener() {
+    window.removeEventListener('keyup', handleKeyUp);
+  }
+
+  (0, _react.useEffect)(function () {
+    if (isActive) {
+      addListener();
+    } else {
+      removeListener();
+    }
+
+    return function () {
+      removeListener();
+    };
+  }, [isActive]);
+
+  function handleKeyUp(e) {
+    if (e.keyCode === 27) {
+      viewerRef.current && viewerRef.current.closeAttachmentViewer();
+    } else if (e.keyCode === 37) {
+      if (viewerRef.current) {
+        var _selectedIndex = viewerRef.current.state.selectedIndex;
+
+        if (_selectedIndex !== 0) {
+          viewerRef.current && viewerRef.current.changeSelectedIndex(_selectedIndex - 1);
+        }
+      }
+    } else if (e.keyCode === 39) {
+      if (viewerRef.current) {
+        var _selectedIndex2 = viewerRef.current.state.selectedIndex;
+        var totalLen = previewObj.previewData.length;
+
+        if (_selectedIndex2 !== totalLen - 1) {
+          viewerRef.current && viewerRef.current.changeSelectedIndex(_selectedIndex2 + 1);
+        }
+      }
+    }
+  }
+
+  var data = previewData.length ? previewData.map(function (item) {
+    item = item.viewUrl ? item : Object.assign({}, item, {
+      viewUrl: (0, _utils.getViewURL)(item, orgId)
+    });
+    item = Object.assign({}, item, {
+      downloadUrl: (0, _utils.constructAttachmentUrl)(item.href, orgId)
+    });
+    return item;
+  }) : null;
+  return isActive ? /*#__PURE__*/_react["default"].createElement(_AttachmentViewer["default"], {
+    needDownload: needDownload,
+    ref: viewerRef,
+    isActive: isActive,
+    hideAttachmentViewer: hideAttachmentViewer,
+    previewObj: {
+      previewData: data,
+      selectedIndex: selectedIndex
+    },
+    i18nKeys: {
+      nextText: nextText,
+      previousText: previousText,
+      zoomOutText: zoomOutText,
+      zoomInText: zoomInText,
+      newTabText: newTabText,
+      downloadText: downloadText,
+      closeText: closeText,
+      hideText: hideText,
+      showText: showText
+    }
+  }) : null;
+}
+
+AttachmentViewerWrapper.propTypes = _propTypes["default"];
+AttachmentViewerWrapper.defaultProps = _defaultProps["default"];
+var _default = AttachmentViewerWrapper;
+exports["default"] = _default;

package/lib/services/components/Attachment/props/defaultProps.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  previewObj: {},
+  i18nKeys: {}
+};
+exports["default"] = _default;

package/lib/services/components/Attachment/props/propTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  isActive: _propTypes["default"].bool,
+  needDownload: _propTypes["default"].bool,
+  previewObj: _propTypes["default"].object,
+  orgId: _propTypes["default"].string,
+  hideAttachmentViewer: _propTypes["default"].func,
+  i18nKeys: _propTypes["default"].object
+};
+exports["default"] = _default;

package/lib/services/components/ToastNotification/ToastNotification.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _ToastNotificationWrapper = _interopRequireDefault(require("./ToastNotificationWrapper"));
+
+var _components = require("@zohodesk/components");
+
+var _perfComponents = require("@zohodesk/perf-components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ToastNotification = function ToastNotification(props) {
+  var messages = props.messages,
+      clearToastNotifications = props.clearToastNotifications,
+      hideToastNotification = props.hideToastNotification,
+      notificationTooltipInfo = props.notificationTooltipInfo,
+      notificationI18nKeys = props.notificationI18nKeys,
+      isErrorNotificationAutoClose = props.isErrorNotificationAutoClose,
+      isSuccessNotificationAutoClose = props.isSuccessNotificationAutoClose,
+      errorNotificationAutoCloseTime = props.errorNotificationAutoCloseTime,
+      successNotifcationAutoCloseTime = props.successNotifcationAutoCloseTime,
+      notificationView = props.notificationView,
+      headerTitle = props.headerTitle,
+      showAllText = props.showAllText,
+      showLessText = props.showLessText,
+      clearAllText = props.clearAllText;
+  return /*#__PURE__*/_react["default"].createElement(_perfComponents.DeferComponent, null, /*#__PURE__*/_react["default"].createElement(_components.Modal, null, /*#__PURE__*/_react["default"].createElement(_ToastNotificationWrapper["default"], {
+    clearToastNotifications: clearToastNotifications,
+    hideToastNotification: hideToastNotification,
+    messages: messages,
+    notificationTooltipInfo: notificationTooltipInfo,
+    notificationI18nKeys: notificationI18nKeys,
+    isErrorNotificationAutoClose: isErrorNotificationAutoClose,
+    isSuccessNotificationAutoClose: isSuccessNotificationAutoClose,
+    errorNotificationAutoCloseTime: errorNotificationAutoCloseTime,
+    successNotifcationAutoCloseTime: successNotifcationAutoCloseTime,
+    notificationView: notificationView,
+    headerTitle: headerTitle,
+    showAllText: showAllText,
+    showLessText: showLessText,
+    clearAllText: clearAllText
+  })));
+};
+
+ToastNotification.propTypes = _propTypes["default"];
+var _default = ToastNotification;
+exports["default"] = _default;

package/lib/services/components/ToastNotification/ToastNotificationWrapper.js

@@ -0,0 +1,207 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _Animation = _interopRequireDefault(require("@zohodesk/components/es/Animation/Animation"));
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _icons = require("@zohodesk/icons");
+
+var _components = require("@zohodesk/components");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _utils = require("@zohodesk/components/es/Animation/utils");
+
+var _GlobalNotification = _interopRequireDefault(require("../../../version2/GlobalNotification/GlobalNotification"));
+
+var _ToastNotificationWrapperModule = _interopRequireDefault(require("./ToastNotificationWrapper.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ToastNotificationWrapper(props) {
+  var notificationI18nKeys = props.notificationI18nKeys,
+      messages = props.messages,
+      hideToastNotification = props.hideToastNotification,
+      clearToastNotifications = props.clearToastNotifications,
+      notificationTooltipInfo = props.notificationTooltipInfo,
+      isErrorNotificationAutoClose = props.isErrorNotificationAutoClose,
+      isSuccessNotificationAutoClose = props.isSuccessNotificationAutoClose,
+      errorNotificationAutoCloseTime = props.errorNotificationAutoCloseTime,
+      successNotifcationAutoCloseTime = props.successNotifcationAutoCloseTime,
+      _notificationView = props.notificationView,
+      headerTitle = props.headerTitle,
+      showAllText = props.showAllText,
+      showLessText = props.showLessText,
+      clearAllText = props.clearAllText;
+
+  var _useState = (0, _react.useState)(_notificationView),
+      _useState2 = _slicedToArray(_useState, 2),
+      notificationView = _useState2[0],
+      setnotificationView = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      needHeader = _useState4[0],
+      setNeedHeader = _useState4[1];
+
+  var notificationWholeParent = (0, _react.useRef)(null);
+  var notificationCount = messages.length;
+  var isStackView = notificationView === 'stack';
+  var isListView = notificationView === 'list';
+  var isCollapseExpandEnabled = isSuccessNotificationAutoClose && isErrorNotificationAutoClose && isStackView && notificationCount > 1;
+  var errorTypes = ['danger', 'error', 'warning', 'alert'];
+  var notificationWholeParentAnimationStyle = '';
+
+  function toggleNotificationView() {
+    if (notificationView === 'stack') {
+      setnotificationView('list');
+    } else {
+      notificationWholeParentAnimationStyle = _ToastNotificationWrapperModule["default"].expanadToCollapseAnimation;
+      var element = notificationWholeParent.current;
+
+      if (element) {
+        element.addEventListener('animationend', removeAnimationClass);
+        element.addEventListener('webkitAnimationEnd', removeAnimationClass);
+        element.addEventListener('mozAnimationEnd', removeAnimationClass);
+      }
+
+      setnotificationView('stack');
+    }
+  }
+
+  function handleNotificationHide(id) {
+    hideToastNotification(id);
+  }
+
+  function handleNotificationClearAll() {
+    setNeedHeader(false);
+    clearToastNotifications();
+  }
+
+  function removeAnimationClass() {
+    notificationWholeParent.current.classList.remove(notificationWholeParentAnimationStyle);
+  }
+
+  (0, _react.useEffect)(function () {
+    if (messages.length > 1) {
+      setNeedHeader(true);
+    }
+
+    return function () {
+      var element = notificationWholeParent.current;
+
+      if (element) {
+        element.removeEventListener('animationend', removeAnimationClass);
+        element.removeEventListener('webkitAnimationEnd', removeAnimationClass);
+        element.removeEventListener('mozAnimationEnd', removeAnimationClass);
+      }
+    };
+  }, [messages]);
+  var isHeaderActive = (!isSuccessNotificationAutoClose || !isErrorNotificationAutoClose || isListView) && needHeader;
+  var needShowButton = notificationCount > 1 && (!isSuccessNotificationAutoClose || !isErrorNotificationAutoClose);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: 'vertical',
+    className: _ToastNotificationWrapperModule["default"].wrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Animation["default"], {
+    name: "slideDown",
+    isActive: isHeaderActive
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    isCover: false,
+    align: 'vertical',
+    alignBox: 'row',
+    className: _ToastNotificationWrapperModule["default"].header
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    className: _ToastNotificationWrapperModule["default"].count
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _ToastNotificationWrapperModule["default"].countText
+  }, headerTitle), /*#__PURE__*/_react["default"].createElement("div", null, "(", notificationCount.toString().padStart(2, '0'), ")")), needShowButton ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _ToastNotificationWrapperModule["default"].showAllButton,
+    onClick: toggleNotificationView
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _ToastNotificationWrapperModule["default"].showAllButtonText
+  }, isStackView ? showAllText : showLessText), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: isStackView ? 'ZD-arrowDownSingle' : 'ZD-arrowupSingle',
+    size: "10"
+  })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_components.Button, {
+    onClick: handleNotificationClearAll,
+    customClass: {
+      customButton: _ToastNotificationWrapperModule["default"].clearButton
+    },
+    palette: 'secondary',
+    size: 'small',
+    text: clearAllText
+  })))), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    eleRef: notificationWholeParent,
+    alignBox: 'column-reverse',
+    isCover: false,
+    onClick: isCollapseExpandEnabled ? toggleNotificationView : null,
+    className: "".concat(_ToastNotificationWrapperModule["default"].parent, "  ").concat(isListView ? _ToastNotificationWrapperModule["default"].expanded : "".concat(_ToastNotificationWrapperModule["default"].collapse), " ").concat(notificationWholeParentAnimationStyle)
+  }, messages && messages.length > 0 && messages.map(function (notificationItem, index) {
+    var data = notificationItem.data,
+        id = notificationItem.id;
+    var needAutoClose = errorTypes.includes(data.type) ? isErrorNotificationAutoClose : isSuccessNotificationAutoClose;
+    var autoCloseTime = Number(errorTypes.includes(data.type) ? errorNotificationAutoCloseTime : successNotifcationAutoCloseTime) * 1000; // const modifiedMessage = data.message ? HTMLPurifier.sanitize(data.message) : '';
+
+    var notificationGropupDetails = _objectSpread(_objectSpread({}, data), {}, {
+      i18nKeys: notificationI18nKeys
+    });
+
+    return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+      key: id,
+      classNames: _utils.animationStyle['slideDown'],
+      timeout: 300
+    }, /*#__PURE__*/_react["default"].createElement(_GlobalNotification["default"], _extends({}, notificationGropupDetails, {
+      id: id,
+      shadowCount: notificationCount,
+      hideMessage: handleNotificationHide,
+      needShadow: isStackView,
+      needAutoClose: needAutoClose,
+      hideTime: autoCloseTime
+    })));
+  })), isCollapseExpandEnabled ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _ToastNotificationWrapperModule["default"].notificationToolTip
+  }, notificationTooltipInfo) : null));
+}
+
+ToastNotificationWrapper.propTypes = _propTypes["default"];
+ToastNotificationWrapper.defaultProps = _defaultProps["default"];
+var _default = ToastNotificationWrapper;
+exports["default"] = _default;

package/lib/services/components/ToastNotification/ToastNotificationWrapper.module.css

@@ -0,0 +1,193 @@
+.wrapper {
+    position: absolute;
+    top: 0 ;
+    overflow-y: auto;
+    pointer-events: none;
+    z-index: 1000;
+    scrollbar-width: none;
+}
+
+.wrapper::-webkit-scrollbar {
+    display: none;
+}
+
+
+.header {
+    height: var(--zd_size29) ;
+    width: var(--zd_size420) ;
+    z-index: 3;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0 ;
+    gap: var(--zd_size5) ;
+    pointer-events: auto;
+    background-color: var(--zdt_globalnotification_wrapper_bg);
+    padding: 0 var(--zd_size20) ;
+    box-shadow: 0px 1px 4px 0px var(--zdt_globalNotification_header_shadow);
+    margin-bottom: var(--zd_size2) ;
+    border-top: 1px solid var(--zdt_globalNotification_header_barder);
+}
+
+.showAllButton {
+    color: var(--zdt_globalnotification_wrappar_showall_text);
+    font-size: var(--zd_font_size12) ;
+    transition: background-color var(--zd_transition2);
+    cursor: pointer;
+    padding: var(--zd_size4) var(--zd_size8) ;
+    border-radius: 4px;
+}
+
+.showAllButton:hover {
+    background-color: var(--zdt_globalnotification_wrappar_showall_bg);
+}
+
+[dir=ltr] .showAllButtonText {
+    margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .showAllButtonText {
+    margin-left: var(--zd_size5) ;
+}
+
+.clearButton {
+    color: var(--zdt_globalnotification_wrappar_header_text);
+}
+
+.count {
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+    font-family: var(--zd_semibold);
+    font-size: var(--zd_font_size12) ;
+    color: var(--zdt_globalnotification_wrappar_header_text);
+}
+
+.countText {
+    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .countText {
+    margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .countText {
+    margin-left: var(--zd_size5) ;
+}
+
+.parent {
+    z-index: 2;
+    position: relative;
+    gap: var(--zd_size4) ;
+    align-items: center;
+    width: 100% ;
+}
+
+/* .settingsIcon {
+    color: gray;
+    display: none;
+  }
+  .settingsIcon:hover{
+    color: initial;
+  } */
+
+.notificationToolTip {
+    display: none;
+    position: relative;
+    white-space: initial;
+    top: var(--zd_size70) ;
+    color: var(--zdt_tooltip_default_text);
+    font-size: var(--zd_font_size13) ;
+    line-height: 1.5;
+    font-family: var(--zd_semibold);
+    word-break: break-word;
+    max-width: var(--zd_size420) ;
+    min-height: var(--zd_size24) ;
+    overflow: hidden;
+    z-index: 9999999;
+    pointer-events: none;
+    composes: fadeIn modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+    background-color: var(--zdt_tooltip_default_bg);
+    padding: var(--zd_size3) var(--zd_size13) ;
+    box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+    border-radius: 4px;
+}
+
+[dir=ltr] .notificationToolTip {
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+    animation-duration: var(--zd_transition7);
+}
+
+[dir=rtl] .notificationToolTip {
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+    animation-duration: var(--zd_transition7);
+}
+
+
+.expanded {
+    composes: flyDown modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+
+
+[dir=ltr] .expanded {
+    animation-duration: var(--zd_transition3);
+}
+
+
+[dir=rtl] .expanded {
+    animation-duration: var(--zd_transition3);
+}
+
+.collapse {
+    composes: flyUp modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+
+[dir=ltr] .collapse {
+    animation-duration: var(--zd_transition3);
+}
+
+[dir=rtl] .collapse {
+    animation-duration: var(--zd_transition3);
+}
+
+@keyframes positionCollapseChange {
+    0% {
+        position: relative;
+    }
+
+    100% {
+        position: absolute;
+    }
+}
+
+[dir=ltr] .expanadToCollapseAnimation.collapse>div {
+    animation: positionCollapseChange 0.3s forwards;
+}
+
+[dir=rtl] .expanadToCollapseAnimation.collapse>div {
+    animation: positionCollapseChange 0.3s forwards;
+}
+
+.collapse>div {
+    position: absolute;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}
+
+.expanded>div {
+    position: relative;
+}
+
+.collapse>div:not(:nth-last-child(-n+2)) {
+    display: none;
+}
+
+.collapse>div:nth-last-child(-n+2) {
+    display: block;
+}
+
+.collapse>div:last-child {
+    white-space: initial;
+}
+
+.parent:hover+.notificationToolTip {
+    display: block;
+}

package/lib/services/components/ToastNotification/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  messagesArray: [],
+  a11y_isErrorNotificationAutoClose: false,
+  a11y_isSuccessNotificationAutoClose: true,
+  a11y_errorNotificationAutoCloseTime: '10',
+  a11y_successNotifcationAutoCloseTime: '3',
+  a11y_notificationView: 'stack',
+  headerTitle: 'Info Message',
+  showAllText: 'Show all',
+  showLessText: 'Show less',
+  clearAllText: 'Clear All'
+};
+exports["default"] = _default;

package/lib/services/components/ToastNotification/props/propTypes.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  notificationI18nKeys: _propTypes["default"].object,
+  messages: _propTypes["default"].array,
+  hideToastNotification: _propTypes["default"].func,
+  clearToastNotifications: _propTypes["default"].func,
+  notificationTooltipInfo: _propTypes["default"].string,
+  notificationView: _propTypes["default"].string,
+  isSuccessNotificationAutoClose: _propTypes["default"].bool,
+  successNotifcationAutoCloseTime: _propTypes["default"].string,
+  isErrorNotificationAutoClose: _propTypes["default"].bool,
+  errorNotificationAutoCloseTime: _propTypes["default"].string,
+  headerTitle: _propTypes["default"].string,
+  showAllText: _propTypes["default"].string,
+  showLessText: _propTypes["default"].string,
+  clearAllText: _propTypes["default"].string
+};
+exports["default"] = _default;