@zohodesk/dot 1.0.0-temp-199.1 → 1.0.0-temp-200

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

@@ -0,0 +1,478 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DotProvider Snapshot rendering the additional ...rest props 1`] = `
+<DocumentFragment>
+  <div
+    class="testClass"
+    data-id="test-id"
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1em 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1em;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1px 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1rem 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1rem;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.5 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.5px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.8 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.8px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1.2 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1.2px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="dark"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="light"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the default attributes, styles and modified the tag props 1`] = `
+<DocumentFragment>
+  <span
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the default attributes, styles and modifying the tag prop to React.Fragment 1`] = `
+<html
+  data-mode="light"
+  data-theme="blue"
+  style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+>
+  <head />
+  <body>
+    <div>
+      This is a DotProvider component
+    </div>
+  </body>
+</html>
+`;
+
+exports[`DotProvider Snapshot rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the fontUnitVariable prop along with baseFontUnit props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --gc_baseFontUnit: 14px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the providerRef props 1`] = `
+<DocumentFragment>
+  <div>
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="dark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of blue 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of green 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of orange 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of red 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of yellow 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="pureDark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the wrong themeAppearance and themeColor 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="ligt"
+    data-theme="gren"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DotProvider Snapshot rendering the zoomUnitVariable prop along with baseZoomUnit props 1`] = `
+<DocumentFragment>
+  <div
+    data-mode="light"
+    data-theme="blue"
+    style="--gc_baseUnit: 1.1px; --zd_baseFontUnit: 16px;"
+  >
+    This is a DotProvider component
+  </div>
+</DocumentFragment>
+`;

package/es/common/dot_common.module.css

@@ -1,4 +1,39 @@
 .audioImage {
   background-image: url('../../images/audio_thumbnail.png');
   background-repeat: no-repeat;
+}
+
+.videoImage {
+  background-image: url('../../images/video_thumbnail.png');
+  background-repeat: no-repeat;
+}
+
+.pdfImage {
+  background-image: url('../../images/pdf_thumbnail.png');
+  background-repeat: no-repeat;
+}
+
+.writerImage {
+  background-image: url('../../images/writer_thumbnail.png');
+  background-repeat: no-repeat;
+}
+
+.showImage {
+  background-image: url('../../images/show_thumbnail.png');
+  background-repeat: no-repeat;
+}
+
+.sheetImage {
+  background-image: url('../../images/sheet_thumbnail.png');
+  background-repeat: no-repeat;
+}
+
+.mailImage {
+  background-image: url('../../images/mail_thumbnail.png');
+  background-repeat: no-repeat;
+}
+
+.otherImage {
+  background-image: url('../../images/otherfile_thumbnail.png');
+  background-repeat: no-repeat;
 }

package/es/lookup/header/Search/LookupSearch.module.css

@@ -57,7 +57,7 @@
 }
 .separator {
   width: var(--zd_size1) ;
-  height: var(--zd_size20) ;
+  height: var(--zd_size16) ;
   margin: 0 var(--zd_size12) ;
   background-color: var(--zdt_lookupsearch_boxstyle_border);
 }

package/es/lookup/header/Search/Search.js

@@ -217,7 +217,8 @@ class SearchUI extends Component {
     }) : null, hasSeparator ? /*#__PURE__*/React.createElement("div", {
       className: style.separator
     }) : null, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
+      flexible: true,
+      onClick: cancelBubblingEffect
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       customProps: {
         TextBoxProps: {
@@ -227,7 +228,6 @@ class SearchUI extends Component {
       placeHolder: placeHolder,
       value: searchStr,
       onChange: this.handleChange,
-      onClick: cancelBubblingEffect,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: this.handleKeyDown,

package/es/lookup/header/Search/props/propTypes.js

@@ -6,6 +6,7 @@ export const Search_propTypes = {
   onSelect: PropTypes.func,
   options: PropTypes.array,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  renderChildren: PropTypes.func,
   value: PropTypes.string
 };
 export const SearchUI_propTypes = {

package/lib/Attachment/Attachment.js

@@ -70,7 +70,9 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
           fileInfo = _this$props.fileInfo,
           i18nKeys = _this$props.i18nKeys,
           dataSelectorId = _this$props.dataSelectorId,
-          isDisabled = _this$props.isDisabled;
+          isDisabled = _this$props.isDisabled,
+          _this$props$iconPalet = _this$props.iconPalette,
+          iconPalette = _this$props$iconPalet === void 0 ? "white" : _this$props$iconPalet;
       var _i18nKeys$downloadTit = i18nKeys.downloadTitle,
           downloadTitle = _i18nKeys$downloadTit === void 0 ? 'Download' : _i18nKeys$downloadTit;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/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/lib/AttachmentViewer/Attachment.js

@@ -3,15 +3,89 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.designFileTypes = designFileTypes;
+exports.docsFileTypes = docsFileTypes;
 exports.getExtensionFromFileName = getExtensionFromFileName;
 exports.isAudioFile = isAudioFile;
 exports.isBrowserSupportedFile = isBrowserSupportedFile;
+exports.isDocsFile = isDocsFile;
+exports.isEmailFile = isEmailFile;
+exports.isImageFile = isImageFile;
+exports.isPdfFile = isPdfFile;
+exports.isSheetFile = isSheetFile;
+exports.isShowFile = isShowFile;
+exports.isVideoFile = isVideoFile;
+exports.openInNewTabWithNoopener = openInNewTabWithNoopener;
+exports.openNewTab = openNewTab;
+exports.sheetFileTypes = sheetFileTypes;
+exports.showFileTypes = showFileTypes;
+exports.zipFileType = zipFileType;
 var UNASSIGNED = 'Unassigned';
 var BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
 
 function isAudioFile(fileName) {
   var extension = getExtensionFromFileName(fileName);
-  return /mp3|wav|ogg/i.test(extension);
+  return /mp3|wav|ogg|oga|m4a|weba|opus|m4b|webma|aac/i.test(extension);
+}
+
+function isVideoFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /mp4|webm|ogg/i.test(extension);
+}
+
+function isPdfFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /pdf/i.test(extension);
+}
+
+function isDocsFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /docx|doc|docm|rtf|odt|dot|dotm|dotx|pages/i.test(extension);
+}
+
+function isSheetFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /xlsx|numbers/i.test(extension);
+}
+
+function isShowFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /pptx|ppt|pps|ppsx|key/i.test(extension);
+}
+
+function isEmailFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /eml|msg/i.test(extension);
+}
+
+function isImageFile(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /jpeg|jpg|png|gif|bmp|tiff|tif|ico/i.test(extension);
+}
+
+function docsFileTypes(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /docx|doc|docm|rtf|odt|dot|dotm|dotx|sxw|odt|ott|txt|pages/i.test(extension);
+}
+
+function sheetFileTypes(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /xls|xlsx|sxc|ods|csv|tsv|ots|xlsm|xlsb|xlt|xltx|xltm|numbers/i.test(extension);
+}
+
+function showFileTypes(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /pptx|ppt|pps|ppsx|odp|sxi|key|pot|potx/i.test(extension);
+}
+
+function designFileTypes(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /sketch|xd|psd|ai|fig|svg/i.test(extension);
+}
+
+function zipFileType(fileName) {
+  var extension = getExtensionFromFileName(fileName);
+  return /zip/i.test(extension);
 }
 
 function getExtensionFromFileName(fileName) {
@@ -25,4 +99,17 @@ function getExtensionFromFileName(fileName) {
 function isBrowserSupportedFile(fileName) {
   var extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
+}
+
+function openInNewTabWithNoopener(url) {
+  var targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
+  var aTag = document.createElement('a');
+  aTag.rel = 'noopener noreferrer';
+  aTag.target = targetnName;
+  aTag.href = url;
+  aTag.click();
+}
+
+function openNewTab(href) {
+  openInNewTabWithNoopener(href);
 }