@zohodesk/dot 1.0.0-temp-77 → 1.0.0-temp-80

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

@@ -1,183 +1,183 @@
-.container,
-.checkboxFieldContainer {
-  position: relative;
-  word-break: break-word;
-}
-.fieldContainer {
-  position: relative;
-  min-height: var(--zd_size25);
-}
-.fieldMargin_medium {
-  margin-top: var(--zd_size5);
-}
-.fieldMargin_small {
-  margin-top: 0;
-}
-.radioContainer,
-.checkbox {
-  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
-}
-.checkbox {
-  min-height: var(--zd_size28);
-}
-.checkboxRow {
-  display: inherit;
-}
-.lineClamp_one,
-.lineClamp_two {
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
-}
-.lineClamp_one {
-  -webkit-line-clamp: 1;
-}
-.lineClamp_two {
-  -webkit-line-clamp: 2;
-}
-.checkboxText {
-  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);
-}
-.cbTextPointer {
-  cursor: pointer;
-}
-.disabled, .readonly {
-  cursor: not-allowed;
-}
-.cbTextReadonly,
-.disabled .fieldLabel,
-.readonly .fieldLabel {
-  --label_cursor: not-allowed;
-}
-[dir=ltr] .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 {
-  margin-right: var(--zd_size15);
-}
-[dir=rtl] .duration {
-  margin-left: var(--zd_size15);
-}
-.durationWidth {
-  width: var(--zd_size94);
-}
-.flex {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.periodContainer {
-  composes: dflex flexrow flexwrap from '~@zohodesk/components/lib/common/common.module.css';
-  width: 100%;
-  /*margin-left: var(--zd_size15);*/
-}
-.phoneIcon {
-  color: var(--zdt_fields_phoneicon_icon);
-  display: inline-block;
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
-  cursor: pointer;
-}
-.phoneIcon:hover {
-  color: var(--zdt_fields_phoneicon_hover_icon);
-}
-.newtabIcon {
-  color: var(--zdt_fields_newtabicon_icon);
-  cursor: pointer;
-}
-.newtabIcon:hover {
-    color: var(--zdt_fields_newtabicon_hover_icon);
-}
-.labelContainer {
-  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-}
-.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);
-}
-/* .infoIcon {
-  opacity: 0;
-  visibility: hidden;
-}
-.container:hover .infoIcon {
-  opacity: 1;
-  visibility: visible;
-} */
-/* .lockIcon {
-  cursor: pointer;
-} */
-.lockIcon:hover {
-  color: var(--zdt_fields_lockicon_hover_icon);
-}
-.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);
-}
-.newTab {
-  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);
-}
-.container:hover .newTab {
-  display: block;
-}
-.lockText {
-  font-size: var(--zd_font_size13);
-  font-style: italic;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-}
-.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);
-}
-.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);
-  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);
-}
+.container,
+.checkboxFieldContainer {
+  position: relative;
+  word-break: break-word;
+}
+.fieldContainer {
+  position: relative;
+  min-height: var(--zd_size25);
+}
+.fieldMargin_medium {
+  margin-top: var(--zd_size5);
+}
+.fieldMargin_small {
+  margin-top: 0;
+}
+.radioContainer,
+.checkbox {
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+}
+.checkbox {
+  min-height: var(--zd_size28);
+}
+.checkboxRow {
+  display: inherit;
+}
+.lineClamp_one,
+.lineClamp_two {
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+}
+.lineClamp_one {
+  -webkit-line-clamp: 1;
+}
+.lineClamp_two {
+  -webkit-line-clamp: 2;
+}
+.checkboxText {
+  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);
+}
+.cbTextPointer {
+  cursor: pointer;
+}
+.disabled, .readonly {
+  cursor: not-allowed;
+}
+.cbTextReadonly,
+.disabled .fieldLabel,
+.readonly .fieldLabel {
+  --label_cursor: not-allowed;
+}
+[dir=ltr] .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 {
+  margin-right: var(--zd_size15);
+}
+[dir=rtl] .duration {
+  margin-left: var(--zd_size15);
+}
+.durationWidth {
+  width: var(--zd_size94);
+}
+.flex {
+  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+.periodContainer {
+  composes: dflex flexrow flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  width: 100%;
+  /*margin-left: var(--zd_size15);*/
+}
+.phoneIcon {
+  color: var(--zdt_fields_phoneicon_icon);
+  display: inline-block;
+  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
+  cursor: pointer;
+}
+.phoneIcon:hover {
+  color: var(--zdt_fields_phoneicon_hover_icon);
+}
+.newtabIcon {
+  color: var(--zdt_fields_newtabicon_icon);
+  cursor: pointer;
+}
+.newtabIcon:hover {
+    color: var(--zdt_fields_newtabicon_hover_icon);
+}
+.labelContainer {
+  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+}
+.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);
+}
+/* .infoIcon {
+  opacity: 0;
+  visibility: hidden;
+}
+.container:hover .infoIcon {
+  opacity: 1;
+  visibility: visible;
+} */
+/* .lockIcon {
+  cursor: pointer;
+} */
+.lockIcon:hover {
+  color: var(--zdt_fields_lockicon_hover_icon);
+}
+.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);
+}
+.newTab {
+  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);
+}
+.container:hover .newTab {
+  display: block;
+}
+.lockText {
+  font-size: var(--zd_font_size13);
+  font-style: italic;
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+}
+.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);
+}
+.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);
+  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);
+}

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -185,7 +185,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/PhoneField/PhoneField.js

@@ -169,7 +169,7 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxField["default"], _extends({

package/lib/form/fields/RadioField/RadioField.js

@@ -106,7 +106,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",

package/lib/form/fields/SelectField/SelectField.js

@@ -153,7 +153,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -71,16 +71,23 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       showAll: false
     };
-    _this.textBoxRef = /*#__PURE__*/_react["default"].createRef();
     _this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
     _this.onShowAllClick = _this.onShowAllClick.bind(_assertThisInitialized(_this));
     _this.getContainerRef = _this.getContainerRef.bind(_assertThisInitialized(_this));
     _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     _this.getSelectedItemRef = _this.getSelectedItemRef.bind(_assertThisInitialized(_this));
+    _this.textInputRef = _this.textInputRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(TagsMultiSelect, [{
+    key: "textInputRef",
+    value: function textInputRef(el) {
+      var getTextInputRef = this.props.getTextInputRef;
+      this.inputEl = el;
+      getTextInputRef && getTextInputRef(el);
+    }
+  }, {
     key: "onScroll",
     value: function onScroll() {
       var _this$props = this.props,
@@ -114,10 +121,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
 
       if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
         setTimeout(function () {
-          var textBoxElementRef = _this2.textBoxRef.current;
-
-          if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
-            _this2.textBoxRef.current.handleFocus();
+          if (_this2.inputEl) {
+            _this2.inputEl.focus();
           }
         }, 300);
       }
@@ -177,7 +182,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           needBorder = _this$props3.needBorder,
           borderColor = _this$props3.borderColor,
           getTextBoxChildren = _this$props3.getTextBoxChildren,
-          htmlId = _this$props3.htmlId;
+          htmlId = _this$props3.htmlId,
+          boxSize = _this$props3.boxSize,
+          onSelectTag = _this$props3.onSelectTag;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -194,16 +201,19 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         scroll: "vertical"
       }, tagsList.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagsList.map(function (tag, index) {
         var name = tag.name,
-            tagType = tag.tagType;
+            tagType = tag.tagType,
+            id = tag.id;
         return index < chipLimit ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _TagsMultiSelectModule["default"].tag,
           key: index
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          id: id,
           text: name,
           onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-          isReadOnly: isReadOnly
+          isReadOnly: isReadOnly,
+          onSelectTag: onSelectTag ? onSelectTag : undefined
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
@@ -224,7 +234,6 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         onChange: handleChange,
         maxLength: 50,
         isReadOnly: isReadOnly,
-        ref: this.textBoxRef,
         needBorder: false,
         placeHolder: tagsList.length ? '' : i18nKeys.placeholderText || '-',
         onClick: !isReadOnly ? handleTogglePopup : undefined,
@@ -232,14 +241,15 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           customTBoxWrap: _TagsMultiSelectModule["default"].custmInp,
           customTextBox: _TagsMultiSelectModule["default"].input
         },
-        size: "xsmall"
+        size: "xsmall",
+        inputRef: this.textInputRef
       }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
         isAnimate: true,
         isActive: isPopupReady,
         isArrow: false,
         getRef: getContainerRef,
         isBoxPaddingNeed: true,
-        size: "default",
+        size: boxSize,
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
@@ -306,6 +316,7 @@ TagsMultiSelect.propTypes = {
   deleteTag: _propTypes["default"].func,
   getContainerRef: _propTypes["default"].func,
   getTargetRef: _propTypes["default"].func,
+  getTextInputRef: _propTypes["default"].func,
   handleChange: _propTypes["default"].func,
   handleKeyUp: _propTypes["default"].func,
   handleTogglePopup: _propTypes["default"].func,
@@ -335,7 +346,9 @@ TagsMultiSelect.propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
   needBorder: _propTypes["default"].bool,
   getTextBoxChildren: _propTypes["default"].func,
-  htmlId: _propTypes["default"].string
+  htmlId: _propTypes["default"].string,
+  boxSize: _propTypes["default"].string,
+  onSelectTag: _propTypes["default"].func
 };
 TagsMultiSelect.defaultProps = {
   className: '',
@@ -343,7 +356,8 @@ TagsMultiSelect.defaultProps = {
   chipNeedToShow: '5',
   borderColor: 'default',
   needBorder: true,
-  dataId: ''
+  dataId: '',
+  boxSize: 'default'
 };
 
 if (false) {