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

package/es/form/fields/Fields.module.css

@@ -34,15 +34,10 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
+  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
-[dir=ltr] .checkboxText {
-  padding-left: var(--zd_size6);
-}
-[dir=rtl] .checkboxText {
-  padding-right: var(--zd_size6);
-}
 .cbTextReadonly {
   cursor: not-allowed;
 }
@@ -52,18 +47,12 @@
 .disabled {
   composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .radio {
+.radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-[dir=rtl] .radio {
-  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
-}
-[dir=ltr] .duration {
+.duration {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .duration {
-  margin-left: var(--zd_size15);
-}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -77,8 +66,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  display: inline-block;
   margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
+  display: inline-block;
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -97,13 +86,8 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
   margin-left: var(--zd_size5);
-}
-[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
-  margin-right: var(--zd_size5);
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
 }
 /* .infoIcon {
   opacity: 0;
@@ -121,25 +105,15 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  color: var(--zdt_fields_lockicon_icon);
-}
-[dir=ltr] .timeFormat {
   margin-left: var(--zd_size4);
-}
-[dir=rtl] .timeFormat {
-  margin-right: var(--zd_size4);
+  color: var(--zdt_fields_lockicon_icon);
 }
 .newTab {
+  margin-left: var(--zd_size6);
+  cursor: pointer;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0;
   display: none;
-  cursor: pointer;
-}
-[dir=ltr] .newTab {
-  margin-left: var(--zd_size6);
-}
-[dir=rtl] .newTab {
-  margin-right: var(--zd_size6);
 }
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
@@ -154,28 +128,18 @@
 }
 .labelMandatory:after {
   content: '*';
-  color: var(--zdt_fields_lockicon_hover_icon);
-}
-[dir=ltr] .labelMandatory:after {
   padding-left: var(--zd_size2);
-}
-[dir=rtl] .labelMandatory:after {
-  padding-right: var(--zd_size2);
+  color: var(--zdt_fields_lockicon_hover_icon);
 }
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
-  font-size: var(--zd_font_size12);
-  height: var(--zd_size18);
-  line-height: var(--zd_size18);
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
+  font-size: var(--zd_font_size12);
   padding: 0 var(--zd_size5);
   border-radius: var(--zd_size3);
-}
-[dir=ltr] .ePhiTag {
   margin-left: var(--zd_size8);
-}
-[dir=rtl] .ePhiTag {
-  margin-right: var(--zd_size8);
+  height: var(--zd_size18);
+  line-height: var(--zd_size18);
 }

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

@@ -30,11 +30,17 @@ export default class TagsMultiSelect extends React.Component {
     let {
       onScroll,
       name,
-      noMoreData
+      noMoreData,
+      searchList
     } = this.props;
+    let {
+      containerRef
+    } = this;
 
     if (findScrollEnd(this.containerRef) && !noMoreData) {
       onScroll(name);
+      let selectItemRef = this[`selectedList_${searchList.length - 1}`];
+      scrollTo(containerRef, selectItemRef);
     }
   }
 
@@ -60,11 +66,13 @@ 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() {
@@ -182,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
@@ -208,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"
@@ -217,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, {
@@ -274,7 +286,8 @@ TagsMultiSelect.defaultProps = {
   i18nKeys: {},
   chipNeedToShow: '5',
   borderColor: 'default',
-  needBorder: true
+  needBorder: true,
+  dataId: ''
 };
 
 if (false) {

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -1,28 +1,26 @@
 .tag {
   max-width: 100%;
 }
-[dir=ltr] .moreLess, [dir=ltr] .tag {
+.moreLess,
+.tag {
   margin: 0 var(--zd_size6) var(--zd_size6) 0;
 }
-[dir=rtl] .moreLess, [dir=rtl] .tag {
-  margin: 0 0 var(--zd_size6) var(--zd_size6);
-}
 .input {
   height: var(--zd_size20);
-  width: 100%;
   margin-bottom: var(--zd_size4);
+  width: 100%;
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  max-height: var(--zd_size160);
   margin-top: var(--zd_size5);
+  max-height: var(--zd_size160);
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
@@ -66,15 +64,10 @@
   font-size: 0;
 }
 .newTagLabel {
+  margin-right: var(--zd_size5);
   color: var(--zdt_tagsmultiselect_labelt_text);
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .newTagLabel {
-  margin-right: var(--zd_size5);
-}
-[dir=rtl] .newTagLabel {
-  margin-left: var(--zd_size5);
-}
 .dotted {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -94,13 +87,8 @@
 .custmInp {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInp {
   left: 0;
-}
-[dir=rtl] .custmInp {
-  right: 0;
+  width: 100%;
 }
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);

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

@@ -129,12 +129,12 @@ const TagsMultiSelectField = props => {
       }
     } else if (keyCode === 40) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = prevSelectedSuggestionIndex === options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
+        let newIndex = prevSelectedSuggestionIndex >= options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
         return newIndex;
       });
     } else if (keyCode === 38) {
       updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = prevSelectedSuggestionIndex <= 0 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
+        let newIndex = prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
         return newIndex;
       });
     } else if (keyCode === 8 && searchValue === '' & !isValueChanged) {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,9 +1,6 @@
 .count {
   color: var(--zdt_tagsmultiselectField_count_text);
   font-size: var(--zd_font_size12);
-  word-break: break-word;
-}[dir=ltr] .count {
   margin-left: var(--zd_size4);
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4);
+  word-break: break-word;
 }

package/es/form/fields/TextEditor/TextEditor.js

@@ -236,6 +236,27 @@ 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;
+          }
+
+          @font-face {
+            font-family: Regular;
+            src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');
+            font-weight: 400;
+            font-style: normal;
+            font-display: swap;
+          }
+      `;
+      iframeHead.appendChild(customFonts);
     }
   }
 
@@ -369,7 +390,8 @@ export default class TextEditor extends Component {
       border,
       ImgLazyLoad,
       loadingComponent,
-      isNightMode
+      isNightMode,
+      isReadOnly
     } = this.props;
     let {
       isEditorLoad
@@ -377,7 +399,7 @@ export default class TextEditor extends Component {
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(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": true
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {
@@ -386,6 +408,8 @@ export default class TextEditor extends Component {
       dataId: dataId
     }), editorDoc && ImgLazyLoad ? /*#__PURE__*/React.createElement(ImgLazyLoad, {
       node: editorDoc
+    }) : null, isReadOnly ? /*#__PURE__*/React.createElement("div", {
+      class: styles.readOnlyMask
     }) : null);
   }
 
@@ -398,7 +422,8 @@ TextEditor.defaultProps = {
   shouldUpdateContent: true,
   i18nKeys: {},
   needInlineAttachment: false,
-  isNightMode: false
+  isNightMode: false,
+  isReadOnly: false
 };
 TextEditor.propTypes = {
   ImgLazyLoad: PropTypes.node,
@@ -409,7 +434,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,
@@ -435,7 +460,8 @@ TextEditor.propTypes = {
   type: PropTypes.oneOf(['large', 'xlarge', 'medium', 'small', 'mini', 'default']),
   value: PropTypes.string,
   needInlineAttachment: PropTypes.bool,
-  isNightMode: PropTypes.bool
+  isNightMode: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 
 if (false) {