@zohodesk/dot 1.0.0-temp-228.2 → 1.0.0-temp-230

package/lib/Attachment/Attachment.module.css

@@ -86,21 +86,19 @@
   width: var(--zd_size40) ;
 }
 
-[dir=ltr] .medium .attachright {
-  padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10) ;
-}
-
-[dir=rtl] .medium .attachright {
-  padding: var(--zd_size5) var(--zd_size10) var(--zd_size5) var(--zd_size25) ;
+.medium .attachright {
+  padding-block: var(--zd_size5) ;
+  padding-inline: var(--zd_size10) var(--zd_size25) ;
 }
 
 .small .attachright {
-  padding: 0 var(--zd_size10) 0 var(--zd_size10) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size10) ;
 }
 
 .footer {
   font-size: 0 ;
-  margin-top: var(--zd_size3) ;
+  margin-block-start: var(--zd_size3) ;
 }
 
 .medium .atatchName {
@@ -183,7 +181,8 @@
   height: 2px;
   /*  Variable:Ignore  */
   width: 2px;
+  margin-inline: var(--zd_size6) ;
+  margin-block:0 ;
   background-color: var(--zdt_dot_text);
   border-radius: 50%;
-  margin: 0 var(--zd_size6) ;
-}
+}

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -63,6 +61,14 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -121,10 +127,50 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _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(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(AttachmentViewer, [{
+    key: "updateItem",
+    value: function updateItem(idOrIndex, changes) {
+      var _this2 = this;
+
+      if (!changes || _typeof(changes) !== 'object') {
+        return false;
+      }
+
+      var data = this.state.data;
+      var targetIdx = typeof idOrIndex === 'number' ? idOrIndex : data.findIndex(function (item) {
+        return item && item.id === idOrIndex;
+      });
+
+      if (targetIdx < 0 || targetIdx >= data.length) {
+        return false;
+      }
+
+      this.setState(function (prevState) {
+        var nextData = prevState.data.slice();
+        nextData[targetIdx] = _objectSpread(_objectSpread({}, nextData[targetIdx]), changes);
+        var nextDataList = prevState.dataList;
+
+        if (targetIdx < prevState.dataList.length) {
+          nextDataList = prevState.dataList.slice();
+          nextDataList[targetIdx] = _objectSpread(_objectSpread({}, nextDataList[targetIdx]), changes);
+        }
+
+        return {
+          data: nextData,
+          dataList: nextDataList
+        };
+      }, function () {
+        if (_this2.state.selectedIndex === targetIdx) {
+          _this2.handleMenuValidation();
+        }
+      });
+      return true;
+    }
+  }, {
     key: "isImageFileType",
     value: function isImageFileType(fileName) {
       var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
@@ -159,11 +205,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,14 +231,14 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }
       }
 
-      if (prevState.selectedIndex != selectedIndex) {
+      if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
         this.handleMenuValidation();
       }
     }
   }, {
     key: "handleMenuValidation",
     value: function handleMenuValidation() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$state = this.state,
           data = _this$state.data,
@@ -209,7 +258,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         var isViewURLValid = fileSourceValidation.isViewURLValid,
             canZoom = fileSourceValidation.canZoom;
 
-        _this2.setState({
+        _this3.setState({
           isPreviewAttachmentValid: isViewURLValid,
           canZoom: canZoom,
           canOpenInNewTab: isViewURLValid
@@ -219,14 +268,14 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "togglePViewList",
     value: function togglePViewList() {
-      var _this3 = this;
+      var _this4 = this;
 
       this.setState(function (prevState) {
         return {
           isPViewListOpen: !prevState.isPViewListOpen
         };
       }, function () {
-        _this3.focusSelectedImg(_this3.state.selectedIndex);
+        _this4.focusSelectedImg(_this4.state.selectedIndex);
       });
     }
   }, {
@@ -320,7 +369,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "changeSelectedIndex",
     value: function changeSelectedIndex(index) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$state2 = this.state,
           data = _this$state2.data,
@@ -335,7 +384,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       this.setState({
         selectedIndex: index
       }, function () {
-        _this4.focusSelectedImg(index);
+        _this5.focusSelectedImg(index);
       });
     }
   }, {
@@ -399,7 +448,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "imgPreviewView",
     value: function imgPreviewView(downloadUrl) {
-      var _this5 = this;
+      var _this6 = this;
 
       var _this$state3 = this.state,
           dataList = _this$state3.dataList,
@@ -478,7 +527,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 +535,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 +543,32 @@ 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({
+        })) : _this6.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);
+          onClick: isPreviewAttachmentValid ? isZoomed ? _this6.zoomOut.bind(_this6, i) : function (e) {
+            return _this6.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", {
+        }, imageProps), children) : 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,7 +578,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       var _this$state4 = this.state,
           isPViewListOpen = _this$state4.isPViewListOpen,
@@ -543,7 +593,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props2.i18nKeys,
           isActive = _this$props2.isActive,
           dataId = _this$props2.dataId,
-          customProps = _this$props2.customProps;
+          customProps = _this$props2.customProps,
+          showCount = _this$props2.showCount,
+          renderCustomIcons = _this$props2.renderCustomIcons;
       var _customProps$avatarPr = customProps.avatarProps,
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
@@ -585,7 +637,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 +649,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 +670,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 +703,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 +720,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 +741,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 +757,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 +802,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 +816,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 +824,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 +839,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,10 +1,11 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
+    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);
-    padding: 0 var(--zd_size15) ;
     border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
 }
 
@@ -22,9 +23,10 @@
 }
 
 .count {
+    padding-block:0 ;
+    padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
-    padding: 0 var(--zd_size10) ;
 }
 
 .title,
@@ -33,29 +35,21 @@
     font-size: var(--zd_font_size15) ;
 }
 
-[dir=ltr] .menuBar {
-    padding-left: var(--zd_size5) ;
-}
-
-[dir=rtl] .menuBar {
-    padding-right: var(--zd_size5) ;
+.menuBar {
+    padding-inline-start: var(--zd_size5) ;
 }
 
 .mbleMenuBar {
+    margin-block-start: var(--zd_size8) ;
     align-self: baseline;
-    margin-top: var(--zd_size8) ;
 }
 
-[dir=ltr] .menu+.menu {
-    margin-left: var(--zd_size22) ;
-}
-
-[dir=rtl] .menu+.menu {
-    margin-right: var(--zd_size22) ;
+.menu+.menu {
+    margin-inline-start: var(--zd_size22) ;
 }
 
 .mobileMenu+.mobileMenu {
-    margin-bottom: var(--zd_size22) ;
+    margin-block-end: var(--zd_size22) ;
 }
 
 .menuIcon {
@@ -85,9 +79,10 @@
 }
 
 .preview {
+    margin-block: var(--zd_size20) ;
+    margin-inline:0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
-    margin: var(--zd_size20) 0 ;
 }
 
 .zoomIn {
@@ -128,15 +123,8 @@
     width: 100% ;
     overflow: hidden;
     transition: height var(--zd_transition3);
-    background-color: var(--zdt_attachmentviewer_footer_bg)
-}
-
-[dir=ltr] .footer {
-    padding-right: var(--zd_size68) 
-}
-
-[dir=rtl] .footer {
-    padding-left: var(--zd_size68) 
+    padding-inline-end: var(--zd_size68) ;
+    background-color: var(--zdt_attachmentviewer_footer_bg);
 }
 
 .footerHeight {
@@ -148,7 +136,8 @@
 }
 
 .listContainer {
-    padding: 0 var(--zd_size18) ;
+    padding-block:0 ;
+    padding-inline: var(--zd_size18) ;
 }
 
 .imgItem {
@@ -168,12 +157,8 @@
     border-color: var(--zdt_attachmentviewer_hover_border);
 }
 
-[dir=ltr] .imgItem+.imgItem {
-    margin-left: var(--zd_size12) ;
-}
-
-[dir=rtl] .imgItem+.imgItem {
-    margin-right: var(--zd_size12) ;
+.imgItem+.imgItem {
+    margin-inline-start: var(--zd_size12) ;
 }
 
 .image, .crsrPointer {
@@ -335,21 +320,15 @@
 
 .author {
     max-width: var(--zd_size200) ;
-}
-
-[dir=ltr] .author {
-    padding-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .author {
-    padding-right: var(--zd_size15) ;
+    padding-inline-start: var(--zd_size15) ;
 }
 
 .authorName {
+    margin-block:0 ;
+    margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
-    margin: 0 var(--zd_size10) ;
 }
 
 .btn {
@@ -361,7 +340,7 @@
 }
 
 .fileTypeImg {
-    margin-bottom: var(--zd_size30) ;
+    margin-block-end: var(--zd_size30) ;
 }
 
 .previewNone {
@@ -373,7 +352,7 @@
 
 .downloadLink {
     display: inline-block;
-    padding-top: var(--zd_size15) ;
+    padding-block-start: var(--zd_size15) ;
 }
 
 .previewIconDiv {
@@ -385,4 +364,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

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

@@ -56,6 +56,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/AudioPlayer/AudioPlayer.module.css

@@ -5,7 +5,8 @@
 }
 
 .dragtag {
-    margin: 0 var(--zd_size10) ;
+    margin-block:0 ;
+    margin-inline: var(--zd_size10) ;
 }
 
 .audioHid {
@@ -24,12 +25,8 @@
     font-size: var(--zd_font_size11) ;
 }
 
-[dir=ltr] .timerBox {
-    margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .timerBox {
-    margin-right: var(--zd_size6) ;
+.timerBox {
+    margin-inline-start: var(--zd_size6) ;
 }
 
 .rightBox,
@@ -143,4 +140,4 @@ input::-moz-focus-inner, input::-moz-focus-outer {
     border-radius: 4px;
 }
 
-/* End of audio range styles */
+/* End of audio range styles */

package/lib/DotProvider/DotProvider.js

@@ -13,7 +13,7 @@ var _propTypes = require("./props/propTypes");
 
 var _useDotProvider = _interopRequireDefault(require("./hooks/useDotProvider"));
 
-var _excluded = ["tag", "themeAppearance", "themeColor", "baseZoomUnit", "baseFontUnit", "zoomUnitVariable", "fontUnitVariable", "themeAppearanceAttr", "themeColorAttr", "providerRef", "onAssetsDownloadSuccess", "getAssetsPromises", "children"];
+var _excluded = ["tag", "themeAppearance", "themeColor", "baseZoomUnit", "baseFontUnit", "zoomUnitVariable", "fontUnitVariable", "excludeFeatures", "themeAppearanceAttr", "themeColorAttr", "providerRef", "onAssetsDownloadSuccess", "getAssetsPromises", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -38,6 +38,7 @@ var DotProvider = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       baseFontUnit = props.baseFontUnit,
       zoomUnitVariable = props.zoomUnitVariable,
       fontUnitVariable = props.fontUnitVariable,
+      excludeFeatures = props.excludeFeatures,
       themeAppearanceAttr = props.themeAppearanceAttr,
       themeColorAttr = props.themeColorAttr,
       providerRef = props.providerRef,
@@ -74,6 +75,7 @@ var DotProvider = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     baseFontUnit: baseFontUnit,
     zoomUnitVariable: zoomUnitVariable,
     fontUnitVariable: fontUnitVariable,
+    excludeFeatures: excludeFeatures,
     getProviderElement: getProviderElement,
     onAssetsDownloadSuccess: onAssetsDownloadSuccess,
     getAssetsPromises: getAssetsPromises