@zohodesk/dot 1.0.0-temp-212 → 1.0.0-temp-200.8

package/README.md

@@ -2,6 +2,45 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.17
+
+- **ToggleDropDown** - SecondaryValue supported for listitems and searchFields prop supported
+
+
+# 1.7.16
+
+- **DotProvider** - Theme entry for component_v1 added.
+
+# 1.7.15
+
+- **Onboarding**
+  - Fixed the slider navigation issue on Next button click.
+
+# 1.7.14
+
+- **IconButton** , **AvatarIcon**
+  - RTL icon text alignment issue resolved by adding text-align: center for the icon.
+
+
+# 1.7.13
+
+- **CommonEmptyState**
+  - Fixed spacing issues in link and description, and updated link display style from inline-block to inline.
+- **TagsMultiSelect**
+  - Added padding to EmptyState component.
+- **Onboarding**
+  - `tagAttributes, a11yAttributes, closeIconTooltip, dragBoundaryLimit, isDraggable, position` prop has been added.
+  -  useDragger hooks -> bottom and right position is set to initial 
+  -  carouselDot animation => `left` changed into `inset-inline-start`
+
+
+# 1.7.12
+
+- **Drawer**
+  - Added `onAnimateEnter, onAnimateExit & postAnimateStyles` props to pass to `VelocityAnimationGroup`
+- **FreezeLayer**
+  - Added `onAnimateEnter, onAnimateExit & postAnimateStyles` props to pass to `VelocityAnimationGroup`
+
 # 1.7.11
 
 - **ListStencils**

package/es/ActionButton/ActionButton.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-import style from './ActionButton.module.css';
+import style from "./ActionButton.module.css";
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {

package/es/ActionButton/__tests__/ActionButton.spec.js

@@ -1,7 +1,14 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ActionButton from '../ActionButton';
+import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
+import ActionButton from "../ActionButton";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('ActionButton', () => {
   const palettes = ['primaryFilled', 'primary'];
   const sizes = ['small', 'medium', 'large'];

package/es/AlphabeticList/AlphabeticList.js

@@ -1,11 +1,11 @@
 /*** Libraries ***/
 import React from 'react';
-import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from './props/defaultProps';
-import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from './props/propTypes';
+import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from "./props/defaultProps";
+import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /*** CSS ***/
 
-import style from './AlphabeticList.module.css';
+import style from "./AlphabeticList.module.css";
 export default class AlphabeticList extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/AlphabeticList/__tests__/AlphabeticList.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AlphabeticList from '../AlphabeticList';
+import AlphabeticList from "../AlphabeticList";
 describe('AlphabeticList', () => {
   test('rendering the defult props', () => {
     const {

package/es/Attachment/Attachment.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Link from '../Link/Link';
-import style from './Attachment.module.css';
+import Link from "../Link/Link";
+import style from "./Attachment.module.css";
 export default class Attachment extends React.Component {
   render() {
     let {

package/es/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top:0 
+  top: 0 
 }
 
 [dir=ltr] .disableLayer {
-  left:0 
+  left: 0 
 }
 
 [dir=rtl] .disableLayer {
-  right:0 
+  right: 0 
 }
 
 .attachmentHover {
@@ -66,6 +66,10 @@
   height: var(--zd_size40) ;
 }
 
+.attachleft {
+  padding: var(--zd_size3) ;
+}
+
 [dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }

package/es/Attachment/__tests__/Attachment.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Attachment from '../Attachment';
+import Attachment from "../Attachment";
 describe('Attachment', () => {
   test('rendering the defult props', () => {
     const {

package/es/AttachmentViewer/Attachment.js

@@ -1,3 +1,4 @@
+import { getBrowserWithVersion } from "../utils/General";
 const UNASSIGNED = 'Unassigned';
 const BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
 export function isAudioFile(fileName) {
@@ -14,4 +15,53 @@ export function getExtensionFromFileName(fileName) {
 export function isBrowserSupportedFile(fileName) {
   const extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
+}
+export function getAttachmentIconDetails(fileName) {
+  const extension = getExtensionFromFileName(fileName)?.toLowerCase();
+  if (!extension) return 'ZD-GN-fileUnknown';
+  const imageExtensions = ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'tiff', 'tif', 'ico', 'svg', 'heic', 'webp'];
+  const docExtensions = ['txt'];
+  const pdfExtensions = ['pdf'];
+  const htmlExtensions = ['html', 'htm', 'xhtml'];
+  const pptExtensions = ['ppt', 'pps', 'odp', 'sxi', 'pptx', 'ppsx', 'pot', 'potx', 'key'];
+  const zipExtensions = ['rar', 'jar', 'zip'];
+  const wordExtensions = ['doc', 'docx', 'sxw', 'odt', 'docm', 'dot', 'dotm', 'dotx', 'rtf', 'pages'];
+  const xmlExtensions = ['xml'];
+  const sheetExtensions = ['xls', 'xlsx', 'xlsm', 'xlsb', 'sxc', 'ods', 'csv', 'tsv', 'numbers'];
+  const audioExtensions = ['mp3', 'wav', 'wma', 'aac', 'm4r', 'ogg', 'opus'];
+  const videoExtensions = ['mp4', 'mkv', 'mov', 'mpeg', 'flv', 'wmv', 'avi', 'webm', 'ogv'];
+  const mailExtensions = ['eml', 'msg'];
+  const linuxExtensions = ['sh', 'bin'];
+  const cssExtensions = ['css'];
+  const exeExtensions = ['exe'];
+  const eventExtensions = ['ics'];
+  if (imageExtensions.includes(extension)) return 'ZD-EF-fileImage';
+  if (docExtensions.includes(extension)) return 'ZD-GN-fileDoc';
+  if (pdfExtensions.includes(extension)) return 'ZD-EF-filePdf';
+  if (pptExtensions.includes(extension)) return 'ZD-GN-filePpt';
+  if (zipExtensions.includes(extension)) return 'ZD-EF-fileZip';
+
+  if (wordExtensions.includes(extension)) {
+    const OSName = navigator.platform?.toLowerCase() || '';
+    return OSName.includes('mac') || OSName.includes('linux') ? 'ZD-EF-fileOffice' : 'ZD-EF-fileWord';
+  }
+
+  if (xmlExtensions.includes(extension)) return 'ZD-EF-fileXml';
+  if (sheetExtensions.includes(extension)) return 'ZD-GN-fileSheet';
+  if (audioExtensions.includes(extension)) return 'ZD-EF-fileMp3';
+  if (videoExtensions.includes(extension)) return 'ZD-EF-fileMp4';
+  if (mailExtensions.includes(extension)) return 'ZD-GN-fileMail';
+  if (linuxExtensions.includes(extension)) return 'ZD-EF-linux';
+  if (cssExtensions.includes(extension)) return 'ZD-EF-clrCss';
+  if (exeExtensions.includes(extension)) return 'ZD-EF-exe';
+  if (eventExtensions.includes(extension)) return 'ZD-TK-event';
+
+  if (htmlExtensions.includes(extension)) {
+    const browser = getBrowserWithVersion()?.toLowerCase() || '';
+    if (browser.includes('chrome') || browser.includes('safari')) return 'ZD-EF-fileXml';
+    if (browser.includes('ie') || browser.includes('edge')) return 'ZD-EF-explorer';
+    return 'ZD-EF-firebox';
+  }
+
+  return 'ZD-GN-fileUnknown';
 }

package/es/AttachmentViewer/AttachmentImage.js

@@ -3,13 +3,13 @@
 /** * Libraries ** */
 import React, { Component } from 'react';
 import { Container } from '@zohodesk/components/es/Layout';
-import { AttachmentImage_defaultProps } from './props/defaultProps';
-import { AttachmentImage_propTypes } from './props/propTypes';
-import { checkImageValidity } from './utils';
-import Image from '../Image/Image';
+import { AttachmentImage_defaultProps } from "./props/defaultProps";
+import { AttachmentImage_propTypes } from "./props/propTypes";
+import { checkImageValidity } from "./utils";
+import Image from "../Image/Image";
 /** * CSS ** */
 
-import style from './AttachmentViewer.module.css';
+import style from "./AttachmentViewer.module.css";
 export default class AttachmentImage extends Component {
   constructor(props) {
     super(props);

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,20 +1,21 @@
 import React, { Component } from 'react';
-import { AttachmentViewer_defaultProps } from './props/defaultProps';
-import { AttachmentViewer_propTypes } from './props/propTypes';
+import { AttachmentViewer_defaultProps } from "./props/defaultProps";
+import { AttachmentViewer_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/lib/Typography/Typography';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import AttachmentImage from './AttachmentImage';
-import Link from '../Link/Link';
-import IconButton from '../IconButton/IconButton';
-import FreezeLayer from '../FreezeLayer/FreezeLayer';
-import { isAudioFile, getExtensionFromFileName } from './Attachment';
-import { shallowDiff } from '../utils/General';
-import style from './AttachmentViewer.module.css';
-import { checkFileSourcesValidation } from './utils';
-import audioThumbNail from '../../images/audio_thumbnail.png';
+import Button from '@zohodesk/components/es/Button/Button';
+import AttachmentImage from "./AttachmentImage";
+import Link from "../Link/Link";
+import IconButton from "../IconButton/IconButton";
+import FreezeLayer from "../FreezeLayer/FreezeLayer";
+import { getExtensionFromFileName, getAttachmentIconDetails } from "./Attachment";
+import { shallowDiff } from "../utils/General";
+import { checkFileSourcesValidation, FILE_EXTENSIONS } from "./utils";
+import style from "./AttachmentViewer.module.css";
 export default class AttachmentViewer extends Component {
   constructor(props) {
     super(props);
@@ -43,6 +44,26 @@ export default class AttachmentViewer extends Component {
     this.getUpdateDataList = this.getUpdateDataList.bind(this);
     this.zoomMaintain = this.zoomMaintain.bind(this);
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
+    this.getPreviewIconData = this.getPreviewIconData.bind(this);
+    this.renderIframe = this.renderIframe.bind(this);
+  }
+
+  isImageFileType(fileName) {
+    const extension = getExtensionFromFileName(fileName)?.toLowerCase();
+    if (!extension) return false;
+    return FILE_EXTENSIONS.image.map(ext => ext.toLowerCase()).includes(extension);
+  }
+
+  isVideoFileType(fileName) {
+    const extension = getExtensionFromFileName(fileName)?.toLowerCase();
+    if (!extension) return false;
+    return FILE_EXTENSIONS.video.map(ext => ext.toLowerCase()).includes(extension);
+  }
+
+  isAudioFileType(fileName) {
+    const extension = getExtensionFromFileName(fileName)?.toLowerCase();
+    if (!extension) return false;
+    return FILE_EXTENSIONS.audio.map(ext => ext.toLowerCase()).includes(extension);
   }
 
   componentDidMount() {
@@ -87,13 +108,19 @@ export default class AttachmentViewer extends Component {
       data,
       selectedIndex
     } = this.state;
+    const {
+      allowedPreviewExtensionsData
+    } = this.props;
     const selectedAttachment = data[selectedIndex] || {};
     const selectedAttachmentViewUrl = selectedAttachment.viewUrl;
     const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
     const selectedAttachmentName = selectedAttachment.name;
+    const selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
     checkFileSourcesValidation({
       fileName: selectedAttachmentName,
-      viewURL: selectedAttachmentViewUrl
+      viewURL: selectedAttachmentViewUrl,
+      previewUrl: selectedAttachmentPreviewUrl,
+      allowedPreviewExtensionsData
     }).then(fileSourceValidation => {
       const {
         isViewURLValid,
@@ -250,7 +277,37 @@ export default class AttachmentViewer extends Component {
     };
   }
 
-  imgPreviewView() {
+  getPreviewIconData(name, size, dataId) {
+    const fileUnknown = {
+      iconName: 'ZD-GN-fileUnknown',
+      iconSize: '40'
+    };
+    const fileIconName = getAttachmentIconDetails(name);
+    const fileDetails = name ? {
+      iconName: fileIconName,
+      iconSize: size
+    } : fileUnknown;
+    const {
+      iconName,
+      iconSize
+    } = fileDetails;
+    return /*#__PURE__*/React.createElement(Icon, {
+      iconClass: style.prevFooterIcon,
+      name: iconName,
+      size: iconSize,
+      "data-id": dataId
+    });
+  }
+
+  renderIframe(previewurl) {
+    return /*#__PURE__*/React.createElement("iframe", {
+      src: previewurl,
+      className: style.previewFrame,
+      ...this.props.customProps.iframeProps
+    });
+  }
+
+  imgPreviewView(downloadUrl) {
     var _this = this;
 
     const {
@@ -262,7 +319,9 @@ export default class AttachmentViewer extends Component {
     } = this.state;
     const {
       maintainZoom,
-      dataId
+      dataId,
+      i18nKeys,
+      renderUnSupportedElement
     } = this.props;
 
     const getImgStyle = i => {
@@ -299,17 +358,25 @@ export default class AttachmentViewer extends Component {
         children,
         dataId = 'attachViewer',
         customClass = {},
-        customProps = {}
+        customProps = {},
+        previewurl,
+        type
       } = data;
       const {
         audioProps = {},
-        imageProps = {}
+        imageProps = {},
+        videoProps = {}
       } = customProps;
       const {
         customImageClass = '',
         customChildrenClass = ''
       } = customClass;
       const retainZoom = canZoom && selectedIndex == i && maintainZoom;
+      const extension = getExtensionFromFileName(name);
+      const {
+        previewUnsupportedText = "Preview not available for the selected file type.",
+        downloadText = "Download"
+      } = i18nKeys;
       return /*#__PURE__*/React.createElement(Container, {
         className: style.imgBox,
         id: `imgBox${i}`,
@@ -320,32 +387,52 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Box, {
         className: style.imgRef,
         id: `imgPreviewRef${i}`
-      }, isAudioFile(name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
-        autoPlay: true,
+      }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, _this.isAudioFileType(name) ? /*#__PURE__*/React.createElement("audio", {
+        controls: true,
+        className: style.zoomIn,
+        "data-id": `${dataId}_audioPreview`,
+        "data-test-id": `${dataId}_audioPreview`,
+        ...audioProps
+      }, /*#__PURE__*/React.createElement("source", {
+        src: previewurl,
+        type: `audio/${extension}`
+      })) : _this.isVideoFileType(name) ? /*#__PURE__*/React.createElement("video", {
         controls: true,
         className: style.zoomIn,
         "data-id": `${dataId}_videoPreview`,
         "data-test-id": `${dataId}_videoPreview`,
-        ...audioProps
+        ...videoProps
       }, /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
-        type: `audio/${getExtensionFromFileName(name)}`
-      })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
+        type: `video/${extension}`
+      })) : _this.isImageFileType(name) || children ? /*#__PURE__*/React.createElement(AttachmentImage, {
         customClass: {
-          customImageClass: `${style.img} ${style.altText}
-                    ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+          customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
           customChildrenClass
         },
         src: viewUrl,
-        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => {
-          _this.zoomIn(e, i, true);
-        } : undefined,
+        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => _this.zoomIn(e, i, true) : undefined,
         alt: name,
         dataId: dataId,
         id: `img${i}`,
         isCover: false,
         ...imageProps
-      }, children)));
+      }, children) : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
+        className: style.previewNone
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.fileTypeImg
+      }, _this.getPreviewIconData(name, '70')), /*#__PURE__*/React.createElement(Typography, {
+        $ui_size: "20",
+        $ui_weight: "semibold"
+      }, previewUnsupportedText), /*#__PURE__*/React.createElement(Link, {
+        href: downloadUrl,
+        className: style.downloadLink,
+        hasReload: true,
+        download: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        palette: "primaryFilled",
+        text: downloadText
+      }))))));
     });
   }
 
@@ -371,7 +458,7 @@ export default class AttachmentViewer extends Component {
     } = customProps;
     const totalLen = data.length;
     const selectedAttachment = data[selectedIndex] || {};
-    const selectedImgUrl = selectedAttachment.viewUrl;
+    const selectedImgUrl = selectedAttachment.previewurl || selectedAttachment.viewUrl;
     const downloadUrl = selectedAttachment.downloadUrl;
     let authorHref;
     let authorName;
@@ -526,7 +613,7 @@ export default class AttachmentViewer extends Component {
         eleRef: this.setImgBoxRef,
         scroll: "both",
         flexible: true
-      }, this.imgPreviewView()), /*#__PURE__*/React.createElement(Box, {
+      }, this.imgPreviewView(downloadUrl)), /*#__PURE__*/React.createElement(Box, {
         className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ''}`,
         onClick: this.changeSelectedIndex.bind(this, selectedIndex + 1),
         "data-title": i18nKeys.nextText,
@@ -582,20 +669,19 @@ export default class AttachmentViewer extends Component {
         let {
           thumbnail
         } = item;
+        const isImageFileType = this.isImageFileType(name) || thumbnail;
         const {
           customImageClass = '',
           customChildrenClass = ''
         } = customClass;
-        thumbnail = isAudioFile(name) ? thumbnail || audioThumbNail : thumbnail; //fallback thumbnail for audio
-
         return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''} ${isImageFileType ? '' : style.previewIconDiv}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
           dataId: "attachPreviewList",
           "data-title": name
-        }, /*#__PURE__*/React.createElement(AttachmentImage, {
+        }, isImageFileType || children ? /*#__PURE__*/React.createElement(AttachmentImage, {
           src: thumbnail || viewUrl,
           size: "small",
           alt: name,
@@ -605,7 +691,7 @@ export default class AttachmentViewer extends Component {
           },
           dataId: dataId,
           ...customProps
-        }, children));
+        }, children) : this.getPreviewIconData(name, '40'));
       }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
         dataId: "attachToggle",
         onClick: this.togglePViewList,

package/es/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/es/AttachmentViewer/__tests__/AttachmentImage.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AttachmentImage from '../AttachmentImage';
+import AttachmentImage from "../AttachmentImage";
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 describe('AttachmentImage', () => {
   test('rendering the defult props', () => {

package/es/AttachmentViewer/__tests__/AttachmentViewer.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import AttachmentViewer from '../AttachmentViewer';
+import { render, cleanup } from '@testing-library/react';
+import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
+import AttachmentViewer from "../AttachmentViewer";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+});
 describe('AttachmentViewer', () => {
   test('rendering the defult props', () => {
     const {

package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -87,7 +87,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-download    "
+                        class="zd_font_icons basic icon-download   icon_button_center  "
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -111,7 +111,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="zd_font_icons basic icon-cross    "
+                      class="zd_font_icons basic icon-cross   icon_button_center  "
                       data-id="fontIcon"
                       data-selector-id="fontIcon"
                       data-test-id="fontIcon"
@@ -369,7 +369,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive  "
+            class="zd_font_icons basic icon-hideTab  thumpIcon thumpIconActive icon_button_center  "
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"

package/es/AttachmentViewer/props/defaultProps.js

@@ -8,9 +8,9 @@ export const AttachmentImage_defaultProps = {
 export const AttachmentViewer_defaultProps = {
   responsiveId: "Helmet",
   needDownload: true,
-  i18nKeys: {},
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
+  i18nKeys: {},
   customProps: {}
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -26,7 +26,8 @@ export const AttachmentViewer_propTypes = {
     downloadText: PropTypes.string,
     closeText: PropTypes.string,
     hideText: PropTypes.string,
-    showText: PropTypes.string
+    showText: PropTypes.string,
+    previewUnsupportedText: PropTypes.string
   }),
   needDownload: PropTypes.string,
   previewObj: PropTypes.object,
@@ -34,6 +35,13 @@ export const AttachmentViewer_propTypes = {
   maintainZoom: PropTypes.bool,
   isActive: PropTypes.bool,
   dataId: PropTypes.string,
+  allowedPreviewExtensionsData: PropTypes.shape({
+    audio: PropTypes.arrayOf(PropTypes.string),
+    video: PropTypes.arrayOf(PropTypes.string),
+    image: PropTypes.arrayOf(PropTypes.string),
+    document: PropTypes.arrayOf(PropTypes.string)
+  }),
+  renderUnSupportedElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
   })