@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -35,11 +35,15 @@ 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 _cssUtility = require("@dot-system/css-utility");
 
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
@@ -119,8 +123,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 +136,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 +145,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 +154,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 +209,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if (prevState.selectedIndex != selectedIndex) {
+      if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+        this.notifySelectedAttachmentChange();
         this.handleMenuValidation();
       }
     }
@@ -191,16 +219,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 +350,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);
 
@@ -393,22 +421,86 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function renderIframe(previewurl) {
       return /*#__PURE__*/_react["default"].createElement("iframe", _extends({
         src: previewurl,
-        className: _AttachmentViewerModule["default"].previewFrame
+        className: (0, _cssUtility.cn)(_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 +536,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,47 +561,35 @@ 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,
+          className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].zoomIn),
           "data-id": "".concat(dataId, "_audioPreview"),
           "data-test-id": "".concat(dataId, "_audioPreview")
         }, 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,
+          className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].zoomIn),
           "data-id": "".concat(dataId, "_videoPreview"),
           "data-test-id": "".concat(dataId, "_videoPreview")
         }, 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", {
-          className: _AttachmentViewerModule["default"].previewNone
+        })) : _this6.isImageFileType(name) || children ? _this6.renderImageFrame() : type === "document" && previewurl != null ? _this6.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].previewNone)
         }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: _AttachmentViewerModule["default"].fileTypeImg
-        }, _this5.getPreviewIconData(name, '70')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].fileTypeImg)
+        }, _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 +599,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 +658,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 +670,13 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           align: uptoTablet ? 'bottom' : 'center',
           wrap: "wrap",
           isCover: false
-        }, canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this6.zoomOut.bind(_this6, selectedIndex),
+        }, (0, _utils.renderNode)(renderCustomIcons, {
+          selectedAttachment: selectedAttachment,
+          selectedIndex: selectedIndex,
+          totalLen: totalLen
+        }), canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
+          className: (0, _cssUtility.cn)(uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu),
+          onClick: _this7.zoomOut.bind(_this7, selectedIndex),
           "data-id": "zoomOut",
           "data-test-id": "zoomOut",
           "data-title": i18nKeys.zoomOutText
@@ -612,9 +689,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             ariaLabel: i18nKeys.zoomOutText
           }
         })) : /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
+          className: (0, _cssUtility.cn)(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",
@@ -628,7 +705,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             ariaLabel: i18nKeys.zoomInText
           }
         })) : null, canOpenInNewTab ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu
+          className: (0, _cssUtility.cn)(uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu)
         }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
           href: selectedImgUrl,
           target: "_blank",
@@ -644,9 +721,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             ariaLabel: i18nKeys.newTabText
           }
         }))) : null, needDownload ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu
+          className: (0, _cssUtility.cn)(uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu)
         }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
           href: downloadUrl,
+          downloadName: selectedAttachment.name,
           target: "_parent",
           hasReload: true,
           download: true,
@@ -662,8 +740,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             ariaLabel: i18nKeys.downloadText
           }
         }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
-          className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this6.closeAttachmentViewer,
+          className: (0, _cssUtility.cn)(uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu),
+          onClick: _this7.closeAttachmentViewer,
           "data-id": "closeAttach",
           "data-test-id": "closeAttach",
           "data-title": i18nKeys.closeText
@@ -684,11 +762,11 @@ 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", {
-          className: _AttachmentViewerModule["default"].btn,
+          className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].btn),
           "aria-label": i18nKeys.previousText
         }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
           name: "ZD-arrowLeft3",
@@ -700,16 +778,16 @@ 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", {
-          className: _AttachmentViewerModule["default"].btn,
+          className: (0, _cssUtility.cn)(_AttachmentViewerModule["default"].btn),
           "aria-label": i18nKeys.nextText
         }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
           name: "ZD-arrowRight3",
@@ -745,7 +823,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 +837,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 +845,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 +860,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 ;
-}
+}