@zohodesk/dot 1.9.12 → 1.9.14

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

@@ -25,10 +25,9 @@ export default class DesktopNotificationHeader extends Component {
       responsiveId
     } = this.props;
 
-    function responsiveFunc(_ref) {
-      let {
-        mediaQueryOR
-      } = _ref;
+    function responsiveFunc({
+      mediaQueryOR
+    }) {
       return {
         uptoTablet: mediaQueryOR([{
           maxWidth: 760
@@ -45,46 +44,43 @@ export default class DesktopNotificationHeader extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: responsiveFunc,
       responsiveId: responsiveId
-    }, _ref2 => {
-      let {
-        uptoTablet
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
-        className: style.iconContainer
-      }, /*#__PURE__*/React.createElement(AlertIcons, {
-        type: type
-      })) : null, /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row",
-        align: "center"
-      }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
-        shrink: true
-      }, /*#__PURE__*/React.createElement(Typography, {
-        $i18n_dataTitle: title,
-        $ui_className: style.title,
-        $ui_tagName: "h1",
-        $ui_size: uptoTablet ? '16' : '18',
-        $ui_lineHeight: "1.2",
-        $ui_weight: "bold",
-        $flag_reset: true,
-        $ui_wordBreak: "breakWord"
-      }, title)) : /*#__PURE__*/React.createElement(Box, {
-        className: `${style.infoText}`
-      }, /*#__PURE__*/React.createElement(Typography, {
-        $i18n_dataTitle: title,
-        $ui_className: style.title,
-        $ui_size: "14",
-        $ui_wordBreak: "breakWord"
-      }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
-        className: style.close
-      }, /*#__PURE__*/React.createElement(AlertClose, {
-        onClose: onClose,
-        dataTitle: closeTitle,
-        dataId: dataId,
-        type: "light"
-      })) : null);
-    }));
+    }, ({
+      uptoTablet
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
+      className: style.iconContainer
+    }, /*#__PURE__*/React.createElement(AlertIcons, {
+      type: type
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "center"
+    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_tagName: "h1",
+      $ui_size: uptoTablet ? '16' : '18',
+      $ui_lineHeight: "1.2",
+      $ui_weight: "bold",
+      $flag_reset: true,
+      $ui_wordBreak: "breakWord"
+    }, title)) : /*#__PURE__*/React.createElement(Box, {
+      className: `${style.infoText}`
+    }, /*#__PURE__*/React.createElement(Typography, {
+      $i18n_dataTitle: title,
+      $ui_className: style.title,
+      $ui_size: "14",
+      $ui_wordBreak: "breakWord"
+    }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      onClose: onClose,
+      dataTitle: closeTitle,
+      dataId: dataId,
+      type: "light"
+    })) : null)));
   }
 
 }

package/lib/AttachmentViewer/AttachmentImage.js

@@ -92,7 +92,8 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
           isCover = _this$props.isCover,
           customClass = _this$props.customClass,
           onLoad = _this$props.onLoad,
-          onError = _this$props.onError;
+          onError = _this$props.onError,
+          imageRef = _this$props.imageRef;
       var isImageValid = this.state.isImageValid;
       var _customClass$customIm = customClass.customImageClass,
           customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm;
@@ -104,6 +105,7 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
         className: customImageClass,
         alt: alt,
         isCover: isCover,
+        eleRef: imageRef,
         onLoad: onLoad,
         onError: onError
       });

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -35,11 +35,13 @@ var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 
 var _FreezeLayer = _interopRequireDefault(require("../FreezeLayer/FreezeLayer"));
 
-var _Attachment = require("./Attachment");
+var _utils = require("@zohodesk/utils");
 
 var _General = require("../utils/General");
 
-var _utils = require("./utils");
+var _Attachment = require("./Attachment");
+
+var _utils2 = require("./utils");
 
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
@@ -119,8 +121,11 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _this.getUpdateDataList = _this.getUpdateDataList.bind(_assertThisInitialized(_this));
     _this.zoomMaintain = _this.zoomMaintain.bind(_assertThisInitialized(_this));
     _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
+    _this.notifySelectedAttachmentChange = _this.notifySelectedAttachmentChange.bind(_assertThisInitialized(_this));
     _this.getPreviewIconData = _this.getPreviewIconData.bind(_assertThisInitialized(_this));
     _this.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this));
+    _this.getRenderImageFrameCustomClass = _this.getRenderImageFrameCustomClass.bind(_assertThisInitialized(_this));
+    _this.renderImageFrame = _this.renderImageFrame.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -129,7 +134,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function isImageFileType(fileName) {
       var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
       if (!extension) return false;
-      return _utils.FILE_EXTENSIONS.image.map(function (ext) {
+      return _utils2.FILE_EXTENSIONS.image.map(function (ext) {
         return ext.toLowerCase();
       }).includes(extension);
     }
@@ -138,7 +143,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function isVideoFileType(fileName) {
       var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
       if (!extension) return false;
-      return _utils.FILE_EXTENSIONS.video.map(function (ext) {
+      return _utils2.FILE_EXTENSIONS.video.map(function (ext) {
         return ext.toLowerCase();
       }).includes(extension);
     }
@@ -147,25 +152,45 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function isAudioFileType(fileName) {
       var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
       if (!extension) return false;
-      return _utils.FILE_EXTENSIONS.audio.map(function (ext) {
+      return _utils2.FILE_EXTENSIONS.audio.map(function (ext) {
         return ext.toLowerCase();
       }).includes(extension);
     }
+  }, {
+    key: "notifySelectedAttachmentChange",
+    value: function notifySelectedAttachmentChange() {
+      var onSelectedAttachmentChange = this.props.onSelectedAttachmentChange;
+      var _this$state = this.state,
+          selectedIndex = _this$state.selectedIndex,
+          data = _this$state.data;
+      onSelectedAttachmentChange && onSelectedAttachmentChange({
+        data: data[selectedIndex] || _General.DUMMY_OBJECT,
+        index: selectedIndex
+      });
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.handleMenuValidation();
+      this.notifySelectedAttachmentChange();
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var previewObj = this.props.previewObj;
-      var selectedIndex = this.state.selectedIndex;
+      var _this$state2 = this.state,
+          selectedIndex = _this$state2.selectedIndex,
+          data = _this$state2.data;
       var indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+      var attachmentPreviewUrlChanged = previewObj.previewData.some(function (value, index) {
+        var _prevState$data$index;
+
+        return (value === null || value === void 0 ? void 0 : value.viewUrl) !== ((_prevState$data$index = prevState.data[index]) === null || _prevState$data$index === void 0 ? void 0 : _prevState$data$index.viewUrl);
+      }); // Triggers an update if any previewed attachment is edited by the Attachment Annotator.
 
-      if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+      if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
         var objChanged = previewObj.previewData.some(function (value, index) {
-          return (0, _General.shallowDiff)(value, prevProps.previewObj[index]);
+          return (0, _General.shallowDiff)(value, prevProps.previewObj.previewData[index]);
         });
 
         if (objChanged || indexChanged) {
@@ -182,7 +207,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if (prevState.selectedIndex != selectedIndex) {
+      if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+        this.notifySelectedAttachmentChange();
         this.handleMenuValidation();
       }
     }
@@ -191,16 +217,16 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function handleMenuValidation() {
       var _this2 = this;
 
-      var _this$state = this.state,
-          data = _this$state.data,
-          selectedIndex = _this$state.selectedIndex;
+      var _this$state3 = this.state,
+          data = _this$state3.data,
+          selectedIndex = _this$state3.selectedIndex;
       var allowedPreviewExtensionsData = this.props.allowedPreviewExtensionsData;
-      var selectedAttachment = data[selectedIndex] || {};
+      var selectedAttachment = data[selectedIndex] || _General.DUMMY_OBJECT;
       var selectedAttachmentViewUrl = selectedAttachment.viewUrl; // const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
 
       var selectedAttachmentName = selectedAttachment.name;
       var selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
-      (0, _utils.checkFileSourcesValidation)({
+      (0, _utils2.checkFileSourcesValidation)({
         fileName: selectedAttachmentName,
         viewURL: selectedAttachmentViewUrl,
         previewUrl: selectedAttachmentPreviewUrl,
@@ -322,9 +348,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function changeSelectedIndex(index) {
       var _this4 = this;
 
-      var _this$state2 = this.state,
-          data = _this$state2.data,
-          selectedIndex = _this$state2.selectedIndex;
+      var _this$state4 = this.state,
+          data = _this$state4.data,
+          selectedIndex = _this$state4.selectedIndex;
       var maintainZoom = this.props.maintainZoom;
       maintainZoom ? this.zoomMaintain(index) : this.zoomOut(selectedIndex);
 
@@ -396,19 +422,83 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         className: _AttachmentViewerModule["default"].previewFrame
       }, this.props.customProps.iframeProps));
     }
+  }, {
+    key: "getRenderImageFrameCustomClass",
+    value: function getRenderImageFrameCustomClass() {
+      var _this$state5 = this.state,
+          selectedIndex = _this$state5.selectedIndex,
+          isZoomed = _this$state5.isZoomed,
+          canZoom = _this$state5.canZoom,
+          data = _this$state5.data;
+      var maintainZoom = this.props.maintainZoom;
+      var selectedData = data[selectedIndex] || _General.DUMMY_OBJECT;
+      var _selectedData$customC = selectedData.customClass,
+          customClass = _selectedData$customC === void 0 ? _General.DUMMY_OBJECT : _selectedData$customC;
+      var _customClass$customIm = customClass.customImageClass,
+          customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
+          _customClass$customCh = customClass.customChildrenClass,
+          customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
+      var retainZoom = canZoom && maintainZoom;
+      return {
+        customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, " ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
+        customChildrenClass: customChildrenClass
+      };
+    }
+  }, {
+    key: "renderImageFrame",
+    value: function renderImageFrame() {
+      var _this5 = this;
+
+      var _this$state6 = this.state,
+          selectedIndex = _this$state6.selectedIndex,
+          isZoomed = _this$state6.isZoomed,
+          isPreviewAttachmentValid = _this$state6.isPreviewAttachmentValid;
+      var renderCustomImagePreviewElement = this.props.renderCustomImagePreviewElement;
+      var data = this.state.data[selectedIndex] || _General.DUMMY_OBJECT;
+      var viewUrl = data.viewUrl,
+          name = data.name,
+          children = data.children,
+          _data$dataId = data.dataId,
+          dataId = _data$dataId === void 0 ? 'attachViewer' : _data$dataId,
+          _data$customProps = data.customProps,
+          customProps = _data$customProps === void 0 ? _General.DUMMY_OBJECT : _data$customProps,
+          imageRef = data.imageRef;
+      var _customProps$imagePro = customProps.imageProps,
+          imageProps = _customProps$imagePro === void 0 ? _General.DUMMY_OBJECT : _customProps$imagePro;
+      var resolvedImageRef = imageRef;
+      var handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, selectedIndex) : undefined;
+      var handleZoomIn = isPreviewAttachmentValid && !isZoomed ? function (e) {
+        return _this5.zoomIn(e, selectedIndex, true);
+      } : undefined;
+      var handleImageClick = isPreviewAttachmentValid ? isZoomed ? handleZoomOut : handleZoomIn : undefined;
+      var imageFrameCustomClass = this.getRenderImageFrameCustomClass();
+
+      var img = /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+        customClass: imageFrameCustomClass,
+        src: viewUrl,
+        onClick: handleImageClick,
+        alt: name,
+        dataId: dataId,
+        id: "img".concat(selectedIndex),
+        isCover: false,
+        imageRef: resolvedImageRef
+      }, imageProps), children);
+
+      return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
+        defaultView: img,
+        data: data,
+        index: selectedIndex
+      }) : img;
+    }
   }, {
     key: "imgPreviewView",
     value: function imgPreviewView(downloadUrl) {
-      var _this5 = this;
+      var _this6 = this;
 
-      var _this$state3 = this.state,
-          dataList = _this$state3.dataList,
-          selectedIndex = _this$state3.selectedIndex,
-          isZoomed = _this$state3.isZoomed,
-          canZoom = _this$state3.canZoom,
-          isPreviewAttachmentValid = _this$state3.isPreviewAttachmentValid;
+      var _this$state7 = this.state,
+          dataList = _this$state7.dataList,
+          selectedIndex = _this$state7.selectedIndex;
       var _this$props = this.props,
-          maintainZoom = _this$props.maintainZoom,
           dataId = _this$props.dataId,
           i18nKeys = _this$props.i18nKeys,
           renderUnSupportedElement = _this$props.renderUnSupportedElement;
@@ -444,25 +534,16 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         var viewUrl = data.viewUrl,
             name = data.name,
             children = data.children,
-            _data$dataId = data.dataId,
-            dataId = _data$dataId === void 0 ? 'attachViewer' : _data$dataId,
-            _data$customClass = data.customClass,
-            customClass = _data$customClass === void 0 ? {} : _data$customClass,
-            _data$customProps = data.customProps,
-            customProps = _data$customProps === void 0 ? {} : _data$customProps,
+            _data$dataId2 = data.dataId,
+            dataId = _data$dataId2 === void 0 ? 'attachViewer' : _data$dataId2,
+            _data$customProps2 = data.customProps,
+            customProps = _data$customProps2 === void 0 ? {} : _data$customProps2,
             previewurl = data.previewurl,
             type = data.type;
         var _customProps$audioPro = customProps.audioProps,
             audioProps = _customProps$audioPro === void 0 ? {} : _customProps$audioPro,
-            _customProps$imagePro = customProps.imageProps,
-            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro,
             _customProps$videoPro = customProps.videoProps,
             videoProps = _customProps$videoPro === void 0 ? {} : _customProps$videoPro;
-        var _customClass$customIm = customClass.customImageClass,
-            customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
-            _customClass$customCh = customClass.customChildrenClass,
-            customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
-        var retainZoom = canZoom && selectedIndex == i && maintainZoom;
         var extension = (0, _Attachment.getExtensionFromFileName)(name);
         var _i18nKeys$previewUnsu = i18nKeys.previewUnsupportedText,
             previewUnsupportedText = _i18nKeys$previewUnsu === void 0 ? "Preview not available for the selected file type." : _i18nKeys$previewUnsu,
@@ -478,7 +559,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _AttachmentViewerModule["default"].imgRef,
           id: "imgPreviewRef".concat(i)
-        }, selectedIndex == i && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this5.isAudioFileType(name) ? /*#__PURE__*/_react["default"].createElement("audio", _extends({
+        }, selectedIndex == i && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this6.isAudioFileType(name) ? /*#__PURE__*/_react["default"].createElement("audio", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_audioPreview"),
@@ -486,7 +567,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: previewurl || viewUrl,
           type: "audio/".concat(extension)
-        })) : _this5.isVideoFileType(name) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
+        })) : _this6.isVideoFileType(name) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_videoPreview"),
@@ -494,31 +575,19 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, videoProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: viewUrl,
           type: "video/".concat(extension)
-        })) : _this5.isImageFileType(name) || children ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
-          customClass: {
-            customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, " ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
-            customChildrenClass: customChildrenClass
-          },
-          src: viewUrl,
-          onClick: isPreviewAttachmentValid ? isZoomed ? _this5.zoomOut.bind(_this5, i) : function (e) {
-            return _this5.zoomIn(e, i, true);
-          } : undefined,
-          alt: name,
-          dataId: dataId,
-          id: "img".concat(i),
-          isCover: false
-        }, imageProps), children) : type === "document" && previewurl != null ? _this5.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/_react["default"].createElement("div", {
+        })) : _this6.isImageFileType(name) || children ? _this6.renderImageFrame() : type === "document" && previewurl != null ? _this6.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/_react["default"].createElement("div", {
           className: _AttachmentViewerModule["default"].previewNone
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: _AttachmentViewerModule["default"].fileTypeImg
-        }, _this5.getPreviewIconData(name, '70')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        }, _this6.getPreviewIconData(name, '70')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
           $ui_size: "20",
           $ui_weight: "semibold"
         }, previewUnsupportedText), downloadUrl ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
           href: downloadUrl,
+          download: true,
+          downloadName: name,
           className: _AttachmentViewerModule["default"].downloadLink,
-          hasReload: true,
-          download: true
+          hasReload: true
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           palette: "primaryFilled",
           text: downloadText
@@ -528,22 +597,24 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
-
-      var _this$state4 = this.state,
-          isPViewListOpen = _this$state4.isPViewListOpen,
-          selectedIndex = _this$state4.selectedIndex,
-          data = _this$state4.data,
-          isZoomed = _this$state4.isZoomed,
-          canZoom = _this$state4.canZoom,
-          canOpenInNewTab = _this$state4.canOpenInNewTab;
+      var _this7 = this;
+
+      var _this$state8 = this.state,
+          isPViewListOpen = _this$state8.isPViewListOpen,
+          selectedIndex = _this$state8.selectedIndex,
+          data = _this$state8.data,
+          isZoomed = _this$state8.isZoomed,
+          canZoom = _this$state8.canZoom,
+          canOpenInNewTab = _this$state8.canOpenInNewTab;
       var _this$props2 = this.props,
           responsiveId = _this$props2.responsiveId,
           needDownload = _this$props2.needDownload,
           i18nKeys = _this$props2.i18nKeys,
           isActive = _this$props2.isActive,
           dataId = _this$props2.dataId,
-          customProps = _this$props2.customProps;
+          customProps = _this$props2.customProps,
+          hasCount = _this$props2.hasCount,
+          renderCustomIcons = _this$props2.renderCustomIcons;
       var _customProps$avatarPr = customProps.avatarProps,
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
@@ -585,7 +656,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           "data-title": selectedAttachment.name,
           dataId: "attachName",
           id: ariaId
-        }, selectedAttachment.name), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, selectedAttachment.name), hasCount && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           className: _AttachmentViewerModule["default"].count,
           dataId: "attachCountContainer"
@@ -597,9 +668,13 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           align: uptoTablet ? 'bottom' : 'center',
           wrap: "wrap",
           isCover: false
-        }, canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
+        }, (0, _utils.renderNode)(renderCustomIcons, {
+          selectedAttachment: selectedAttachment,
+          selectedIndex: selectedIndex,
+          totalLen: totalLen
+        }), canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this6.zoomOut.bind(_this6, selectedIndex),
+          onClick: _this7.zoomOut.bind(_this7, selectedIndex),
           "data-id": "zoomOut",
           "data-test-id": "zoomOut",
           "data-title": i18nKeys.zoomOutText
@@ -614,7 +689,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         })) : /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
           onClick: function onClick(e) {
-            return _this6.zoomIn(e, selectedIndex);
+            return _this7.zoomIn(e, selectedIndex);
           },
           "data-id": "zoomIn",
           "data-test-id": "zoomIn",
@@ -647,6 +722,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu
         }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
           href: downloadUrl,
+          downloadName: selectedAttachment.name,
           target: "_parent",
           hasReload: true,
           download: true,
@@ -663,7 +739,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           }
         }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this6.closeAttachmentViewer,
+          onClick: _this7.closeAttachmentViewer,
           "data-id": "closeAttach",
           "data-test-id": "closeAttach",
           "data-title": i18nKeys.closeText
@@ -684,7 +760,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           alignBox: "row"
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_AttachmentViewerModule["default"].arrowBox, "  ").concat(uptoTablet ? _AttachmentViewerModule["default"].mbleArrowBox : _AttachmentViewerModule["default"].nrmlArrowBox, " ").concat(selectedIndex === 0 ? _AttachmentViewerModule["default"].hidden : ''),
-          onClick: _this6.changeSelectedIndex.bind(_this6, selectedIndex - 1),
+          onClick: _this7.changeSelectedIndex.bind(_this7, selectedIndex - 1),
           "data-title": i18nKeys.previousText,
           "data-title-position": "left"
         }, /*#__PURE__*/_react["default"].createElement("button", {
@@ -700,12 +776,12 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           tabindex: "0",
           "aria-describedby": ariaId,
           isShrink: false,
-          eleRef: _this6.setImgBoxRef,
+          eleRef: _this7.setImgBoxRef,
           scroll: "both",
           flexible: true
-        }, _this6.imgPreviewView(downloadUrl)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, _this7.imgPreviewView(downloadUrl)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_AttachmentViewerModule["default"].arrowBox, "  ").concat(uptoTablet ? _AttachmentViewerModule["default"].mbleArrowBox : _AttachmentViewerModule["default"].nrmlArrowBox, " ").concat(totalLen === selectedIndex + 1 ? _AttachmentViewerModule["default"].hidden : ''),
-          onClick: _this6.changeSelectedIndex.bind(_this6, selectedIndex + 1),
+          onClick: _this7.changeSelectedIndex.bind(_this7, selectedIndex + 1),
           "data-title": i18nKeys.nextText,
           "data-title-position": "right"
         }, /*#__PURE__*/_react["default"].createElement("button", {
@@ -745,7 +821,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           alignBox: "row",
           scroll: "horizontal",
           eleRef: function eleRef(el) {
-            return _this6.imgListCont = el;
+            return _this7.imgListCont = el;
           },
           className: _AttachmentViewerModule["default"].listContainer
         }, data.map(function (item, index) {
@@ -759,7 +835,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               _item$customProps = item.customProps,
               customProps = _item$customProps === void 0 ? {} : _item$customProps;
           var thumbnail = item.thumbnail;
-          var isImageFileType = _this6.isImageFileType(name) || thumbnail;
+          var isImageFileType = _this7.isImageFileType(name) || thumbnail;
           var _customClass$customIm2 = customClass.customImageClass,
               customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
               _customClass$customCh2 = customClass.customChildrenClass,
@@ -767,9 +843,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : '', " ").concat(isImageFileType ? '' : _AttachmentViewerModule["default"].previewIconDiv),
             key: index,
-            onClick: _this6.changeSelectedIndex.bind(_this6, index),
+            onClick: _this7.changeSelectedIndex.bind(_this7, index),
             eleRef: function eleRef(el) {
-              return _this6["img_".concat(index)] = el;
+              return _this7["img_".concat(index)] = el;
             },
             dataId: "attachPreviewList",
             "data-title": name
@@ -782,10 +858,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
             },
             dataId: dataId
-          }, customProps), children) : _this6.getPreviewIconData(name, '40'));
+          }, customProps), children) : _this7.getPreviewIconData(name, '40'));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
-          onClick: _this6.togglePViewList,
+          onClick: _this7.togglePViewList,
           iconName: "ZD-GN-hideTab",
           iconSize: "14",
           hoverType: "border",

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -1,8 +1,8 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
     background-color: var(--zdt_attachmentviewer_header_bg);
@@ -10,20 +10,13 @@
 }
 
 .title {
+    padding-inline-end: var(--zd_size15) ;
     max-width: 50% ;
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .title {
-    padding-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .title {
-    padding-left: var(--zd_size15) ;
-}
-
 .count {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
@@ -80,7 +73,7 @@
 
 .preview {
     margin-block: var(--zd_size20) ;
-    margin-inline:0 ;
+    margin-inline: 0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
 }
@@ -136,7 +129,7 @@
 }
 
 .listContainer {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -324,7 +317,7 @@
 }
 
 .authorName {
-    margin-block:0 ;
+    margin-block: 0 ;
     margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
@@ -364,4 +357,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}