@zohodesk/dot 1.0.0-beta.180 → 1.0.0-beta.184

package/README.md

@@ -2,6 +2,22 @@
 
 In this Library we Provide Some Basic Components to Build Your Application
 
+# 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

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/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) {

package/es/ExternalLink/__tests__/ExternalLink.spec.js

@@ -1,4 +1,3 @@
-import "core-js/modules/web.url.to-json";
 import React from 'react';
 import ExternalLink from '../ExternalLink';
 import renderer from 'react-test-renderer';

package/es/Link/Link.js

@@ -57,7 +57,8 @@ export default class Link extends React.Component {
       title,
       download,
       rel,
-      dataId
+      dataId,
+      customProps
     } = this.props;
     let {
       isLink,
@@ -86,14 +87,15 @@ export default class Link extends React.Component {
       "data-id": dataId
     }, others, {
       onClick: this.onCallBack.bind(this, urlOutput, href)
-    }), children);
+    }, customProps), children);
   }
 
 }
 Link.contextType = LinkContext;
 Link.defaultProps = {
   rel: 'noopener noreferrer',
-  hasReload: false
+  hasReload: false,
+  customProps: {}
 };
 Link.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -105,7 +107,8 @@ Link.propTypes = {
   target: PropTypes.oneOf(['_blank', '_self']),
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/alert/AlertLookup/AlertLookup.js

@@ -30,6 +30,10 @@ export default class AlertLookup extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.documentKeydownHandler);
+  }
+
   documentKeydownHandler(e = {}) {
     let {
       onSubmitClick,

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -152,7 +152,13 @@ export class ToggleDropDown extends Component {
 
     if (prevProps.isPopupReady !== isPopupReady) {
       setTimeout(() => {
-        isPopupReady ? isSearch ? this.searchInput.focus() : this.hiddenInput.focus() : this.hiddenInput.focus();
+        isPopupReady ? isSearch ? this.searchInput.focus({
+          preventScroll: false
+        }) : this.hiddenInput.focus({
+          preventScroll: false
+        }) : this.hiddenInput.focus({
+          preventScroll: false
+        });
       }, 10);
     }
 
@@ -359,9 +365,13 @@ export class ToggleDropDown extends Component {
           if (!preventPopupClose) {
             togglePopup(e, boxPosition);
           } else if (isSearch) {
-            this.searchInput.focus();
+            this.searchInput.focus({
+              preventScroll: false
+            });
           } else {
-            this.hiddenInput.focus();
+            this.hiddenInput.focus({
+              preventScroll: false
+            });
           }
 
           break;

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -190,7 +190,8 @@ export default class TagsMultiSelect extends React.Component {
       isPadding: false,
       customClass: {
         customDropBoxWrap: style.dropdown
-      }
+      },
+      dataId: `${dataId}_dropbox`
     }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.viewpopNew
@@ -216,7 +217,8 @@ export default class TagsMultiSelect extends React.Component {
         needTick: true,
         highlight: selectSearchIndex === index,
         getRef: this.getSelectedItemRef,
-        isDisabled: listDisabled
+        isDisabled: listDisabled,
+        dataId: dataId
       }, isNew ? /*#__PURE__*/React.createElement(Container, {
         alignBox: "row",
         align: "vertical"
@@ -225,10 +227,12 @@ export default class TagsMultiSelect extends React.Component {
       }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
         shrink: true,
         "data-title": name,
-        className: `${style.dotted} ${style.newTagText} `
+        className: `${style.dotted} ${style.newTagText} `,
+        dataId: `${dataId}_new_tag_text`
       }, name)) : null));
     })) : /*#__PURE__*/React.createElement(Box, {
-      flexible: true
+      flexible: true,
+      dataId: `${dataId}_empty`
     }, /*#__PURE__*/React.createElement(Container, {
       className: style.searchEmpty
     }, /*#__PURE__*/React.createElement(CommonEmptyState, {
@@ -282,7 +286,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId: ''
 };
 
 if (false) {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -1,5 +1,3 @@
-import "core-js/modules/es.string.replace";
-
 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); }
 
 import React, { useState, useEffect } from 'react';

package/es/list/Icons/AddNewIcon.js

@@ -18,7 +18,7 @@ export default class AddNewIcon extends React.Component {
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-SE-addTickets",
-      iconClass: iconClass
+      iconClass: iconClass ? iconClass : ''
     }));
   }
 

package/es/list/Icons/CompleteIcon.js

@@ -19,7 +19,7 @@ export default class CompleteIcon extends React.Component {
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-checkbox",
-      iconClass: iconClass,
+      iconClass: iconClass ? iconClass : '',
       size: iconSize
     }));
   }

package/es/list/Icons/DeleteIcon.js

@@ -19,7 +19,7 @@ export default class DeleteComponent extends React.Component {
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
-      iconClass: iconClass,
+      iconClass: iconClass ? iconClass : '',
       size: iconSize
     }));
   }

package/es/list/Icons/EditIcon.js

@@ -19,7 +19,7 @@ export default class EditIcon extends React.Component {
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-edit",
-      iconClass: iconClass,
+      iconClass: iconClass ? iconClass : '',
       size: iconSize
     }));
   }

package/es/list/Icons/Icons.module.css

@@ -4,7 +4,8 @@
 }
 .iconStyle {
   color: var(--zdt_icons_default);
-  padding: 0 var(--zd_size9);
+  width: var(--zd_size33);
+  padding: 0 var(--zd_size8);
   cursor: pointer;
 }
 .blueHover:hover {

package/es/list/Icons/ReadUnreadIcon.js

@@ -8,6 +8,7 @@ export default class ReadUnreadIcon extends React.Component {
       onClick,
       dataId,
       dataTitle,
+      iconClassName,
       iconClass,
       className,
       isRead,
@@ -19,9 +20,9 @@ export default class ReadUnreadIcon extends React.Component {
       "data-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
-      name: isRead ? 'ZD-TK-read' : 'ZD-TK-unread',
+      name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
       size: iconSize,
-      iconClass: iconClass
+      iconClass: `${iconClassName ? iconClassName : ''} ${iconClass ? iconClass : ''}`
     }));
   }
 
@@ -33,6 +34,7 @@ ReadUnreadIcon.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
+  iconClassName: PropTypes.string,
   iconClass: PropTypes.string,
   onClick: PropTypes.func,
   isRead: PropTypes.bool,

package/es/list/Icons/SmartIcon.js

@@ -18,7 +18,7 @@ export default class SmartIcon extends Component {
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-peek",
-      iconClass: iconClass
+      iconClass: iconClass ? iconClass : ''
     }));
   }
 

package/es/list/SecondaryText/AccountName.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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -26,8 +28,14 @@ export default class AccountName extends Component {
       fontWeight,
       secondaryAccountHref,
       secondaryAccountClick,
-      secondaryAccountText
+      secondaryAccountText,
+      customProps
     } = this.props;
+    let {
+      LinkProps = {},
+      TextProps = {},
+      SecondaryTextProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "baseline",
@@ -44,24 +52,24 @@ export default class AccountName extends Component {
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.primaryAccountName,
       shrink: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       urlName: urlName,
       urlData: urlData,
       onClick: onClick,
       dataId: `${dataId}_link`,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
-    }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, secondaryAccountText))))));
+    }, SecondaryTextProps), secondaryAccountText))))));
   }
 
 }
@@ -79,12 +87,18 @@ AccountName.propTypes = {
   urlName: PropTypes.string,
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
-  secondaryAccountText: PropTypes.string
+  secondaryAccountText: PropTypes.string,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object,
+    SecondaryTextProps: PropTypes.object
+  })
 };
 AccountName.defaultProps = {
   isLink: true,
   dataId: 'accountName',
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/ContactName.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); }
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -21,7 +23,8 @@ export default class ContactName extends Component {
       href,
       notAccessible = false,
       fontWeight,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
     let {
       sentimentTitles = {
@@ -32,6 +35,10 @@ export default class ContactName extends Component {
       paidTitle = 'Paid User'
     } = i18nKeys;
     let sentimentDataTitle = sentimentTitles[sentimentType];
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "baseline",
@@ -45,7 +52,7 @@ export default class ContactName extends Component {
       iconClass: style.icon
     })), /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
@@ -53,12 +60,12 @@ export default class ContactName extends Component {
       title: dataTitle,
       dataId: `${dataId}_link`,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle
-    }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
     })));
@@ -87,6 +94,10 @@ ContactName.propTypes = {
       neutral: PropTypes.string
     }),
     paidTitle: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
   })
 };
 ContactName.defaultProps = {
@@ -94,7 +105,8 @@ ContactName.defaultProps = {
   isLink: true,
   dataId: 'contactName',
   fontWeight: 'regular',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/Email.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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -20,21 +22,26 @@ export default class Email extends Component {
       href,
       isLink,
       target,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       title: title,
       urlData: urlData,
       urlName: urlName,
       target: target,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText}  ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title
-    }, text));
+    }, TextProps), text));
   }
 
 }
@@ -47,11 +54,16 @@ Email.propTypes = {
   text: PropTypes.string,
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
+  })
 };
 Email.defaultProps = {
   isLink: true,
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/PhoneNumber.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); }
+
 /* eslint-disable react/forbid-component-props */
 
 /**** Libraries ****/
@@ -22,9 +24,14 @@ export default class PhoneNumber extends Component {
       isLink,
       target,
       hasReload,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
+    let {
+      LinkProps = {},
+      TextProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       href: href,
       title: title,
       urlData: urlData,
@@ -33,12 +40,12 @@ export default class PhoneNumber extends Component {
       target: target,
       hasReload: hasReload,
       className: style.link
-    }, /*#__PURE__*/React.createElement("div", {
+    }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.phoneNumber} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title
-    }, text));
+    }, TextProps), text));
   }
 
 }
@@ -53,12 +60,17 @@ PhoneNumber.propTypes = {
   text: PropTypes.string,
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.shape({
+    LinkProps: PropTypes.object,
+    TextProps: PropTypes.object
+  })
 };
 PhoneNumber.defaultProps = {
   isLink: true,
   hasReload: false,
-  fontWeight: 'regular'
+  fontWeight: 'regular',
+  customProps: {}
 };
 
 if (false) {

package/es/list/SecondaryText/TicketId.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); }
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Link from '../../Link/Link';
@@ -18,20 +20,25 @@ export default class TicketId extends Component {
       url,
       target,
       urlName,
-      urlData
+      urlData,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    let {
+      LinkProps = {},
+      TicketIdProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
       "data-title": dataTitle,
       onClick: !isLink && onClick
-    }, isLink ? /*#__PURE__*/React.createElement(Link, {
+    }, TicketIdProps), isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       urlData: urlData,
       href: url,
       target: target,
       onClick: onClick
-    }, text) : text);
+    }, LinkProps), text) : text);
   }
 
 }
@@ -45,10 +52,15 @@ TicketId.propTypes = {
   text: PropTypes.string,
   url: PropTypes.string,
   urlData: PropTypes.string,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps: PropTypes.shape({
+    TicketIdProps: PropTypes.object,
+    LinkProps: PropTypes.object
+  })
 };
 TicketId.defaultProps = {
-  dataId: 'ticketId'
+  dataId: 'ticketId',
+  customProps: {}
 };
 
 if (false) {