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

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -124,9 +124,9 @@ export class ToggleDropDown extends Component {
       setTimeout(() => {
         isPopupReady
           ? isSearch
-            ? this.searchInput.focus()
-            : this.hiddenInput.focus()
-          : this.hiddenInput.focus();
+            ? this.searchInput.focus({preventScroll:false})
+            : this.hiddenInput.focus({preventScroll:false})
+          : this.hiddenInput.focus({preventScroll:false});
       }, 10);
     }
     const optionsArr = this.getOptionsArray();
@@ -298,10 +298,10 @@ export class ToggleDropDown extends Component {
             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/src/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -203,6 +203,7 @@ export default class TagsMultiSelect extends React.Component {
             customClass={{
               customDropBoxWrap: style.dropdown
             }}
+            dataId={`${dataId}_dropbox`}
           >
             {isTagListLoading ? (
               <Container align='both' className={style.viewpopNew}>
@@ -236,6 +237,7 @@ export default class TagsMultiSelect extends React.Component {
                               highlight={selectSearchIndex === index}
                               getRef={this.getSelectedItemRef}
                               isDisabled={listDisabled}
+                              dataId={dataId}
                             >
                               {isNew ? (
                                 <Container alignBox='row' align='vertical'>
@@ -246,6 +248,7 @@ export default class TagsMultiSelect extends React.Component {
                                     shrink
                                     data-title={name}
                                     className={`${style.dotted} ${style.newTagText} `}
+                                    dataId={`${dataId}_new_tag_text`}
                                   >
                                     {name}
                                   </Box>
@@ -257,7 +260,7 @@ export default class TagsMultiSelect extends React.Component {
                       })}
                     </Box>
                   ) : (
-                    <Box flexible>
+                    <Box flexible  dataId={`${dataId}_empty`}>
                       <Container className={style.searchEmpty}>
                         <CommonEmptyState
                           title={i18nKeys.emptyTitleText}
@@ -320,7 +323,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId:''
 };
 
 if (__DOCS__) {

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/Icons.module.css

@@ -3,9 +3,10 @@
   composes: inlineFlex from '../listCommon.module.css';
 }
 .iconStyle {
-  padding: 0 var(--zd_size9);
-  cursor: pointer;
   color: var(--zdt_icons_default);
+  padding: 0 var(--zd_size8);
+  width: var(--zd_size33);
+  cursor: pointer;
 }
 .blueHover:hover {
   color: var(--zdt_icons_hover_blue);

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 = {

package/src/lookup/Lookup/Lookup.js

@@ -25,6 +25,9 @@ export default class Lookup extends Component {
         : document.removeEventListener('keydown', this.handleKeyDown);
     }
   }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
 
   handleKeyDown(e) {
     const { onKeyDown } = this.props;

package/src/version2/lookup/AlertLookup/AlertLookup.js

@@ -50,6 +50,9 @@ export default class AlertLookup extends Component {
         : document.removeEventListener('keydown', this.documentKeydownHandler);
     }
   }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.documentKeydownHandler);
+  }
 
   documentKeydownHandler(e = {}) {
     let { onSubmitClick, onCancelClick, isActive } = this.props;