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

package/es/AttachmentViewer/AttachmentViewer.js

@@ -5,16 +5,17 @@ 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 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 { isAudioFile, getExtensionFromFileName } from "./Attachment";
+import { getExtensionFromFileName, getAttachmentIconDetails } from "./Attachment";
 import { shallowDiff } from "../utils/General";
+import { checkFileSourcesValidation, FILE_EXTENSIONS } from "./utils";
 import style from "./AttachmentViewer.module.css";
-import { checkFileSourcesValidation } from "./utils";
-import audioThumbNail from "../../images/audio_thumbnail.png";
 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 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 || viewUrl,
+        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), downloadUrl ? /*#__PURE__*/React.createElement(Link, {
+        href: downloadUrl,
+        className: style.downloadLink,
+        hasReload: true,
+        download: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        palette: "primaryFilled",
+        text: downloadText
+      })) : null))));
     });
   }
 
@@ -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__/__snapshots__/AttachmentViewer.spec.js.snap

@@ -237,7 +237,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected shrinkOff"
+                  class="imgItem selected  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -254,7 +254,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -271,7 +271,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -288,7 +288,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -305,7 +305,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -322,7 +322,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -339,21 +339,20 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem  previewIconDiv shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
                   data-title="slack5.mp3"
                 >
-                  <div
-                    class="spinLoad"
-                    data-id="AttachmentImage_loader"
-                    data-test-id="AttachmentImage_loader"
-                  >
-                    <div
-                      class="loader"
-                    />
-                  </div>
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-fileMp3  prevFooterIcon  "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size40);"
+                  />
                 </div>
               </div>
             </div>

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)
   })

package/es/AttachmentViewer/utils.js

@@ -1,4 +1,4 @@
-import { isAudioFile } from "./Attachment";
+import { getExtensionFromFileName } from "./Attachment";
 export class Zoom {
   constructor() {
     const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
@@ -120,6 +120,16 @@ export function checkImageValidity(src) {
     };
   });
 }
+export function checkVideoUrlValidity(url) {
+  return new Promise(resolve => {
+    const video = document.createElement('video');
+    video.src = url;
+
+    video.oncanplaythrough = () => resolve(true);
+
+    video.onerror = () => resolve(false);
+  });
+}
 export function checkAudioUrlValidity(url) {
   return new Promise(resolve => {
     const audio = new Audio(url);
@@ -134,23 +144,98 @@ export function checkAudioUrlValidity(url) {
   });
 }
 ;
+export function isValidDocument(url) {
+  if (!url) {
+    return false;
+  }
+
+  return true;
+}
+export const 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']
+};
+export const 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']
+};
 export function checkFileSourcesValidation(_ref) {
   let {
     fileName,
-    viewURL
+    viewURL,
+    previewUrl,
+    allowedPreviewExtensionsData
   } = _ref;
+  const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
 
-  if (isAudioFile(fileName)) {
-    const audioValidityPromise = checkAudioUrlValidity(viewURL);
-    return audioValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
+  if (!extension) {
+    return Promise.resolve({
+      isViewURLValid: false,
       canZoom: false
-    }));
-  } else {
-    const imageValidityPromise = checkImageValidity(viewURL);
-    return imageValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
-      canZoom: isURLValid
-    }));
+    });
+  }
+
+  const extensionSource = allowedPreviewExtensionsData || FILE_EXTENSIONS;
+
+  const fileExtensionValidation = type => {
+    const list = extensionSource[type];
+    if (!Array.isArray(list)) return false;
+    return list.map(e => e.toLowerCase()).includes(extension);
+  };
+
+  if (fileExtensionValidation('audio')) {
+    return checkAudioUrlValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
   }
+
+  if (fileExtensionValidation('video')) {
+    return checkVideoUrlValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
+  }
+
+  if (fileExtensionValidation('document')) {
+    const isValid = isValidDocument(previewUrl, fileName);
+    return Promise.resolve({
+      isViewURLValid: isValid,
+      canZoom: false
+    });
+  }
+
+  if (fileExtensionValidation('image')) {
+    return checkImageValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: isURLValid
+      };
+    });
+  }
+
+  return Promise.resolve({
+    isViewURLValid: false,
+    canZoom: false
+  });
 }

package/es/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/es/form/fields/RadioField/RadioField.js

@@ -121,7 +121,7 @@ export default class RadioField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`
     }, options.map((option, index) => {
       let {
         text,

package/es/lookup/Lookup/Lookup.js

@@ -56,6 +56,7 @@ export default class Lookup extends Component {
       needFocusScope,
       customProps,
       isMinHeight,
+      containerClass,
       lookupClass
     } = this.props;
     const {
@@ -93,7 +94,7 @@ export default class Lookup extends Component {
     }, /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
-      className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`
+      className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`
     }, children));
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",

package/es/lookup/Lookup/Lookup.module.css

@@ -19,6 +19,10 @@
   margin: auto ;
 }
 
+.containerWidth {
+  width: 100% ;
+}
+
 /* Size */
 .smallSize {
   max-width: var(--zd_size470) ;
@@ -35,10 +39,11 @@
 .largeSize {
   max-width: 70% ;
 }
+
 .xlargeSize {
   max-width: 80% ;
 }
 
 .fullSize {
   max-width: 90% ;
-}
+}

package/es/lookup/Lookup/props/propTypes.js

@@ -20,5 +20,6 @@ export const propTypes = {
   onClick: PropTypes.func,
   onClose: PropTypes.func,
   isMinHeight: PropTypes.bool,
+  containerClass: PropTypes.string,
   lookupClass: PropTypes.string
 };

package/es/utils/General.js

@@ -43,4 +43,26 @@ export function formatPhoneUrl(phone) {
 
   return phone;
 }
-export const DUMMY_OBJECT = Object.freeze({});
+export const DUMMY_OBJECT = Object.freeze({});
+export function getBrowserWithVersion() {
+  const userAgent = navigator.userAgent;
+  let tempMatch;
+  let browserMatch = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (userAgent.toLowerCase().indexOf('edge') !== -1) {
+    return userAgent.substring(userAgent.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(browserMatch[1])) {
+    tempMatch = /\brv[ :]+(\d+(\.\d+)?)/g.exec(userAgent) || [];
+    return `IE ${tempMatch[1] || ''}`;
+  }
+
+  browserMatch = browserMatch[2] ? [browserMatch[1], browserMatch[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tempMatch = userAgent.match(/version\/([\.\d]+)/i)) !== null) {
+    browserMatch[2] = tempMatch[1];
+  }
+
+  return browserMatch.join(' ');
+}