@zohodesk/dot 1.0.0-temp-230.3 → 1.0.0-temp-232

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
-var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+var _icons = require("@zohodesk/icons");
 
 var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
 
@@ -120,37 +120,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _this.zoomMaintain = _this.zoomMaintain.bind(_assertThisInitialized(_this));
     _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
     _this.getPreviewIconData = _this.getPreviewIconData.bind(_assertThisInitialized(_this));
-    _this.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this)); // this.updateItem = this.updateItem.bind(this);
-
+    _this.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this));
     return _this;
-  } // updateItem(idOrIndex, changes) {
-  //   if (!changes || typeof changes !== 'object') {
-  //     return false;
-  //   }
-  //   const { data } = this.state;
-  //   const targetIdx = typeof idOrIndex === 'number'
-  //     ? idOrIndex
-  //     : data.findIndex((item) => item && item.id === idOrIndex);
-  //   if (targetIdx < 0 || targetIdx >= data.length) {
-  //     return false;
-  //   }
-  //   this.setState((prevState) => {
-  //     const nextData = prevState.data.slice();
-  //     nextData[targetIdx] = { ...nextData[targetIdx], ...changes };
-  //     let nextDataList = prevState.dataList;
-  //     if (targetIdx < prevState.dataList.length) {
-  //       nextDataList = prevState.dataList.slice();
-  //       nextDataList[targetIdx] = { ...nextDataList[targetIdx], ...changes };
-  //     }
-  //     return { data: nextData, dataList: nextDataList };
-  //   }, () => {
-  //     if (this.state.selectedIndex === targetIdx) {
-  //       this.handleMenuValidation();
-  //     }
-  //   });
-  //   return true;
-  // }
-
+  }
 
   _createClass(AttachmentViewer, [{
     key: "isImageFileType",
@@ -190,15 +162,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var previewObj = this.props.previewObj;
       var selectedIndex = this.state.selectedIndex;
       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 || attachmentPreviewUrlChanged) {
+      if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
         var objChanged = previewObj.previewData.some(function (value, index) {
-          return (0, _General.shallowDiff)(value, prevProps.previewObj.previewData[index]);
+          return (0, _General.shallowDiff)(value, prevProps.previewObj[index]);
         });
 
         if (objChanged || indexChanged) {
@@ -215,7 +182,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+      if (prevState.selectedIndex != selectedIndex) {
         this.handleMenuValidation();
       }
     }
@@ -414,7 +381,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       } : fileUnknown;
       var iconName = fileDetails.iconName,
           iconSize = fileDetails.iconSize;
-      return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: _AttachmentViewerModule["default"].prevFooterIcon,
         name: iconName,
         size: iconSize,
@@ -430,95 +397,21 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       }, this.props.customProps.iframeProps));
     }
   }, {
-    key: "getRenderImageFrameCustomClass",
-    value: function getRenderImageFrameCustomClass(_ref3) {
-      var canZoom = _ref3.canZoom,
-          retainZoom = _ref3.retainZoom,
-          isZoomed = _ref3.isZoomed,
-          customImageClass = _ref3.customImageClass,
-          customChildrenClass = _ref3.customChildrenClass;
-      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(data, i) {
+    key: "imgPreviewView",
+    value: function imgPreviewView(downloadUrl) {
       var _this5 = 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$props = this.props,
           maintainZoom = _this$props.maintainZoom,
-          renderCustomImagePreviewElement = _this$props.renderCustomImagePreviewElement;
-      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,
-          imageRef = data.imageRef;
-      var _customProps$imagePro = customProps.imageProps,
-          imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro;
-      var _customClass$customIm = customClass.customImageClass,
-          customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
-          _customClass$customCh = customClass.customChildrenClass,
-          customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
-      var resolvedImageRef = imageRef;
-      var retainZoom = canZoom && selectedIndex == i && maintainZoom;
-      var handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, i) : undefined;
-      var handleZoomIn = isPreviewAttachmentValid && !isZoomed ? function (e) {
-        return _this5.zoomIn(e, i, true);
-      } : undefined;
-      var handleImageClick = isPreviewAttachmentValid ? isZoomed ? handleZoomOut : handleZoomIn : undefined;
-      var imageFrameCustomClass = this.getRenderImageFrameCustomClass({
-        canZoom: canZoom,
-        retainZoom: retainZoom,
-        isZoomed: isZoomed,
-        customImageClass: customImageClass,
-        customChildrenClass: customChildrenClass
-      });
-
-      var img = /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({}, imageProps, {
-        customClass: imageFrameCustomClass,
-        src: viewUrl,
-        onClick: handleImageClick,
-        alt: name,
-        dataId: dataId,
-        id: "img".concat(i),
-        isCover: false,
-        imageRef: resolvedImageRef
-      }), children);
-
-      return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
-        defaultView: img,
-        data: data,
-        index: i
-      }) : img;
-    }
-  }, {
-    key: "imgPreviewView",
-    value: function imgPreviewView(downloadUrl) {
-      var _this6 = this;
-
-      var _this$state4 = this.state,
-          dataList = _this$state4.dataList,
-          selectedIndex = _this$state4.selectedIndex,
-          isZoomed = _this$state4.isZoomed,
-          canZoom = _this$state4.canZoom,
-          isPreviewAttachmentValid = _this$state4.isPreviewAttachmentValid;
-      var _this$props2 = this.props,
-          maintainZoom = _this$props2.maintainZoom,
-          dataId = _this$props2.dataId,
-          i18nKeys = _this$props2.i18nKeys,
-          renderUnSupportedElement = _this$props2.renderUnSupportedElement;
+          dataId = _this$props.dataId,
+          i18nKeys = _this$props.i18nKeys,
+          renderUnSupportedElement = _this$props.renderUnSupportedElement;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -551,24 +444,24 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         var viewUrl = data.viewUrl,
             name = data.name,
             children = data.children,
-            _data$dataId2 = data.dataId,
-            dataId = _data$dataId2 === void 0 ? 'attachViewer' : _data$dataId2,
-            _data$customClass2 = data.customClass,
-            customClass = _data$customClass2 === void 0 ? {} : _data$customClass2,
-            _data$customProps2 = data.customProps,
-            customProps = _data$customProps2 === void 0 ? {} : _data$customProps2,
+            _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,
             previewurl = data.previewurl,
             type = data.type;
         var _customProps$audioPro = customProps.audioProps,
             audioProps = _customProps$audioPro === void 0 ? {} : _customProps$audioPro,
-            _customProps$imagePro2 = customProps.imageProps,
-            imageProps = _customProps$imagePro2 === void 0 ? {} : _customProps$imagePro2,
+            _customProps$imagePro = customProps.imageProps,
+            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro,
             _customProps$videoPro = customProps.videoProps,
             videoProps = _customProps$videoPro === void 0 ? {} : _customProps$videoPro;
-        var _customClass$customIm2 = customClass.customImageClass,
-            customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
-            _customClass$customCh2 = customClass.customChildrenClass,
-            customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
+        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,
@@ -585,7 +478,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, _this6.isAudioFileType(name) ? /*#__PURE__*/_react["default"].createElement("audio", _extends({
+        }, selectedIndex == i && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this5.isAudioFileType(name) ? /*#__PURE__*/_react["default"].createElement("audio", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_audioPreview"),
@@ -593,7 +486,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: previewurl || viewUrl,
           type: "audio/".concat(extension)
-        })) : _this6.isVideoFileType(name) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
+        })) : _this5.isVideoFileType(name) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_videoPreview"),
@@ -601,19 +494,31 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, videoProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: viewUrl,
           type: "video/".concat(extension)
-        })) : _this6.isImageFileType(name) || children ? _this6.renderImageFrame(data, i) : type === "document" && previewurl != null ? _this6.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/_react["default"].createElement("div", {
+        })) : _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
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: _AttachmentViewerModule["default"].fileTypeImg
-        }, _this6.getPreviewIconData(name, '70')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        }, _this5.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
+          hasReload: true,
+          download: true
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           palette: "primaryFilled",
           text: downloadText
@@ -623,24 +528,22 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
-
-      var _this$state5 = this.state,
-          isPViewListOpen = _this$state5.isPViewListOpen,
-          selectedIndex = _this$state5.selectedIndex,
-          data = _this$state5.data,
-          isZoomed = _this$state5.isZoomed,
-          canZoom = _this$state5.canZoom,
-          canOpenInNewTab = _this$state5.canOpenInNewTab;
-      var _this$props3 = this.props,
-          responsiveId = _this$props3.responsiveId,
-          needDownload = _this$props3.needDownload,
-          i18nKeys = _this$props3.i18nKeys,
-          isActive = _this$props3.isActive,
-          dataId = _this$props3.dataId,
-          customProps = _this$props3.customProps,
-          showCount = _this$props3.showCount,
-          renderCustomIcons = _this$props3.renderCustomIcons;
+      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 _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;
       var _customProps$avatarPr = customProps.avatarProps,
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
@@ -650,8 +553,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var authorHref;
       var authorName;
 
-      var _ref4 = data[selectedIndex] ? data[selectedIndex] : {},
-          author = _ref4.author;
+      var _ref3 = data[selectedIndex] ? data[selectedIndex] : {},
+          author = _ref3.author;
 
       if (author) {
         authorHref = author.href;
@@ -666,8 +569,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         responsiveId: responsiveId,
         query: this.responsiveFunc
-      }, function (_ref5) {
-        var uptoTablet = _ref5.uptoTablet;
+      }, function (_ref4) {
+        var uptoTablet = _ref4.uptoTablet;
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           scroll: "none",
           "data-scroll-palette": "dark"
@@ -682,7 +585,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           "data-title": selectedAttachment.name,
           dataId: "attachName",
           id: ariaId
-        }, selectedAttachment.name), showCount && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, selectedAttachment.name), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           className: _AttachmentViewerModule["default"].count,
           dataId: "attachCountContainer"
@@ -694,13 +597,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           align: uptoTablet ? 'bottom' : 'center',
           wrap: "wrap",
           isCover: false
-        }, typeof renderCustomIcons === 'function' && renderCustomIcons({
-          selectedAttachment: selectedAttachment,
-          selectedIndex: selectedIndex,
-          totalLen: totalLen
-        }), canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
+        }, canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this7.zoomOut.bind(_this7, selectedIndex),
+          onClick: _this6.zoomOut.bind(_this6, selectedIndex),
           "data-id": "zoomOut",
           "data-test-id": "zoomOut",
           "data-title": i18nKeys.zoomOutText
@@ -715,7 +614,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         })) : /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
           onClick: function onClick(e) {
-            return _this7.zoomIn(e, selectedIndex);
+            return _this6.zoomIn(e, selectedIndex);
           },
           "data-id": "zoomIn",
           "data-test-id": "zoomIn",
@@ -748,7 +647,6 @@ 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,
@@ -765,7 +663,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           }
         }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this7.closeAttachmentViewer,
+          onClick: _this6.closeAttachmentViewer,
           "data-id": "closeAttach",
           "data-test-id": "closeAttach",
           "data-title": i18nKeys.closeText
@@ -786,13 +684,13 @@ 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: _this7.changeSelectedIndex.bind(_this7, selectedIndex - 1),
+          onClick: _this6.changeSelectedIndex.bind(_this6, selectedIndex - 1),
           "data-title": i18nKeys.previousText,
           "data-title-position": "left"
         }, /*#__PURE__*/_react["default"].createElement("button", {
           className: _AttachmentViewerModule["default"].btn,
           "aria-label": i18nKeys.previousText
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
           name: "ZD-arrowLeft3",
           iconClass: _AttachmentViewerModule["default"].arrow,
           dataId: "leftAttachNav",
@@ -802,18 +700,18 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           tabindex: "0",
           "aria-describedby": ariaId,
           isShrink: false,
-          eleRef: _this7.setImgBoxRef,
+          eleRef: _this6.setImgBoxRef,
           scroll: "both",
           flexible: true
-        }, _this7.imgPreviewView(downloadUrl)), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, _this6.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: _this7.changeSelectedIndex.bind(_this7, selectedIndex + 1),
+          onClick: _this6.changeSelectedIndex.bind(_this6, selectedIndex + 1),
           "data-title": i18nKeys.nextText,
           "data-title-position": "right"
         }, /*#__PURE__*/_react["default"].createElement("button", {
           className: _AttachmentViewerModule["default"].btn,
           "aria-label": i18nKeys.nextText
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
           name: "ZD-arrowRight3",
           iconClass: _AttachmentViewerModule["default"].arrow,
           dataId: "rightAttachNav",
@@ -847,7 +745,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           alignBox: "row",
           scroll: "horizontal",
           eleRef: function eleRef(el) {
-            return _this7.imgListCont = el;
+            return _this6.imgListCont = el;
           },
           className: _AttachmentViewerModule["default"].listContainer
         }, data.map(function (item, index) {
@@ -861,17 +759,17 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               _item$customProps = item.customProps,
               customProps = _item$customProps === void 0 ? {} : _item$customProps;
           var thumbnail = item.thumbnail;
-          var isImageFileType = _this7.isImageFileType(name) || thumbnail;
-          var _customClass$customIm3 = customClass.customImageClass,
-              customImageClass = _customClass$customIm3 === void 0 ? '' : _customClass$customIm3,
-              _customClass$customCh3 = customClass.customChildrenClass,
-              customChildrenClass = _customClass$customCh3 === void 0 ? '' : _customClass$customCh3;
+          var isImageFileType = _this6.isImageFileType(name) || thumbnail;
+          var _customClass$customIm2 = customClass.customImageClass,
+              customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
+              _customClass$customCh2 = customClass.customChildrenClass,
+              customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
           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: _this7.changeSelectedIndex.bind(_this7, index),
+            onClick: _this6.changeSelectedIndex.bind(_this6, index),
             eleRef: function eleRef(el) {
-              return _this7["img_".concat(index)] = el;
+              return _this6["img_".concat(index)] = el;
             },
             dataId: "attachPreviewList",
             "data-title": name
@@ -884,10 +782,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
             },
             dataId: dataId
-          }, customProps), children) : _this7.getPreviewIconData(name, '40'));
+          }, customProps), children) : _this6.getPreviewIconData(name, '40'));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
-          onClick: _this7.togglePViewList,
+          onClick: _this6.togglePViewList,
           iconName: "ZD-GN-hideTab",
           iconSize: "14",
           hoverType: "border",

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -1,8 +1,8 @@
 .header {
-    height: var(--zd_size48) ;
+    height: var(--zd_size40) ;
     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,13 +10,20 @@
 }
 
 .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';
@@ -73,7 +80,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;
 }
@@ -129,7 +136,7 @@
 }
 
 .listContainer {
-    padding-block: 0 ;
+    padding-block:0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -317,7 +324,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);
@@ -357,4 +364,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

package/lib/AttachmentViewer/props/defaultProps.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AttachmentViewer_defaultProps = exports.AttachmentImage_defaultProps = void 0;
-
-var _General = require("../../utils/General");
-
 var AttachmentImage_defaultProps = {
   dataId: 'AttachmentImage',
   customClass: {
@@ -21,8 +18,7 @@ var AttachmentViewer_defaultProps = {
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
-  i18nKeys: _General.DUMMY_OBJECT,
-  customProps: _General.DUMMY_OBJECT,
-  showCount: true
+  i18nKeys: {},
+  customProps: {}
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/AttachmentViewer/props/propTypes.js

@@ -13,9 +13,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var AttachmentImage_propTypes = {
   alt: _propTypes["default"].string,
-  imageRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
-    current: _propTypes["default"].any
-  })]),
   customClass: _propTypes["default"].shape({
     customImageClass: _propTypes["default"].string,
     customChildrenClass: _propTypes["default"].string
@@ -44,7 +41,7 @@ var AttachmentViewer_propTypes = {
     showText: _propTypes["default"].string,
     previewUnsupportedText: _propTypes["default"].string
   }),
-  needDownload: _propTypes["default"].bool,
+  needDownload: _propTypes["default"].string,
   previewObj: _propTypes["default"].object,
   responsiveId: _propTypes["default"].string,
   maintainZoom: _propTypes["default"].bool,
@@ -57,11 +54,8 @@ var AttachmentViewer_propTypes = {
     document: _propTypes["default"].arrayOf(_propTypes["default"].string)
   }),
   renderUnSupportedElement: _propTypes["default"].func,
-  renderCustomImagePreviewElement: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     avatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
-  }),
-  showCount: _propTypes["default"].bool,
-  renderCustomIcons: _propTypes["default"].func
+  })
 };
 exports.AttachmentViewer_propTypes = AttachmentViewer_propTypes;

package/lib/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -106,7 +106,10 @@ function useDownloadAssetsAndSetAttr(_ref) {
   }
 
   function setZoomSizeAttribute() {
-    if (!needZoom) {
+    var zoomLower = String(baseZoomUnit).toLowerCase();
+    var varLower = String(zoomUnitVariable).toLowerCase();
+
+    if (!needZoom || zoomLower === 'none' || zoomLower === 'unset' || varLower === 'none' || varLower === 'unset') {
       return;
     }
 
@@ -122,7 +125,10 @@ function useDownloadAssetsAndSetAttr(_ref) {
   }
 
   function setFontSizeAttribute() {
-    if (!needFont) {
+    var fontLower = String(baseFontUnit).toLowerCase();
+    var varLower = String(fontUnitVariable).toLowerCase();
+
+    if (!needFont || fontLower === 'none' || fontLower === 'unset' || varLower === 'none' || varLower === 'unset') {
       return;
     }
 
@@ -142,7 +148,7 @@ function useDownloadAssetsAndSetAttr(_ref) {
   }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement, needTheme]);
   (0, _react.useLayoutEffect)(function () {
     setZoomSizeAttribute();
-  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom]);
+  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom, baseZoomUnit]);
   (0, _react.useLayoutEffect)(function () {
     setFontSizeAttribute();
   }, [fontUnitVariable, baseFontUnit, fontSizePromise, getProviderElement, needFont]);

package/lib/Link/Link.js

@@ -110,8 +110,7 @@ var Link = /*#__PURE__*/function (_React$Component) {
           rel = _this$props2.rel,
           dataId = _this$props2.dataId,
           customProps = _this$props2.customProps,
-          ariaLabel = _this$props2.ariaLabel,
-          downloadName = _this$props2.downloadName;
+          ariaLabel = _this$props2.ariaLabel;
       var _this$context$options = this.context.options,
           isLink = _this$context$options.isLink,
           constructURL = _this$context$options.constructURL;
@@ -119,10 +118,10 @@ var Link = /*#__PURE__*/function (_React$Component) {
       var option = {};
 
       if (download) {
-        option.download = downloadName || true;
+        option.download = true;
       }
 
-      var ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'downloadName', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+      var ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
       var others = Object.keys(this.props).filter(function (key) {
         return ignoreKeys.indexOf(key) == -1;
       }).reduce(function (res, key) {