@zohodesk/dot 1.0.0-beta.245 → 1.0.0-beta.247

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

@@ -1,26 +1,28 @@
 .tag {
   max-width: 100%;
 }
-.moreLess,
-.tag {
+[dir=ltr] .moreLess, [dir=ltr] .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);
-  margin-bottom: var(--zd_size4);
   width: 100%;
+  margin-bottom: var(--zd_size4);
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  margin-top: var(--zd_size5);
   max-height: var(--zd_size160);
+  margin-top: var(--zd_size5);
 }
 .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);
@@ -64,10 +66,15 @@
   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';
 }
@@ -87,9 +94,14 @@
 .custmInp {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInp {
+  left: 0;
+}
+[dir=rtl] .custmInp {
+  right: 0;
+}
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }

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

@@ -6,5 +6,6 @@ export const defaultProps = {
   needBorder: true,
   dataId: '',
   boxSize: 'default',
-  clickableTag: false
+  clickableTag: false,
+  dataSelectorId: 'tagsMultiSelectField'
 };

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

@@ -39,7 +39,8 @@ const TagsMultiSelectField = props => {
     children,
     ePhiData,
     customProps,
-    clickableTag
+    clickableTag,
+    dataSelectorId
   } = props;
   const {
     LabelProps = {},
@@ -169,7 +170,8 @@ const TagsMultiSelectField = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
     tabIndex: "0",
-    "aria-label": `${labelName}`
+    "aria-label": `${labelName}`,
+    "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
     alignContainer: "baseline",
@@ -232,8 +234,9 @@ const TagsMultiSelectField = props => {
 export default Popup(TagsMultiSelectField);
 TagsMultiSelectField.propTypes = propTypes;
 TagsMultiSelectField.defaultProps = defaultProps;
-if (false) {
-  TagsMultiSelectField.docs = {
-    componentGroup: 'TagsMultiSelectField'
-  };
-}
+
+// if (__DOCS__) {
+//   TagsMultiSelectField.docs = {
+//     componentGroup: 'TagsMultiSelectField'
+//   };
+// }

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

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

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

@@ -14,5 +14,6 @@ export const defaultProps = {
   i18nKeys: {},
   numberOfDisplayedValues: '5',
   customProps: {},
+  dataSelectorId: 'tagsMultiSelectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -62,6 +62,7 @@ export default class TextBoxField extends PureComponent {
       title,
       onBlur,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -91,7 +92,8 @@ export default class TextBoxField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -152,9 +154,10 @@ export default class TextBoxField extends PureComponent {
 }
 TextBoxField.propTypes = propTypes;
 TextBoxField.defaultProps = defaultProps;
-if (false) {
-  TextBoxField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   TextBoxField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/TextBoxField/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
+  dataSelectorId: 'textBoxField',
   ...FieldCommonDefaultProps()
 };

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

@@ -79,7 +79,7 @@ export default class TextEditor extends Component {
           return true; // By default reply editor needs customPaste, so returning true.
         },
 
-        htmlVersion: "<!Doctype html>"
+        htmlVersion: '<!Doctype html>'
       };
       if (!ZohoDeskEditor_Init.init) {
         global.editorInitialize && global.editorInitialize();
@@ -331,7 +331,8 @@ export default class TextEditor extends Component {
       ImgLazyLoad,
       loadingComponent,
       isNightMode,
-      isReadOnly
+      isReadOnly,
+      dataSelectorId
     } = this.props;
     let {
       isEditorLoad,
@@ -342,7 +343,8 @@ export default class TextEditor extends Component {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
         ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
-      "data-isEditor": true
+      "data-isEditor": true,
+      dataSelectorId: dataSelectorId
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       id: id,
@@ -356,9 +358,9 @@ export default class TextEditor extends Component {
 }
 TextEditor.defaultProps = defaultProps;
 TextEditor.propTypes = propTypes;
-if (false) {
-  TextEditor.docs = {
-    componentGroup: 'Fields',
-    folderName: 'TextEditor'
-  };
-}
+// if (__DOCS__) {
+//   TextEditor.docs = {
+//     componentGroup: 'Fields',
+//     folderName: 'TextEditor'
+//   };
+// }