@zohodesk/dot 1.0.0-temp-213 → 1.0.0-temp-214

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -21,8 +21,12 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/lib/Avatar/Av
 
 var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/lib/Typography/Typography"));
+
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
+
 var _AttachmentImage = _interopRequireDefault(require("./AttachmentImage"));
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
@@ -35,11 +39,9 @@ var _Attachment = require("./Attachment");
 
 var _General = require("../utils/General");
 
-var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
-
 var _utils = require("./utils");
 
-var _audio_thumbnail = _interopRequireDefault(require("../../images/audio_thumbnail.png"));
+var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -117,10 +119,39 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _this.getUpdateDataList = _this.getUpdateDataList.bind(_assertThisInitialized(_this));
     _this.zoomMaintain = _this.zoomMaintain.bind(_assertThisInitialized(_this));
     _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
+    _this.getPreviewIconData = _this.getPreviewIconData.bind(_assertThisInitialized(_this));
+    _this.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(AttachmentViewer, [{
+    key: "isImageFileType",
+    value: function isImageFileType(fileName) {
+      var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
+      if (!extension) return false;
+      return _utils.FILE_EXTENSIONS.image.map(function (ext) {
+        return ext.toLowerCase();
+      }).includes(extension);
+    }
+  }, {
+    key: "isVideoFileType",
+    value: function isVideoFileType(fileName) {
+      var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
+      if (!extension) return false;
+      return _utils.FILE_EXTENSIONS.video.map(function (ext) {
+        return ext.toLowerCase();
+      }).includes(extension);
+    }
+  }, {
+    key: "isAudioFileType",
+    value: function isAudioFileType(fileName) {
+      var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
+      if (!extension) return false;
+      return _utils.FILE_EXTENSIONS.audio.map(function (ext) {
+        return ext.toLowerCase();
+      }).includes(extension);
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.handleMenuValidation();
@@ -163,13 +194,17 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
           data = _this$state.data,
           selectedIndex = _this$state.selectedIndex;
+      var allowedPreviewExtensionsData = this.props.allowedPreviewExtensionsData;
       var selectedAttachment = data[selectedIndex] || {};
-      var selectedAttachmentViewUrl = selectedAttachment.viewUrl;
-      var selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+      var selectedAttachmentViewUrl = selectedAttachment.viewUrl; // const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+
       var selectedAttachmentName = selectedAttachment.name;
+      var selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
       (0, _utils.checkFileSourcesValidation)({
         fileName: selectedAttachmentName,
-        viewURL: selectedAttachmentViewUrl
+        viewURL: selectedAttachmentViewUrl,
+        previewUrl: selectedAttachmentPreviewUrl,
+        allowedPreviewExtensionsData: allowedPreviewExtensionsData
       }).then(function (fileSourceValidation) {
         var isViewURLValid = fileSourceValidation.isViewURLValid,
             canZoom = fileSourceValidation.canZoom;
@@ -332,9 +367,38 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }])
       };
     }
+  }, {
+    key: "getPreviewIconData",
+    value: function getPreviewIconData(name, size, dataId) {
+      var fileUnknown = {
+        iconName: 'ZD-GN-fileUnknown',
+        iconSize: '40'
+      };
+      var fileIconName = (0, _Attachment.getAttachmentIconDetails)(name);
+      var fileDetails = name ? {
+        iconName: fileIconName,
+        iconSize: size
+      } : fileUnknown;
+      var iconName = fileDetails.iconName,
+          iconSize = fileDetails.iconSize;
+      return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        iconClass: _AttachmentViewerModule["default"].prevFooterIcon,
+        name: iconName,
+        size: iconSize,
+        "data-id": dataId
+      });
+    }
+  }, {
+    key: "renderIframe",
+    value: function renderIframe(previewurl) {
+      return /*#__PURE__*/_react["default"].createElement("iframe", _extends({
+        src: previewurl,
+        className: _AttachmentViewerModule["default"].previewFrame
+      }, this.props.customProps.iframeProps));
+    }
   }, {
     key: "imgPreviewView",
-    value: function imgPreviewView() {
+    value: function imgPreviewView(downloadUrl) {
       var _this5 = this;
 
       var _this$state3 = this.state,
@@ -345,7 +409,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           isPreviewAttachmentValid = _this$state3.isPreviewAttachmentValid;
       var _this$props = this.props,
           maintainZoom = _this$props.maintainZoom,
-          dataId = _this$props.dataId;
+          dataId = _this$props.dataId,
+          i18nKeys = _this$props.i18nKeys,
+          renderUnSupportedElement = _this$props.renderUnSupportedElement;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -383,16 +449,25 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             _data$customClass = data.customClass,
             customClass = _data$customClass === void 0 ? {} : _data$customClass,
             _data$customProps = data.customProps,
-            customProps = _data$customProps === void 0 ? {} : _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$imagePro = customProps.imageProps,
-            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro;
+            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro,
+            _customProps$videoPro = customProps.videoProps,
+            videoProps = _customProps$videoPro === void 0 ? {} : _customProps$videoPro;
         var _customClass$customIm = customClass.customImageClass,
             customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
             _customClass$customCh = customClass.customChildrenClass,
             customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
         var retainZoom = canZoom && selectedIndex == i && maintainZoom;
+        var extension = (0, _Attachment.getExtensionFromFileName)(name);
+        var _i18nKeys$previewUnsu = i18nKeys.previewUnsupportedText,
+            previewUnsupportedText = _i18nKeys$previewUnsu === void 0 ? "Preview not available for the selected file type." : _i18nKeys$previewUnsu,
+            _i18nKeys$downloadTex = i18nKeys.downloadText,
+            downloadText = _i18nKeys$downloadTex === void 0 ? "Download" : _i18nKeys$downloadTex;
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           className: _AttachmentViewerModule["default"].imgBox,
           id: "imgBox".concat(i),
@@ -403,29 +478,51 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _AttachmentViewerModule["default"].imgRef,
           id: "imgPreviewRef".concat(i)
-        }, (0, _Attachment.isAudioFile)(name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", _extends({
-          autoPlay: true,
+        }, 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"),
+          "data-test-id": "".concat(dataId, "_audioPreview")
+        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+          src: previewurl || viewUrl,
+          type: "audio/".concat(extension)
+        })) : _this5.isVideoFileType(name) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_videoPreview"),
           "data-test-id": "".concat(dataId, "_videoPreview")
-        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+        }, videoProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: viewUrl,
-          type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(name))
-        })) : null : /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          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, "\n                    ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
+            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) {
-            _this5.zoomIn(e, i, true);
+            return _this5.zoomIn(e, i, true);
           } : undefined,
           alt: name,
           dataId: dataId,
           id: "img".concat(i),
           isCover: false
-        }, imageProps), children)));
+        }, 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
+        }, _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,
+          className: _AttachmentViewerModule["default"].downloadLink,
+          hasReload: true,
+          download: true
+        }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          palette: "primaryFilled",
+          text: downloadText
+        })) : null))));
       });
     }
   }, {
@@ -451,7 +548,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
-      var selectedImgUrl = selectedAttachment.viewUrl;
+      var selectedImgUrl = selectedAttachment.previewurl || selectedAttachment.viewUrl;
       var downloadUrl = selectedAttachment.downloadUrl;
       var authorHref;
       var authorName;
@@ -606,7 +703,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           eleRef: _this6.setImgBoxRef,
           scroll: "both",
           flexible: true
-        }, _this6.imgPreviewView()), /*#__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: _this6.changeSelectedIndex.bind(_this6, selectedIndex + 1),
           "data-title": i18nKeys.nextText,
@@ -662,14 +759,13 @@ 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;
-          thumbnail = (0, _Attachment.isAudioFile)(name) ? thumbnail || _audio_thumbnail["default"] : thumbnail; //fallback thumbnail for audio
-
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : ''),
+            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : '', " ").concat(isImageFileType ? '' : _AttachmentViewerModule["default"].previewIconDiv),
             key: index,
             onClick: _this6.changeSelectedIndex.bind(_this6, index),
             eleRef: function eleRef(el) {
@@ -677,7 +773,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             },
             dataId: "attachPreviewList",
             "data-title": name
-          }, /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          }, isImageFileType || children ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
             src: thumbnail || viewUrl,
             size: "small",
             alt: name,
@@ -686,7 +782,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
             },
             dataId: dataId
-          }, customProps), children));
+          }, customProps), children) : _this6.getPreviewIconData(name, '40'));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
           onClick: _this6.togglePViewList,

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: 1.6;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -230,14 +230,10 @@
     transform: rotateX(0deg);
 }
 
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
-    background-size: 100% 100%;
-}
-
-.isAudio .image {
-    opacity: 0;
+.previewFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
 }
 
 .video {
@@ -362,4 +358,31 @@
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin-bottom: var(--zd_size30) ;
+}
+
+.previewNone {
+    color: var(--zdt_attachmentviewer_title_text);
+    max-width: 70% ;
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    display: inline-block;
+    padding-top: var(--zd_size15) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon {
+    color: var(--zdt_attachmentviewer_title_text);
+    padding: var(--zd_size2) ;
+    margin: auto ;
 }

package/lib/AttachmentViewer/props/defaultProps.js

@@ -15,10 +15,10 @@ exports.AttachmentImage_defaultProps = AttachmentImage_defaultProps;
 var AttachmentViewer_defaultProps = {
   responsiveId: "Helmet",
   needDownload: true,
-  i18nKeys: {},
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
+  i18nKeys: {},
   customProps: {}
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/AttachmentViewer/props/propTypes.js

@@ -38,7 +38,8 @@ var AttachmentViewer_propTypes = {
     downloadText: _propTypes["default"].string,
     closeText: _propTypes["default"].string,
     hideText: _propTypes["default"].string,
-    showText: _propTypes["default"].string
+    showText: _propTypes["default"].string,
+    previewUnsupportedText: _propTypes["default"].string
   }),
   needDownload: _propTypes["default"].string,
   previewObj: _propTypes["default"].object,
@@ -46,6 +47,13 @@ var AttachmentViewer_propTypes = {
   maintainZoom: _propTypes["default"].bool,
   isActive: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  allowedPreviewExtensionsData: _propTypes["default"].shape({
+    audio: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    video: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    image: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    document: _propTypes["default"].arrayOf(_propTypes["default"].string)
+  }),
+  renderUnSupportedElement: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     avatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
   })

package/lib/AttachmentViewer/utils.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZoomEvent = exports.Zoom = void 0;
+exports.ZoomEvent = exports.Zoom = exports.SUPPORTED_FILE_EXTENSIONS = exports.FILE_EXTENSIONS = void 0;
 exports.checkAudioUrlValidity = checkAudioUrlValidity;
 exports.checkFileSourcesValidation = checkFileSourcesValidation;
 exports.checkImageValidity = checkImageValidity;
+exports.checkVideoUrlValidity = checkVideoUrlValidity;
+exports.isValidDocument = isValidDocument;
 
 var _Attachment = require("./Attachment");
 
@@ -153,6 +155,21 @@ function checkImageValidity(src) {
   });
 }
 
+function checkVideoUrlValidity(url) {
+  return new Promise(function (resolve) {
+    var video = document.createElement('video');
+    video.src = url;
+
+    video.oncanplaythrough = function () {
+      return resolve(true);
+    };
+
+    video.onerror = function () {
+      return resolve(false);
+    };
+  });
+}
+
 function checkAudioUrlValidity(url) {
   return new Promise(function (resolve) {
     var audio = new Audio(url);
@@ -169,25 +186,102 @@ function checkAudioUrlValidity(url) {
 
 ;
 
+function isValidDocument(url) {
+  if (!url) {
+    return false;
+  }
+
+  return true;
+}
+
+var FILE_EXTENSIONS = {
+  audio: ['mp3', 'wav', 'wma', 'aac', 'm4r', 'm4a', 'flac', 'aiff', 'alac', 'ogg', 'opus', 'amr', 'mid', 'midi'],
+  video: ['mp4', 'mkv', 'mov', 'mpeg', 'mpg', 'flv', 'wmv', 'avi', 'webm', 'ogv', 'm4v', '3gp', '3g2'],
+  document: ['doc', 'docx', 'docm', 'dot', 'dotx', 'dotm', 'odt', 'rtf', 'txt', 'md', 'pages', 'xls', 'xlsx', 'xlsm', 'xlsb', 'csv', 'tsv', 'ods', 'sxc', 'numbers', 'ppt', 'pptx', 'pps', 'ppsx', 'pot', 'potx', 'odp', 'sxi', 'key', 'pdf', 'xml', 'json', 'yaml', 'yml', 'log', 'eml', 'msg'],
+  image: ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'dib', 'tiff', 'tif', 'ico', 'svg', 'webp', 'heic', 'heif', 'jfif', 'pjpeg', 'pjp', 'avif']
+};
+exports.FILE_EXTENSIONS = FILE_EXTENSIONS;
+var SUPPORTED_FILE_EXTENSIONS = {
+  image: ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'tiff', 'tif', 'ico', 'svg', 'heic', 'webp'],
+  doc: ['txt'],
+  pdf: ['pdf'],
+  html: ['html', 'htm', 'xhtml'],
+  ppt: ['ppt', 'pps', 'odp', 'sxi', 'pptx', 'ppsx', 'pot', 'potx', 'key'],
+  zip: ['rar', 'jar', 'zip'],
+  word: ['doc', 'docx', 'sxw', 'odt', 'docm', 'dot', 'dotm', 'dotx', 'rtf', 'pages'],
+  xml: ['xml'],
+  sheet: ['xls', 'xlsx', 'xlsm', 'xlsb', 'sxc', 'ods', 'csv', 'tsv', 'numbers'],
+  audio: ['mp3', 'wav', 'wma', 'aac', 'm4r', 'ogg', 'opus'],
+  video: ['mp4', 'mkv', 'mov', 'mpeg', 'flv', 'wmv', 'avi', 'webm', 'ogv'],
+  mail: ['eml', 'msg'],
+  linux: ['sh', 'bin'],
+  css: ['css'],
+  exe: ['exe'],
+  event: ['ics']
+};
+exports.SUPPORTED_FILE_EXTENSIONS = SUPPORTED_FILE_EXTENSIONS;
+
 function checkFileSourcesValidation(_ref) {
   var fileName = _ref.fileName,
-      viewURL = _ref.viewURL;
+      viewURL = _ref.viewURL,
+      previewUrl = _ref.previewUrl,
+      allowedPreviewExtensionsData = _ref.allowedPreviewExtensionsData;
+  var extension = ((0, _Attachment.getExtensionFromFileName)(fileName) || '').toLowerCase();
+
+  if (!extension) {
+    return Promise.resolve({
+      isViewURLValid: false,
+      canZoom: false
+    });
+  }
+
+  var extensionSource = allowedPreviewExtensionsData || FILE_EXTENSIONS;
 
-  if ((0, _Attachment.isAudioFile)(fileName)) {
-    var audioValidityPromise = checkAudioUrlValidity(viewURL);
-    return audioValidityPromise.then(function (isURLValid) {
+  var fileExtensionValidation = function fileExtensionValidation(type) {
+    var list = extensionSource[type];
+    if (!Array.isArray(list)) return false;
+    return list.map(function (e) {
+      return e.toLowerCase();
+    }).includes(extension);
+  };
+
+  if (fileExtensionValidation('audio')) {
+    return checkAudioUrlValidity(viewURL).then(function (isURLValid) {
       return {
         isViewURLValid: isURLValid,
         canZoom: false
       };
     });
-  } else {
-    var imageValidityPromise = checkImageValidity(viewURL);
-    return imageValidityPromise.then(function (isURLValid) {
+  }
+
+  if (fileExtensionValidation('video')) {
+    return checkVideoUrlValidity(viewURL).then(function (isURLValid) {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
+  }
+
+  if (fileExtensionValidation('document')) {
+    var isValid = isValidDocument(previewUrl, fileName);
+    return Promise.resolve({
+      isViewURLValid: isValid,
+      canZoom: false
+    });
+  }
+
+  if (fileExtensionValidation('image')) {
+    return checkImageValidity(viewURL).then(function (isURLValid) {
       return {
         isViewURLValid: isURLValid,
         canZoom: isURLValid
       };
     });
   }
+
+  return Promise.resolve({
+    isViewURLValid: false,
+    canZoom: false
+  });
 }

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _CheckBox = _interopRequireDefault(require("@zohodesk/components/lib/CheckBox/CheckBox"));
 
@@ -140,15 +140,12 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        id: id,
-        size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        infoText: infoText,
-        customClass: "".concat(!isDirectCol ? _FieldsModule["default"].checkboxText : '', " ").concat(!isDirectCol ? _FieldsModule["default"]["lineClamp_".concat(lineClamp)] : '', " ").concat(isReadOnly || isDisabled ? _FieldsModule["default"].cbTextReadonly : _FieldsModule["default"].cbTextPointer, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        title: labelName,
-        onClick: !removeEvent ? this.handleLabelClick : null,
-        variant: isDirectCol ? 'default' : 'primary',
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        isRequired: isMandatory,
+        isInlineField: true,
+        customStyle: labelCustomClass,
+        testId: id,
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
+        onClick: !removeEvent ? this.handleLabelClick : null
       }, LabelProps)));
 
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/TextBoxIcon/TextBoxIcon"));
 
@@ -178,11 +178,10 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        isRequired: isMandatory,
+        customStyle: labelCustomClass,
         htmlFor: uniqueId,
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({

package/lib/form/fields/DateField/DateField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _DateWidget = _interopRequireDefault(require("@zohodesk/components/lib/DateTime/DateWidget"));
 
@@ -185,15 +185,12 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
+        isRequired: isMandatory,
+        customStyle: labelCustomClass,
         htmlFor: getAriaId,
-        size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
-      }, LabelProps, {
-        id: labelName
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+        testId: labelName,
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
+      }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, isLocked && lockedValueText ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].lockText

package/lib/form/fields/Fields.module.css

@@ -7,6 +7,9 @@
   position: relative;
   min-height: var(--zd_size25) ;
 }
+.fieldMargin_large {
+  margin-top: var(--zd_size10) ;
+}
 .fieldMargin_medium {
   margin-top: var(--zd_size5) ;
 }

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
+var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));
 
 var _MultiSelect = _interopRequireDefault(require("@zohodesk/components/lib/MultiSelect/MultiSelect"));
 
@@ -198,13 +198,11 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         renderProps: renderLabelProps
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
-        id: id,
-        size: fieldSize === 'small' ? 'small' : 'medium',
-        palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+        isRequired: isMandatory // customStyle={style.fieldLabel}
         ,
-        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
-        dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
-        htmlFor: uniqueId
+        htmlFor: uniqueId,
+        testId: id,
+        customId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement(_MultiSelect["default"], _extends({
         options: options,
         onChange: this.handleChange,