@zohodesk/dot 1.0.0-beta.179 → 1.0.0-beta.182

package/src/ExternalLink/ExternalLink.js

@@ -25,12 +25,14 @@ 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 (
       <a
         href={urlOutput}
@@ -40,6 +42,7 @@ export default class ExternalLink extends React.Component {
         rel={rel}
         data-id={dataId}
         onClick={onClick}
+        {...customProps}
       >
         {children}
       </a>
@@ -49,7 +52,8 @@ export default class ExternalLink extends React.Component {
 
 ExternalLink.defaultProps = {
   rel: 'noopener noreferrer',
-  target: '_blank'
+  target: '_blank',
+  customProps:{}
 };
 
 ExternalLink.propTypes = {
@@ -60,7 +64,8 @@ ExternalLink.propTypes = {
   rel: PropTypes.string,
   target: PropTypes.oneOf(['_blank', '_self']),
   title: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  customProps:PropTypes.object
 };
 
 if (__DOCS__) {

package/src/Link/Link.js

@@ -44,7 +44,8 @@ export default class Link extends React.Component {
       title,
       download,
       rel,
-      dataId
+      dataId,
+      customProps
     } = this.props;
     let { isLink, constructURL } = this.context.options;
     let urlOutput = href ? href : constructURL(urlName, urlData);
@@ -84,6 +85,7 @@ export default class Link extends React.Component {
         data-id={dataId}
         {...others}
         onClick={this.onCallBack.bind(this, urlOutput, href)}
+        {...customProps}
       >
         {children}
       </a>
@@ -95,7 +97,8 @@ Link.contextType = LinkContext;
 
 Link.defaultProps = {
   rel: 'noopener noreferrer',
-  hasReload: false
+  hasReload: false,
+  customProps:{}
 };
 Link.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -107,7 +110,8 @@ Link.propTypes = {
   target: PropTypes.oneOf(['_blank', '_self']),
   title: PropTypes.string,
   urlData: PropTypes.object,
-  urlName: PropTypes.string
+  urlName: PropTypes.string,
+  customProps:PropTypes.object
 };
 
 if (__DOCS__) {

package/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -25,9 +25,14 @@ export default class TagsMultiSelect extends React.Component {
   }
 
   onScroll() {
-    let { onScroll, name, noMoreData } = this.props;
+    let { onScroll, name, noMoreData, searchList } = this.props;
+    let {
+      containerRef
+    } = this;
     if (findScrollEnd(this.containerRef) && !noMoreData) {
       onScroll(name);
+      let selectItemRef = this[`selectedList_${searchList.length-1}`];
+      scrollTo(containerRef, selectItemRef);
     }
   }
 
@@ -52,9 +57,11 @@ export default class TagsMultiSelect extends React.Component {
         }
       }, 300);
     }
-    let selectItemRef = this[`selectedList_${selectSearchIndex}`];
-    let { containerRef } = this;
-    scrollTo(containerRef, selectItemRef);
+    if(selectSearchIndex != prevProps.selectSearchIndex){
+      let selectItemRef = this[`selectedList_${selectSearchIndex}`];
+      let { containerRef } = this;
+      scrollTo(containerRef, selectItemRef);
+    }
   }
 
   emptySearchSVG() {

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -110,7 +110,7 @@ const TagsMultiSelectField = props => {
     } else if (keyCode === 40) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
         let newIndex =
-          prevSelectedSuggestionIndex === options.length - 1
+          prevSelectedSuggestionIndex >= options.length - 1
             ? 0
             : prevSelectedSuggestionIndex + 1;
         return newIndex;
@@ -118,7 +118,7 @@ const TagsMultiSelectField = props => {
     } else if (keyCode === 38) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
         let newIndex =
-          prevSelectedSuggestionIndex <= 0
+          (prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1)
             ? options.length - 1
             : prevSelectedSuggestionIndex - 1;
         return newIndex;

package/src/list/Icons/AddNewIcon.js

@@ -15,7 +15,7 @@ export default class AddNewIcon extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-SE-addTickets' iconClass={iconClass} />
+        <Icon name='ZD-SE-addTickets' iconClass={iconClass?iconClass:''} />
       </span>
     );
   }

package/src/list/Icons/CompleteIcon.js

@@ -15,7 +15,7 @@ export default class CompleteIcon extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-GN-checkbox' iconClass={iconClass} size={iconSize} />
+        <Icon name='ZD-GN-checkbox' iconClass={iconClass?iconClass:''} size={iconSize} />
       </span>
     );
   }

package/src/list/Icons/DeleteIcon.js

@@ -16,7 +16,7 @@ export default class DeleteComponent extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-GN-delete' iconClass={iconClass} size={iconSize} />
+        <Icon name='ZD-GN-delete' iconClass={iconClass?iconClass:''} size={iconSize} />
       </span>
     );
   }

package/src/list/Icons/EditIcon.js

@@ -16,7 +16,7 @@ export default class EditIcon extends React.Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-GN-edit' iconClass={iconClass} size={iconSize} />
+        <Icon name='ZD-GN-edit' iconClass={iconClass?iconClass:''} size={iconSize} />
       </span>
     );
   }

package/src/list/Icons/ReadUnreadIcon.js

@@ -5,7 +5,7 @@ import style from './Icons.module.css';
 
 export default class ReadUnreadIcon extends React.Component {
   render() {
-    let { onClick, dataId, dataTitle, iconClass, className, isRead, iconSize } =
+    let { onClick, dataId, dataTitle, iconClassName, iconClass, className, isRead, iconSize } =
       this.props;
     return (
       <span
@@ -17,9 +17,9 @@ export default class ReadUnreadIcon extends React.Component {
         data-title={dataTitle}
       >
         <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:''}`}
         />
       </span>
     );
@@ -34,7 +34,8 @@ ReadUnreadIcon.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  iconClass: PropTypes.string,
+  iconClassName: PropTypes.string,
+  iconClass:PropTypes.string,
   onClick: PropTypes.func,
   isRead: PropTypes.bool,
   iconSize: PropTypes.string

package/src/list/Icons/SmartIcon.js

@@ -15,7 +15,7 @@ export default class SmartIcon extends Component {
         data-id={dataId}
         data-title={dataTitle}
       >
-        <Icon name='ZD-TK-peek' iconClass={iconClass} />
+        <Icon name='ZD-TK-peek' iconClass={iconClass?iconClass:''} />
       </span>
     );
   }

package/src/list/SecondaryText/AccountName.js

@@ -26,8 +26,10 @@ export default class AccountName extends Component {
       fontWeight,
       secondaryAccountHref,
       secondaryAccountClick,
-      secondaryAccountText
+      secondaryAccountText,
+      customProps
     } = this.props;
+    let {LinkProps={}, TextProps={},SecondaryTextProps={}}=customProps;
     return (
       <Container
         alignBox='row'
@@ -52,7 +54,7 @@ export default class AccountName extends Component {
                   onClick={onClick}
                   dataId={`${dataId}_link`}
                   className={style.link}
-                  
+                  {...LinkProps}
                 >
                  <div className={`${style.textStyle} ${
                     style[`font_${fontWeight}`]
@@ -65,6 +67,7 @@ export default class AccountName extends Component {
                 } ${
                   className ? className : ''
                 } ${notAccessible ? style.disable : ''}`}
+                {...TextProps}
               >
                 {text}
               </div>
@@ -80,7 +83,8 @@ export default class AccountName extends Component {
                     >
                       <div className={`${style.textStyle} ${
                         style[`font_${fontWeight}`]
-                      } ${className ? className : ''}`}>{secondaryAccountText}</div>
+                      } ${className ? className : ''}`} {...SecondaryTextProps}>
+                        {secondaryAccountText}</div>
                     </Link>
                   </Box>
                 )
@@ -106,11 +110,17 @@ AccountName.propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object,
+    SecondaryTextProps:PropTypes.object
+  })
 };
 AccountName.defaultProps = {
   isLink: true,
   dataId: 'accountName',
   fontWeight: 'regular',
+  customProps:{}
 };
 if (__DOCS__) {
   AccountName.docs = {

package/src/list/SecondaryText/ContactName.js

@@ -22,7 +22,8 @@ export default class ContactName extends Component {
       href,
       notAccessible = false,
       fontWeight,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
     let {
       sentimentTitles = {
@@ -33,6 +34,7 @@ export default class ContactName extends Component {
       paidTitle = 'Paid User'
     } = i18nKeys;
     let sentimentDataTitle = sentimentTitles[sentimentType];
+    let {LinkProps={}, TextProps={}}=customProps;
     return (
       <Container
         alignBox='row'
@@ -55,6 +57,7 @@ export default class ContactName extends Component {
               title={dataTitle}
               dataId={`${dataId}_link`}
               className={style.link}
+              {...LinkProps}
             >
               <div
                 className={`${style.textStyle} ${style[`font_${fontWeight}`]} ${
@@ -72,6 +75,7 @@ export default class ContactName extends Component {
                 notAccessible ? style.disable : ''
               }`}
               data-title={dataTitle}
+              {...TextProps}
             >
               {text}
             </div>
@@ -111,6 +115,10 @@ ContactName.propTypes = {
       neutral: PropTypes.string
     }),
     paidTitle: PropTypes.string
+  }),
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
   })
 };
 ContactName.defaultProps = {
@@ -118,7 +126,8 @@ ContactName.defaultProps = {
   isLink: true,
   dataId: 'contactName',
   fontWeight: 'regular',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps:{}
 };
 if (__DOCS__) {
   ContactName.docs = {

package/src/list/SecondaryText/Email.js

@@ -20,8 +20,10 @@ export default class Email extends Component {
       href,
       isLink,
       target,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
+    let {LinkProps={},TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -32,6 +34,7 @@ export default class Email extends Component {
             urlName={urlName}
             target={target}
             className={style.link}
+            {...LinkProps}
           >
             <div className={`${style.textStyle} ${
               style[`font_${fontWeight}`]
@@ -43,6 +46,7 @@ export default class Email extends Component {
               style[`font_${fontWeight}`]
             } ${className ? className : ''}`}
             data-title={title}
+            {...TextProps}
           >
             {text}
           </div>
@@ -61,12 +65,17 @@ 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 (__DOCS__) {

package/src/list/SecondaryText/PhoneNumber.js

@@ -22,8 +22,10 @@ export default class PhoneNumber extends Component {
       isLink,
       target,
       hasReload,
-      fontWeight
+      fontWeight,
+      customProps
     } = this.props;
+    let {LinkProps={}, TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -36,6 +38,7 @@ export default class PhoneNumber extends Component {
             target={target}
             hasReload={hasReload}
             className={style.link}
+            {...LinkProps}
           >
             <div className={`${style.phoneNumber} ${
               style[`font_${fontWeight}`]
@@ -47,6 +50,7 @@ export default class PhoneNumber extends Component {
               style[`font_${fontWeight}`]
             } ${className ? className : ''}`}
             data-title={title}
+            {...TextProps}
           >
             {text}
           </div>
@@ -67,13 +71,18 @@ 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 (__DOCS__) {

package/src/list/SecondaryText/TicketId.js

@@ -18,8 +18,10 @@ export default class TicketId extends Component {
       url,
       target,
       urlName,
-      urlData
+      urlData,
+      customProps
     } = this.props;
+    let {LinkProps={},TicketIdProps={}}=customProps;
     return (
       <div
         className={`${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${
@@ -28,6 +30,7 @@ export default class TicketId extends Component {
         data-id={dataId}
         data-title={dataTitle}
         onClick={!isLink && onClick}
+        {...TicketIdProps}
       >
         {isLink ? (
           <Link
@@ -36,6 +39,7 @@ export default class TicketId extends Component {
             href={url}
             target={target}
             onClick={onClick}
+            {...LinkProps}
           >
             {text}
           </Link>
@@ -56,10 +60,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 (__DOCS__) {
   TicketId.docs = {

package/src/list/Subject/Subject.js

@@ -21,8 +21,10 @@ export default class Subject extends Component {
       fontWeight,
       className,
       isDotted,
-      children
+      children,
+      customProps
     } = this.props;
+    let {LinkProps={},TextProps={}}=customProps;
     return (
       <React.Fragment>
         {isLink ? (
@@ -35,7 +37,7 @@ export default class Subject extends Component {
             dataId={dataId}
             title={text}
             target={target}
-            
+            {...LinkProps}
           >
             {children? children:text}
           </Link>
@@ -44,6 +46,7 @@ export default class Subject extends Component {
             className={`${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${  fontWeight}`]}`}
             data-title={text}
             data-id={dataId}
+            {...TextProps}
           >
             {text}
           </span>
@@ -64,13 +67,18 @@ Subject.propTypes = {
   urlData: PropTypes.object,
   urlName: PropTypes.string,
   isDotted: PropTypes.bool,
-  children:PropTypes.node
+  children:PropTypes.node,
+  customProps:PropTypes.shape({
+    LinkProps:PropTypes.object,
+    TextProps:PropTypes.object
+  })
 };
 Subject.defaultProps = {
   isLink: false,
   fontWeight: 'regular',
   className: '',
-  isDotted: true
+  isDotted: true,
+  customProps:{}
 };
 if (__DOCS__) {
   Subject.docs = {