@zohodesk/dot 1.0.0-temp-229.2 → 1.0.0-temp-230.2

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -120,9 +120,37 @@ 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.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this)); // this.updateItem = this.updateItem.bind(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",
@@ -159,11 +187,14 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _previewObj$previewDa, _prevState$data$;
+
       var previewObj = this.props.previewObj;
       var selectedIndex = this.state.selectedIndex;
       var indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+      var attachmentPreviewUrlChanged = ((_previewObj$previewDa = previewObj.previewData[0]) === null || _previewObj$previewDa === void 0 ? void 0 : _previewObj$previewDa.viewUrl) !== ((_prevState$data$ = prevState.data[0]) === null || _prevState$data$ === void 0 ? void 0 : _prevState$data$.viewUrl); // Triggers an update if the 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]);
         });
@@ -182,7 +213,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if (prevState.selectedIndex != selectedIndex) {
+      if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
         this.handleMenuValidation();
       }
     }
@@ -397,21 +428,96 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       }, this.props.customProps.iframeProps));
     }
   }, {
-    key: "imgPreviewView",
-    value: function imgPreviewView(downloadUrl) {
+    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) {
       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,
-          dataId = _this$props.dataId,
-          i18nKeys = _this$props.i18nKeys,
-          renderUnSupportedElement = _this$props.renderUnSupportedElement;
+          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({
+        customClass: imageFrameCustomClass,
+        src: viewUrl,
+        onClick: handleImageClick,
+        alt: name,
+        dataId: dataId,
+        id: "img".concat(i),
+        isCover: false
+      }, imageProps, {
+        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;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -444,24 +550,24 @@ 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$customClass2 = data.customClass,
+            customClass = _data$customClass2 === void 0 ? {} : _data$customClass2,
+            _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$imagePro2 = customProps.imageProps,
+            imageProps = _customProps$imagePro2 === void 0 ? {} : _customProps$imagePro2,
             _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 _customClass$customIm2 = customClass.customImageClass,
+            customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
+            _customClass$customCh2 = customClass.customChildrenClass,
+            customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
         var retainZoom = canZoom && selectedIndex == i && maintainZoom;
         var extension = (0, _Attachment.getExtensionFromFileName)(name);
         var _i18nKeys$previewUnsu = i18nKeys.previewUnsupportedText,
@@ -478,7 +584,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 +592,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 +600,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(data, i) : 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 +622,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 _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 _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 _customProps$avatarPr = customProps.avatarProps,
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
@@ -553,8 +649,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var authorHref;
       var authorName;
 
-      var _ref3 = data[selectedIndex] ? data[selectedIndex] : {},
-          author = _ref3.author;
+      var _ref4 = data[selectedIndex] ? data[selectedIndex] : {},
+          author = _ref4.author;
 
       if (author) {
         authorHref = author.href;
@@ -569,8 +665,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         responsiveId: responsiveId,
         query: this.responsiveFunc
-      }, function (_ref4) {
-        var uptoTablet = _ref4.uptoTablet;
+      }, function (_ref5) {
+        var uptoTablet = _ref5.uptoTablet;
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           scroll: "none",
           "data-scroll-palette": "dark"
@@ -585,7 +681,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           "data-title": selectedAttachment.name,
           dataId: "attachName",
           id: ariaId
-        }, selectedAttachment.name), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, selectedAttachment.name), showCount && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           className: _AttachmentViewerModule["default"].count,
           dataId: "attachCountContainer"
@@ -597,9 +693,13 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           align: uptoTablet ? 'bottom' : 'center',
           wrap: "wrap",
           isCover: false
-        }, canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
+        }, typeof renderCustomIcons === 'function' && 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 +714,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 +747,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 +764,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 +785,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 +801,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 +846,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,17 +860,17 @@ 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 _customClass$customIm2 = customClass.customImageClass,
-              customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
-              _customClass$customCh2 = customClass.customChildrenClass,
-              customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
+          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;
           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 +883,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,5 +1,5 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
     padding-block:0 ;

package/lib/AttachmentViewer/props/defaultProps.js

@@ -19,6 +19,7 @@ var AttachmentViewer_defaultProps = {
   isActive: false,
   dataId: 'AttachmentViewer',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  showCount: true
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/AttachmentViewer/props/propTypes.js

@@ -13,6 +13,9 @@ 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
@@ -29,6 +32,9 @@ var AttachmentImage_propTypes = {
 exports.AttachmentImage_propTypes = AttachmentImage_propTypes;
 var AttachmentViewer_propTypes = {
   hideAttachmentViewer: _propTypes["default"].func,
+  imageRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
+    current: _propTypes["default"].any
+  })]),
   i18nKeys: _propTypes["default"].shape({
     nextText: _propTypes["default"].string,
     previousText: _propTypes["default"].string,
@@ -56,6 +62,8 @@ var AttachmentViewer_propTypes = {
   renderUnSupportedElement: _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/Link/Link.js

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

package/lib/Link/props/propTypes.js

@@ -23,6 +23,7 @@ var propTypes = {
   customProps: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   download: _propTypes["default"].bool,
+  downloadName: _propTypes["default"].string,
   ariaLabel: _propTypes["default"].string,
   key: _propTypes["default"].string
 };

package/lib/common/dot_boxShadow.module.css

@@ -40,6 +40,4 @@
     --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-/* status dropdown */
-    --zd_bs_statusdropdown_wrapper_container: var(--zd_bs_contrast_outline, 3px 3px 26px 0 var(--zdt_texteditor_menu_after_box_shadow));
 }

package/lib/form/fields/SelectField/SelectField.js

@@ -145,8 +145,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           onFocus = _this$props3.onFocus,
           iconOnHover = _this$props3.iconOnHover,
           customProps = _this$props3.customProps,
-          renderLabelProps = _this$props3.renderLabelProps,
-          renderCustomDropBoxHeader = _this$props3.renderCustomDropBoxHeader;
+          renderLabelProps = _this$props3.renderLabelProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$SelectPr = customProps.SelectProps,
@@ -217,8 +216,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         iconOnHover: iconOnHover,
         title: title
       }, SelectProps, {
-        ariaLabelledby: uniqueId,
-        renderCustomDropBoxHeader: renderCustomDropBoxHeader
+        ariaLabelledby: uniqueId
       }), children ? children : null)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

package/lib/form/fields/SelectField/props/defaultProps.js

@@ -27,7 +27,6 @@ var defaultProps = _objectSpread({
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
-  renderCustomDropBoxHeader: null,
   dataSelectorId: 'selectField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 

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

@@ -62,7 +62,6 @@ var propTypes = _objectSpread({
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),
-  renderCustomDropBoxHeader: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   htmlId: _propTypes["default"].string
 }, _FieldCommonPropTypes.FieldCommonPropTypes);