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

package/src/AlphabeticList/AlphabeticList.module.css

@@ -17,10 +17,10 @@
 .row .title {
   margin-right: var(--zd_size3);
 }
-.row .list > span {
+.row  .letter {
   padding: 0 var(--zd_size3);
 }
-.column .list > span {
+.column .letter {
   padding: var(--zd_size3) 0;
 }
 .heading {
@@ -30,14 +30,14 @@
 .list {
   font-size: var(--zd_font_size11);
   text-align: center;
-  flex-basis: var(--zd_size10);
+  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;
 }
@@ -50,5 +50,5 @@
 }
 .title {
   font-size: var(--zd_font_size11);
-  font-family: semibold;
+  font-family: var(--zd_semibold);
 }

package/src/Drawer/Drawer.js

@@ -30,8 +30,10 @@ export class Header extends React.Component {
       flexible,
       getChildren,
       iconTitle,
-      isBoxIcon
+      isBoxIcon,
+      getTitleChildren
     } = this.props;
+
     return (
       <CardHeader
         customClass={`${style.header} ${style[`${paddingSize}HeaderPadding`]} ${
@@ -68,14 +70,21 @@ export class Header extends React.Component {
                   )}
                 </Box>
               ) : null}
-              {title ? (
+              {title || getTitleChildren ? (
                 <Box
-                  className={style.title}
                   flexible={flexible}
                   shrink
-                  data-title={title}
                 >
-                  {title}
+                  <Container alignBox='row' align='vertical'>
+                    {title?<Box
+                      className={style.title}
+                      data-title={title}
+                      shrink
+                    >
+                      {title}
+                    </Box>:null}
+                    {getTitleChildren?<Box>{getTitleChildren()}</Box>:null}
+                  </Container>
                 </Box>
               ) : null}
               {children ? <Box>{children}</Box> : null}
@@ -118,7 +127,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/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/IconButton/IconButton.js

@@ -137,7 +137,7 @@ IconButton.propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   eleRef: PropTypes.func,
-  hoverType: PropTypes.oneOf('default', 'border', 'bg'),
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
   iconClass: PropTypes.string,
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
@@ -148,7 +148,7 @@ IconButton.propTypes = {
   onClick: PropTypes.func,
   onMouseDown: PropTypes.func,
   onMouseOver: PropTypes.func,
-  palette: PropTypes.oneOf('primary', 'primaryFilled', 'default'),
+  palette: PropTypes.oneOf(['primary', 'primaryFilled', 'default']),
   title: PropTypes.string,
   tourId: PropTypes.string,
   isNeedEffect: PropTypes.bool,

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,10 +97,11 @@ Link.contextType = LinkContext;
 
 Link.defaultProps = {
   rel: 'noopener noreferrer',
-  hasReload: false
+  hasReload: false,
+  customProps:{}
 };
 Link.propTypes = {
-  children: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   className: PropTypes.string,
   dataId: PropTypes.string,
   hasReload: PropTypes.bool,
@@ -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/Message/Message.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
 import AutoClose from '../actions/AutoClose';
 import style from './Message.module.css';
-import { HTMLPurifier } from '@zoho/SecurityJS';
+
 
 export default class Message extends React.Component {
   constructor(props) {
@@ -87,7 +87,7 @@ export function MessageUI(props) {
           onClick={onClick}
           data-id='infoMessage'
           dangerouslySetInnerHTML={{
-            __html: HTMLPurifier.sanitize(message)
+            __html: message
           }}
         />
 

package/src/Message/docs/Message__default.docs.js

@@ -39,7 +39,6 @@ export default class Message__default extends React.Component {
             message='The status has been successfully updated <h1>asdf</h1>'
             showMessage
             hideMessage={() => { }}
-            htmlText={'<h1>H1</h1>'}
           />
         </div>
       </div>

package/src/alert/AlertLookup/AlertLookup.js

@@ -27,6 +27,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;

package/src/avatar/AvatarIcon/AvatarIcon.js

@@ -57,7 +57,7 @@ AvatarIcon.defaultProps = {
   isIconBold: false,
   iconClass: '',
   className: '',
-  iconColor: '',
+  iconColor: 'default',
   borderOnActive: false,
   borderOnHover: false,
   customProps:{}

package/src/avatar/AvatarStatus/AvatarStatus.js

@@ -69,7 +69,7 @@ AvatarStatus.propTypes = {
   className: PropTypes.string,
   customTextClass: PropTypes.string,
   dataId: PropTypes.string,
-  initial: PropTypes.initial,
+  initial: PropTypes.string,
   name: PropTypes.string,
   needBorder: PropTypes.bool,
   needTitle: PropTypes.bool,

package/src/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -45,6 +45,7 @@ export class ToggleDropDown extends Component {
     this.getOptionsArray = this.getOptionsArray.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
+    this.getSelectedIndex = this.getSelectedIndex.bind(this);
   }
 
   emptySearchSVG() {
@@ -64,7 +65,13 @@ export class ToggleDropDown extends Component {
   }
 
   handleTogglePopup(e) {
-    const { togglePopup, boxPosition, onSelectLabel, isPopupOpen, removeClose } = this.props;
+    const {
+      togglePopup,
+      boxPosition,
+      onSelectLabel,
+      isPopupOpen,
+      removeClose
+    } = this.props;
     removeClose && removeClose(e);
     !isPopupOpen && onSelectLabel && onSelectLabel(e);
     togglePopup(e, boxPosition);
@@ -123,9 +130,9 @@ export class ToggleDropDown extends Component {
       setTimeout(() => {
         isPopupReady
           ? isSearch
-            ? this.searchInput.focus()
-            : this.hiddenInput.focus()
-          : this.hiddenInput.focus();
+            ? this.searchInput.focus({ preventScroll: true })
+            : this.hiddenInput.focus({ preventScroll: true })
+          : this.hiddenInput.focus({ preventScroll: true });
       }, 10);
     }
     const optionsArr = this.getOptionsArray();
@@ -156,26 +163,22 @@ export class ToggleDropDown extends Component {
       } else {
         onDropDownClose && onDropDownClose();
       }
+      this.getSelectedIndex(optionsArr);
     }
   }
 
   handleFilterSuggestions(searchValue) {
-    const {
-      options,
-      keyName,
-      isGroupDropDown,
-      groupOptionsKey,
-      groupNameKey
-    } = this.props;
+    const { options, keyName, isGroupDropDown, groupOptionsKey, groupNameKey } =
+      this.props;
     searchValue = searchValue.trim().toLowerCase();
     let result = [];
     if (isGroupDropDown) {
       const filteredGroups = [];
-      options.map((group) => {
+      options.map(group => {
         const { needDivider } = group;
         const name = group[groupNameKey];
         const groupOptions = group[groupOptionsKey];
-        const datas = groupOptions.filter((list) => {
+        const datas = groupOptions.filter(list => {
           const value = list[keyName];
           return value.toLowerCase().includes(searchValue);
         });
@@ -198,7 +201,7 @@ export class ToggleDropDown extends Component {
       if (filteredOptions.length) {
         // to avoid more than one dividers consecutively comes as one by one
         let needDividerCount = 0;
-        const orderedOptions = filteredOptions.filter((item) => {
+        const orderedOptions = filteredOptions.filter(item => {
           if (item.needDivider && needDividerCount === 0) {
             needDividerCount++;
             return true;
@@ -238,7 +241,7 @@ export class ToggleDropDown extends Component {
         Array.prototype.push.apply(optionsArr, groupOptions);
       }
     } else {
-      optionsArr = options.filter((item) => !item.needDivider);
+      optionsArr = options.filter(item => !item.needDivider);
     }
     return optionsArr;
   }
@@ -261,7 +264,11 @@ export class ToggleDropDown extends Component {
       preventPopupClose,
       isSearch
     } = this.props;
-    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+    if (
+      isPopupReady &&
+      (keyCode === 38 || keyCode === 40) &&
+      e.preventDefault
+    ) {
       e.preventDefault(); //prevent body scroll
     }
     if (isPopupReady) {
@@ -292,30 +299,38 @@ export class ToggleDropDown extends Component {
         case 13:
           const selectedId = optionsArr[selectedIndex][idName] || '';
           onClick && onClick(selectedId, optionsArr[selectedIndex]);
-          if(!preventPopupClose) {
+          if (!preventPopupClose) {
             togglePopup(e, boxPosition);
-          }
-          else if(isSearch) {
-            this.searchInput.focus();
-          }
-          else {
-            this.hiddenInput.focus();
+          } else if (isSearch) {
+            this.searchInput.focus({ preventScroll: true });
+          } else {
+            this.hiddenInput.focus({ preventScroll: true });
           }
           break;
       }
     } else {
       if (keyCode === 13 || keyCode === 40) {
         togglePopup(e, boxPosition);
-        for (let i = 0; i < optionsArr.length; i++) {
-          const selectedValue = optionsArr[i][keyName];
-          if (value === selectedValue) {
-            this.setState({
-              selectedIndex: i
-            });
-            break;
-          }
+      }
+    }
+  }
+
+  getSelectedIndex(optionsArr) {
+    const { selectedId, idName } = this.props;
+    if (selectedId) {
+      for (let i = 0; i < optionsArr.length; i++) {
+        const indexId = optionsArr[i][idName];
+        if (selectedId === indexId) {
+          this.setState({
+            selectedIndex: i
+          });
+          break;
         }
       }
+    } else {
+      this.setState({
+        selectedIndex: -1
+      });
     }
   }
 
@@ -426,7 +441,13 @@ export class ToggleDropDown extends Component {
       getFooter,
       customProps
     } = this.props;
-    let {ToggleDropDownProps={},DropBoxProps={},TextBoxIconProps={},ListItemWithIconProps={},ListItemProps={}}=customProps;
+    let {
+      ToggleDropDownProps = {},
+      DropBoxProps = {},
+      TextBoxIconProps = {},
+      ListItemWithIconProps = {},
+      ListItemProps = {}
+    } = customProps;
     const isPopupOpen = needExternalPopupState
       ? isPopupActive && isOpen
       : isOpen;
@@ -440,10 +461,10 @@ export class ToggleDropDown extends Component {
       isDisabled
         ? CssProvider('isDisable')
         : isReadOnly || !isEditable
-          ? style.cursorDefault
-          : !showOnHover
-            ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}`
-            : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`
+        ? style.cursorDefault
+        : !showOnHover
+        ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}`
+        : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`
     }`;
     let listIndex = -1;
     const ariaTitleId = this.getAriaId();
@@ -483,7 +504,7 @@ export class ToggleDropDown extends Component {
               type='text'
               ref={this.inputRef}
               onKeyDown={this.handleKeyDown}
-              tabindex='-1'
+              tabIndex='-1'
               className={style.hiddenInputElement}
             />
           </div>
@@ -624,7 +645,7 @@ export class ToggleDropDown extends Component {
                   options && options.length != 0 ? (
                     isGroupDropDown ? (
                       <Fragment>
-                        {options.map((group) => {
+                        {options.map(group => {
                           const groupName = group[groupNameKey];
                           const groupOptions = group[groupOptionsKey];
                           const { needDivider } = group;
@@ -645,7 +666,7 @@ export class ToggleDropDown extends Component {
                                 </div>
                               )}
                               {groupOptions &&
-                                groupOptions.map((item) => {
+                                groupOptions.map(item => {
                                   const {
                                     iconName,
                                     iconSize,
@@ -805,9 +826,7 @@ export class ToggleDropDown extends Component {
                   </div>
                 )}
               </Box>
-              {getFooter ? (
-                <div>{getFooter()}</div>
-              ) : null}
+              {getFooter ? <div>{getFooter()}</div> : null}
             </Fragment>
           </DropBox>
         ) : null}
@@ -836,7 +855,7 @@ ToggleDropDown.defaultProps = {
   isNeedEffect: true,
   hoverType: 'default',
   needExternalPopupState: false,
-  customProps:{},
+  customProps: {},
   preventPopupClose: false
 };
 
@@ -913,7 +932,7 @@ ToggleDropDown.propTypes = {
   onDropDownOpen: PropTypes.func,
   onDropDownClose: PropTypes.func,
   getFooter: PropTypes.func,
-  customProps:PropTypes.shape({
+  customProps: PropTypes.shape({
     ToggleDropDownProps: PropTypes.object,
     DropBoxProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object,

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() {
@@ -196,6 +203,7 @@ export default class TagsMultiSelect extends React.Component {
             customClass={{
               customDropBoxWrap: style.dropdown
             }}
+            dataId={`${dataId}_dropbox`}
           >
             {isTagListLoading ? (
               <Container align='both' className={style.viewpopNew}>
@@ -229,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'>
@@ -239,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>
@@ -250,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}
@@ -313,7 +323,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId:''
 };
 
 if (__DOCS__) {

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/form/fields/TextEditor/TextEditor.js

@@ -226,6 +226,10 @@ export default class TextEditor extends Component {
         iframeHead.appendChild(link);
         iframe.classList.add('scroll');
       }
+
+      let customFonts= document.createElement('style');
+      customFonts.innerText= `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/3.5/zoho_puvi_regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}`
+        iframeHead.appendChild(customFonts);
     }
   }
 
@@ -286,7 +290,7 @@ export default class TextEditor extends Component {
     try {
       let formData = new FormData();
       formData.append('img_file', file, file.name);
-      if(getCSRFCookieName && getCSRFCookie){
+      if (getCSRFCookieName && getCSRFCookie) {
         formData.append(getCSRFCookieName(), getCSRFCookie());
       }
       return onUpload(formData, file).then(
@@ -344,7 +348,8 @@ export default class TextEditor extends Component {
       border,
       ImgLazyLoad,
       loadingComponent,
-      isNightMode
+      isNightMode,
+      isReadOnly
     } = this.props;
     let { isEditorLoad } = this.state;
     let editorDoc =
@@ -355,13 +360,16 @@ export default class TextEditor extends Component {
     return (
       <Container
         className={`${styles.textEditor} ${styles[type]} ${styles[border]} 
-        ${isNightMode ? styles.night : styles.light}`}
+        ${isNightMode ? styles.night : styles.light} ${
+          isReadOnly ? styles.readOnly : ''
+        }`}
         dataId={dataId}
         data-isEditor
       >
         {loadingComponent && !isEditorLoad ? loadingComponent : null}
         <Box flexible id={id} dataId={dataId} />
         {editorDoc && ImgLazyLoad ? <ImgLazyLoad node={editorDoc} /> : null}
+        {isReadOnly ? <div class={styles.readOnlyMask}></div> : null}
       </Container>
     );
   }
@@ -375,7 +383,8 @@ TextEditor.defaultProps = {
   shouldUpdateContent: true,
   i18nKeys: {},
   needInlineAttachment: false,
-  isNightMode: false
+  isNightMode: false,
+  isReadOnly: false
 };
 
 TextEditor.propTypes = {
@@ -387,7 +396,7 @@ TextEditor.propTypes = {
   editorCallback: PropTypes.func,
   editorMode: PropTypes.string,
   editorOptions: PropTypes.object,
-  fontFamily: PropTypes.oneOf(['Lato', 'Proxima']),
+  fontFamily: PropTypes.oneOf(['Lato', 'Roboto', 'Puvi']),
   getRef: PropTypes.func,
   handleAlertMessage: PropTypes.func,
   handleDropUpload: PropTypes.func,
@@ -420,7 +429,8 @@ TextEditor.propTypes = {
   ]),
   value: PropTypes.string,
   needInlineAttachment: PropTypes.bool,
-  isNightMode: PropTypes.bool
+  isNightMode: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 if (__DOCS__) {
   TextEditor.docs = {

package/src/form/fields/TextEditor/TextEditor.module.css

@@ -565,4 +565,18 @@
 }
 .textEditor :global .KB_Editor li[editor-command='plaintext'] {
   order: 100;
-}
+}
+.readOnly {
+  cursor: not-allowed;
+  position: relative;
+}
+.readOnlyMask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.readOnly :global .KB_Editor_menus {
+  display: none !important;
+}