@zohodesk/dot 1.0.0-temp-39 → 1.0.0-temp-43

package/README.md

@@ -2,6 +2,67 @@
 
 In this Library we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.187
+
+- AlphabeticList => vertical spaceing incremented
+
+# 1.0.0-beta.186
+
+- AlphabeticList => vertical spaceing incremented, dataId prop added
+
+# 1.0.0-beta.185
+
+- ToggleDropdown => on focusing input preventScroll disabled.
+- ValidationMessage => toolip Prop Added
+
+# 1.0.0-beta.184
+
+- TagsMultiSelect => dataId Changes
+- list/Icons => width added tto avoid jurk
+
+# 1.0.0-beta.183
+
+- Lookup,AlertLookup,AlertLookup2 => eventListeners Removed on UnMount
+- Drawer => getTitleChildren prop added
+- ToggleDropdown => on focusing input preventScroll disabled.
+
+# 1.0.0-beta.182
+
+- ExternalLink, Link, AccountName, ContactName, SecondaryText/Email, SecondaryText/PhoneNumber, SecondaryText/TicketId, Subject => **customProps** prop added
+
+# 1.0.0-beta.181
+
+- ReadUnReadIcon => icon Name fix
+
+# 1.0.0-beta.180
+
+- TagsMultiSelect => scrollTop Issue Solved
+- TagsMultiSelectField => keyPress index fixed
+
+# 1.0.0-beta.179
+
+- ToggleDropDown => selectedId fix while opening the dropdown.
+
+# 1.0.0-beta.178
+
+- ReadUnreadIcon component added
+
+# 1.0.0-beta.177
+
+- TextEditorField => isReadOnly Ui Given
+
+# 1.0.0-beta.176
+
+- @zoho/SecurityJS library removed from depedency
+- Message/Message => HtmlPurifier Removed
+- GlobalNotification/GlobalNotification => HtmlPurifier Removed
+- helptips/Link/Link => HtmlPurifier Removed
+
+# 1.0.0-beta.175
+
+- PropTypes Validattion Fixes
+- errorState DataId and Common Css Fixes
+
 # 1.0.0-beta.174
 
 - Docs Fixes
@@ -9,10 +70,9 @@ In this Library we Provide Some Basic Components to Build Your Application
 - Inconvenience => svg image changed as old
 - version2/errorstate/Inconvenience/Inconvenience => isButtonNeeded,className,isFluid,dataId,buttonText,onButtonClick,urlTarget,size prop added, subtitle,customClass prop removed
 - OopsSomethingMiss , UnableToProcessRequest, WillBeRightBack, UrlNotFound added
-- PermissionPlay, RequestUrlNotFound, UnableToProcess, , WillBack  Removed
+- PermissionPlay, RequestUrlNotFound, UnableToProcess, , WillBack Removed
 - UnauthorizedLogin updated and subtitle,customClass prop removed
 
-
 # 1.0.0-beta.173
 
 - CTA gray based color changes

package/es/ActionButton/ActionButton.js

@@ -134,7 +134,7 @@ ActionButton.defaultProps = {
 };
 ActionButton.propTypes = {
   arrowBoxDataId: PropTypes.string,
-  arrowBoxSize: PropTypes.oneOf('small', 'medium'),
+  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -153,7 +153,7 @@ ActionButton.propTypes = {
   onHover: PropTypes.bool,
   palette: PropTypes.oneOf('primaryFilled', 'primary'),
   removeClose: PropTypes.func,
-  size: PropTypes.oneOf('small', 'medium', 'large'),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
   subText: PropTypes.string,
   text: PropTypes.string,
   getContainerRef: PropTypes.func,

package/es/ActionButton/ActionButton.module.css

@@ -21,12 +21,9 @@
 .primaryBtn, .primaryArw {
   border: 1px solid var(--buttonBorder);
 }
-[dir=ltr] .primaryBtn {
+.primaryBtn {
   border-right: none;
 }
-[dir=rtl] .primaryBtn {
-  border-left: none;
-}
 .contentBox,
 .arrowWrapper {
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
@@ -34,12 +31,9 @@
 .clickable {
   cursor: pointer;
 }
-[dir=ltr] .contentBoxBdr {
+.contentBoxBdr {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
-[dir=rtl] .contentBoxBdr {
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-}
 .contentBoxBdrRds {
   border-radius: var(--zd_size4);
 }
@@ -59,7 +53,8 @@
 .small_btnBox {
   padding: 0 var(--zd_size8);
 }
-.medium_btnBox, .large_btnBox {
+.medium_btnBox,
+.large_btnBox {
   padding: 0 var(--zd_size10);
 }
 .txt {
@@ -82,20 +77,12 @@
 }
 .arrowWrapper {
   position: relative;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  cursor: pointer;
-}
-[dir=ltr] .arrowWrapper {
   border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+  cursor: pointer;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=rtl] .arrowWrapper {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-[dir=ltr] .primaryFilledArw {
-  border-left: 1px solid var(--buttonSeparatorBorder);
-}
-[dir=rtl] .primaryFilledArw {
-    border-right: 1px solid var(--buttonSeparatorBorder);
+.primaryFilledArw {
+    border-left: 1px solid var(--buttonSeparatorBorder);
 }
 .small_arrowBox {
   width: var(--zd_size20);
@@ -128,9 +115,6 @@
 .iconClr {
   color: var(--buttonText);
 }
-[dir=ltr] .iconMrgn {
+.iconMrgn {
   margin-right: var(--zd_size6);
 }
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6);
-}

package/es/AlphabeticList/AlphabeticList.js

@@ -36,7 +36,8 @@ export default class AlphabeticList extends React.PureComponent {
       selectedCharacter,
       align,
       type,
-      i18nKeys
+      i18nKeys,
+      dataId
     } = this.props;
     let {
       allText = 'All',
@@ -52,18 +53,19 @@ export default class AlphabeticList extends React.PureComponent {
       dataId: "navigationDiv"
     }, /*#__PURE__*/React.createElement(Box, {
       tagName: "li",
-      className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' && style.selected}`,
-      dataId: "All_Navi"
+      className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,
+      dataId: `All_${dataId}`
     }, /*#__PURE__*/React.createElement("span", {
       onClick: this.handleSelectAll,
-      className: style.heading,
+      className: `${style.heading} ${style.letter}`,
       "data-title": allTitle
     }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItem, {
       id: letter,
       isActive: letter === selectedCharacter,
       onClick: this.handleSelect,
       text: letter,
-      key: letter
+      key: letter,
+      dataId: dataId
     })));
   }
 
@@ -76,12 +78,14 @@ AlphabeticList.propTypes = {
   i18nKeys: PropTypes.shape({
     allTitle: PropTypes.string,
     allText: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 AlphabeticList.defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataId: 'Navi'
 };
 AlphabeticList.docs = {
   componentGroup: 'Atom'
@@ -104,15 +108,18 @@ class AlphabeticListItem extends React.PureComponent {
   render() {
     let {
       isActive,
-      text
+      text,
+      dataId
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       tagName: "li",
       className: `${style.list} ${isActive ? style.selected : ''}`,
       onClick: this.handleClick,
-      dataId: `${text}_Navi`
-    }, /*#__PURE__*/React.createElement("span", null, text));
+      dataId: `${text}_${dataId}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.letter
+    }, text));
   }
 
 }
@@ -121,9 +128,11 @@ AlphabeticListItem.propTypes = {
   id: PropTypes.string,
   isActive: PropTypes.bool,
   onClick: PropTypes.func,
-  text: PropTypes.string
+  text: PropTypes.string,
+  dataId: PropTypes.string
 };
 AlphabeticListItem.defaultProps = {
   isActive: false,
-  text: ''
+  text: '',
+  dataId: 'Navi'
 };

package/es/AlphabeticList/AlphabeticList.module.css

@@ -7,23 +7,20 @@
   composes: varClass;
   composes: h100 from '~@zohodesk/components/lib/common/common.module.css';
   list-style: none;
-  pointer-events: initial;
   margin: 0;
   padding: 0;
+  pointer-events: initial;
 }
 .column .title {
   margin-bottom: var(--zd_size3);
 }
-[dir=ltr] .row .title {
+.row .title {
   margin-right: var(--zd_size3);
 }
-[dir=rtl] .row .title {
-  margin-left: var(--zd_size3);
-}
-.row .list > span {
+.row  .letter {
   padding: 0 var(--zd_size3);
 }
-.column .list > span {
+.column .letter {
   padding: var(--zd_size3) 0;
 }
 .heading {
@@ -32,15 +29,15 @@
 }
 .list {
   font-size: var(--zd_font_size11);
-  flex-basis: var(--zd_size10);
-  color: var(--textColor);
   text-align: center;
+  flex-basis: var(--zd_size12);
   cursor: pointer;
+  color: var(--textColor);
 }
 .title {
   flex-basis: var(--zd_size15);
 }
-.list > span {
+.letter {
   text-transform: uppercase;
   display: inline-block;
 }
@@ -53,5 +50,5 @@
 }
 .title {
   font-size: var(--zd_font_size11);
-  font-family: semibold;
+  font-family: var(--zd_semibold);
 }

package/es/Attachment/Attachment.module.css

@@ -1,8 +1,8 @@
 .attachment {
-  position: relative;
-  overflow: hidden;
   border: 1px solid var(--zdt_attachment_default_border);
   border-radius: 2px;
+  position: relative;
+  overflow: hidden;
 }
 .attachmentHover {
   cursor: pointer;
@@ -13,7 +13,8 @@
 .palette_transparent {
   background-color: var(--zdt_attachment_transparent_bg);
 }
-.attachmentHover:hover, .attachmentHover:hover .attachleft {
+.attachmentHover:hover,
+.attachmentHover:hover .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 .attachmentHover:hover .attachleft i {
@@ -34,12 +35,9 @@
   width: var(--zd_size145);
   height: var(--zd_size40);
 }
-[dir=ltr] .attachleft {
+.attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }
-[dir=rtl] .attachleft {
-  border-left: 1px solid var(--zdt_attachment_default_border);
-}
 .medium .attachleft {
   width: var(--zd_size50);
 }
@@ -47,13 +45,9 @@
   width: var(--zd_size40);
 }
 
-[dir=ltr] .medium .attachright {
+.medium .attachright {
   padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10);
 }
-
-[dir=rtl] .medium .attachright {
-  padding: var(--zd_size5) var(--zd_size10) var(--zd_size5) var(--zd_size25);
-}
 .small .attachright {
   padding: 0 var(--zd_size10) 0 var(--zd_size10);
 }
@@ -88,15 +82,10 @@
 .attachDownload {
   position: absolute;
   top: calc(var(--zd_size1) * -1);
-  display: none;
+  right: calc(var(--zd_size1) * -1);
   background-color: var(--zdt_attachment_download_bg);
   text-align: center;
-}
-[dir=ltr] .attachDownload {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .attachDownload {
-  left: calc(var(--zd_size1) * -1);
+  display: none;
 }
 .medium .attachDownload {
   height: var(--zd_size25);
@@ -124,9 +113,9 @@
 }
 
 .dot {
+  background-color: var(--zdt_dot_text);
   height: 2px;
   width: 2px;
-  background-color: var(--zdt_dot_text);
   border-radius: 50%;
   margin: 0 var(--zd_size6);
 }

package/es/ChannelIcon/ChannelIcon.module.css

@@ -14,16 +14,11 @@
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
   top: calc(var(--zd_size4) * -1);
+  right: calc(var(--zd_size1) * -1);
   height: var(--zd_size15);
   width: var(--zd_size15);
   background-color: var(--topIconBg);
 }
-[dir=ltr] .thread {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .thread {
-  left: calc(var(--zd_size1) * -1);
-}
 .threadBorder {
   border: 1px solid var(--topIconBorderColor);
 }
@@ -114,12 +109,11 @@
 }
 
 /* facebook */
-[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
+.facebook_incoming,
+.facebook_missed,
+.facebook_outgoing {
   right: var(--zd_size2);
 }
-[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2);
-}
 
 /* chat */
 .chat_incoming,
@@ -143,22 +137,24 @@
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: var(--zd_size1);
-}
-[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
   right: var(--zd_size1);
-}
-[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1);
+  top: var(--zd_size1);
 }
 
 /* draft */
-[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
+.email_draft,
+.facebook_draft,
+.twitter_draft,
+.forums_draft,
+.chat_draft,
+.offline_chat_draft,
+.online_chat_draft,
+.phone_draft,
+.web_draft,
+.customerportal_draft,
+.feedback_draft {
   left: var(--zd_size1);
 }
-[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1);
-}
 
 /* forward */
 .email_forward,
@@ -188,22 +184,17 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  bottom: var(--zd_size1);
-}
-[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
   left: var(--zd_size1);
-}
-[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1);
+  bottom: var(--zd_size1);
 }
 
 /* facebook_dm */
-[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
+.facebook_dm_default,
+.facebook_dm_incoming,
+.facebook_dm_outgoing,
+.facebook_dm_missed {
   right: var(--zd_size2);
 }
-[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2);
-}
 
 /*Topic Icon colors*/
 .topic_olive {

package/es/Drawer/Drawer.js

@@ -27,7 +27,8 @@ export class Header extends React.Component {
       flexible,
       getChildren,
       iconTitle,
-      isBoxIcon
+      isBoxIcon,
+      getTitleChildren
     } = this.props;
     return /*#__PURE__*/React.createElement(CardHeader, {
       customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
@@ -58,12 +59,17 @@ export class Header extends React.Component {
       size: iconSize,
       onClick: onIconClick,
       title: iconTitle
-    })) : null, title ? /*#__PURE__*/React.createElement(Box, {
-      className: style.title,
+    })) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
       flexible: flexible,
-      shrink: true,
-      "data-title": title
-    }, title) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, title ? /*#__PURE__*/React.createElement(Box, {
+      className: style.title,
+      "data-title": title,
+      shrink: true
+    }, title) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
       onClick: onClose,
       dataId: "closeButton",
       title: closeTitle,
@@ -92,7 +98,8 @@ Header.propTypes = {
   onIconClick: PropTypes.func,
   paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
   title: PropTypes.string,
-  isBoxIcon: PropTypes.bool
+  isBoxIcon: PropTypes.bool,
+  getTitleChildren: PropTypes.func
 };
 Header.defaultProps = {
   flexible: false,

package/es/Drawer/Drawer.module.css

@@ -1,20 +1,15 @@
 .container {
-  transition: width var(--zd_transition3);
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
   background-color: var(--zdt_drawer_default_bg);
+  transition: width var(--zd_transition3);
 }
 .isOverlay {
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-[dir=ltr] .isOverlay {
-  right: 0;
-}
-[dir=rtl] .isOverlay {
-  left: 0;
-}
 .columns {
   pointer-events: initial;
 }
@@ -26,29 +21,18 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
+  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
-[dir=ltr] .secondMobDrawer {
-  right: 0;
-}
-[dir=rtl] .secondMobDrawer {
-  left: 0;
-}
 .mobModal {
   position: absolute;
   top: 0;
-  bottom: 0;
-}
-[dir=ltr] .mobModal {
   right: 0;
+  bottom: 0;
   left: 0;
 }
-[dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
-}
 .xsmall {
   width: var(--zd_size360);
 }
@@ -88,64 +72,32 @@
   color: var( --zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
-[dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
-}
-[dir=ltr] .smallHeaderPadding {
+.smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallContentPadding {
+.smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-[dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .mediumHeaderPadding {
+.mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .mediumContentPadding {
+.mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-[dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
-}
-[dir=ltr] .largeHeaderPadding {
+.largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
-[dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .largeContentPadding {
+.largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
-[dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
-}
-[dir=ltr] .iconWrapper {
+.iconWrapper {
   margin-right: var(--zd_size10);
 }
-[dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
-}

package/es/ExternalLink/ExternalLink.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -24,10 +26,11 @@ export default class ExternalLink extends React.Component {
       children,
       rel,
       dataId,
-      onClick
+      onClick,
+      customProps
     } = this.props;
     const urlOutput = href && typeof href !== 'boolean' ? this.addHttp(String(href)) : 'javascript:void(0);';
-    return /*#__PURE__*/React.createElement("a", {
+    return /*#__PURE__*/React.createElement("a", _extends({
       href: urlOutput,
       target: target,
       className: `${style.link} ${className ? className : ''}`,
@@ -35,13 +38,14 @@ export default class ExternalLink extends React.Component {
       rel: rel,
       "data-id": dataId,
       onClick: onClick
-    }, children);
+    }, customProps), children);
   }
 
 }
 ExternalLink.defaultProps = {
   rel: 'noopener noreferrer',
-  target: '_blank'
+  target: '_blank',
+  customProps: {}
 };
 ExternalLink.propTypes = {
   children: PropTypes.node,
@@ -51,7 +55,8 @@ ExternalLink.propTypes = {
   rel: PropTypes.string,
   target: PropTypes.oneOf(['_blank', '_self']),
   title: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };
 
 if (false) {