@zohodesk/dot 1.0.0-temp-89 → 1.0.0-temp.888

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

@@ -17,6 +17,8 @@ var _Tag = _interopRequireDefault(require("@zohodesk/components/lib/Tag/Tag"));
 
 var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/TextBoxIcon/TextBoxIcon"));
 
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/lib/DropBox/DropBox"));
+
 var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/svg/EmptySearch"));
 
 var _ListItem = _interopRequireDefault(require("@zohodesk/components/lib/ListItem/ListItem"));
@@ -27,10 +29,6 @@ var _DropDownSeparator = _interopRequireDefault(require("@zohodesk/components/li
 
 var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/CommonEmptyState/CommonEmptyState"));
 
-var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
-
-var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
-
 var _Common = require("../../../utils/Common");
 
 var _Common2 = require("@zohodesk/components/lib/utils/Common.js");
@@ -73,23 +71,16 @@ 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,
@@ -123,8 +114,10 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
 
       if (prevProps.isTagListLoading !== isTagListLoading && !isTagListLoading || isPopupReady && prevProps.tagsList.length !== tagsList.length) {
         setTimeout(function () {
-          if (_this2.inputEl) {
-            _this2.inputEl.focus();
+          var textBoxElementRef = _this2.textBoxRef.current;
+
+          if (textBoxElementRef && typeof textBoxElementRef.handleFocus === 'function') {
+            _this2.textBoxRef.current.handleFocus();
           }
         }, 300);
       }
@@ -154,16 +147,6 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
     value: function getContainerRef(ele) {
       this.containerRef = ele;
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref) {
-      var mediaQueryOR = _ref.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
@@ -194,9 +177,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           needBorder = _this$props3.needBorder,
           borderColor = _this$props3.borderColor,
           getTextBoxChildren = _this$props3.getTextBoxChildren,
-          htmlId = _this$props3.htmlId,
-          boxSize = _this$props3.boxSize,
-          onSelectTag = _this$props3.onSelectTag;
+          htmlId = _this$props3.htmlId;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -213,19 +194,16 @@ 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,
-            id = tag.id;
+            tagType = tag.tagType;
         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,
-          onSelectTag: onSelectTag ? onSelectTag : undefined
+          isReadOnly: isReadOnly
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,
@@ -234,7 +212,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
       }, showAll ? "".concat(i18nKeys.lessText) : "+".concat(tagsList.length - chipNeedToShow, " ").concat(i18nKeys.moreText)) : null) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         adjust: true,
-        shrink: true,
+        shrnik: true,
         className: _TagsMultiSelectModule["default"].inputWrapper
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: _TagsMultiSelectModule["default"].custmSpan
@@ -246,6 +224,7 @@ 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,
@@ -253,78 +232,66 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           customTBoxWrap: _TagsMultiSelectModule["default"].custmInp,
           customTextBox: _TagsMultiSelectModule["default"].input
         },
-        size: "xsmall",
-        inputRef: this.textInputRef
-      }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref2) {
-        var tabletMode = _ref2.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          isAnimate: true,
-          isActive: isPopupReady,
-          isArrow: false,
-          getRef: getContainerRef,
-          isBoxPaddingNeed: true,
-          size: boxSize,
-          boxPosition: boxPosition,
-          isPadding: false,
-          customClass: {
-            customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
-          },
-          dataId: "".concat(dataId, "_dropbox"),
-          isResponsivePadding: true,
-          alignBox: "row"
+        size: "xsmall"
+      }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+        isAnimate: true,
+        isActive: isPopupReady,
+        isArrow: false,
+        getRef: getContainerRef,
+        isBoxPaddingNeed: true,
+        size: "default",
+        boxPosition: boxPosition,
+        isPadding: false,
+        customClass: {
+          customDropBoxWrap: _TagsMultiSelectModule["default"].dropdown
+        },
+        dataId: "".concat(dataId, "_dropbox")
+      }, isTagListLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
+        className: _TagsMultiSelectModule["default"].viewpopNew
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        scroll: "vertical",
+        className: _TagsMultiSelectModule["default"].viewpopNew,
+        onScroll: this.onScroll,
+        eleRef: this.getContainerRef
+      }, searchList.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, searchList.map(function (item, index) {
+        var name = item.name,
+            isNew = item.isNew;
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+          key: index,
+          index: index,
+          autoHover: true,
+          value: isNew ? '' : name,
+          title: isNew ? '' : name,
+          onClick: addTag.bind(_this3, item),
+          needTick: true,
+          highlight: selectSearchIndex === index,
+          getRef: _this3.getSelectedItemRef,
+          isDisabled: listDisabled
+        }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          alignBox: "row",
+          align: "vertical"
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, isTagListLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          align: "both",
-          className: "".concat(tabletMode ? '' : _TagsMultiSelectModule["default"].viewpopNew)
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          scroll: "vertical",
-          className: "".concat(tabletMode ? '' : _TagsMultiSelectModule["default"].viewpopNew),
-          onScroll: _this3.onScroll,
-          eleRef: _this3.getContainerRef
-        }, searchList.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true,
-          shrink: true
-        }, searchList.map(function (item, index) {
-          var name = item.name,
-              isNew = item.isNew;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            key: index,
-            index: index,
-            autoHover: true,
-            value: isNew ? '' : name,
-            title: isNew ? '' : name,
-            onClick: addTag.bind(_this3, item),
-            needTick: true,
-            highlight: selectSearchIndex === index,
-            getRef: _this3.getSelectedItemRef,
-            isDisabled: listDisabled
-          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            alignBox: "row",
-            align: "vertical"
-          }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: _TagsMultiSelectModule["default"].newTagLabel
-          }, i18nKeys.newTagText, ":"), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            shrink: true,
-            "data-title": name,
-            className: "".concat(_TagsMultiSelectModule["default"].dotted, " ").concat(_TagsMultiSelectModule["default"].newTagText, " "),
-            dataId: "".concat(dataId, "_new_tag_text")
-          }, name)) : null));
-        })) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true,
-          dataId: "".concat(dataId, "_empty")
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          className: _TagsMultiSelectModule["default"].searchEmpty
-        }, /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
-          title: i18nKeys.emptyTitleText,
-          description: i18nKeys.emptyDescription,
-          size: "small",
-          getEmptyState: _this3.emptySearchSVG
-        })))))));
-      }) : null);
+          className: _TagsMultiSelectModule["default"].newTagLabel
+        }, i18nKeys.newTagText, ":"), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          shrink: true,
+          "data-title": name,
+          className: "".concat(_TagsMultiSelectModule["default"].dotted, " ").concat(_TagsMultiSelectModule["default"].newTagText, " "),
+          dataId: "".concat(dataId, "_new_tag_text")
+        }, name)) : null));
+      })) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        dataId: "".concat(dataId, "_empty")
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        className: _TagsMultiSelectModule["default"].searchEmpty
+      }, /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
+        title: i18nKeys.emptyTitleText,
+        description: i18nKeys.emptyDescription,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      })))))) : null);
     }
   }]);
 
@@ -339,7 +306,6 @@ 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,
@@ -369,9 +335,7 @@ TagsMultiSelect.propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
   needBorder: _propTypes["default"].bool,
   getTextBoxChildren: _propTypes["default"].func,
-  htmlId: _propTypes["default"].string,
-  boxSize: _propTypes["default"].string,
-  onSelectTag: _propTypes["default"].func
+  htmlId: _propTypes["default"].string
 };
 TagsMultiSelect.defaultProps = {
   className: '',
@@ -379,8 +343,7 @@ TagsMultiSelect.defaultProps = {
   chipNeedToShow: '5',
   borderColor: 'default',
   needBorder: true,
-  dataId: '',
-  boxSize: 'default'
+  dataId: ''
 };
 
 if (false) {

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -147,7 +147,7 @@ var TextBoxField = /*#__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 : null
+        "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/form/fields/TextEditor/TextEditor.js

@@ -109,7 +109,6 @@ var TextEditor = /*#__PURE__*/function (_Component) {
           needEditorFocus = _this$props$needEdito === void 0 ? true : _this$props$needEdito,
           handleDropUpload = _this$props.handleDropUpload,
           fontFamily = _this$props.fontFamily,
-          fontSize = _this$props.fontSize,
           initCallback = _this$props.initCallback,
           handleAlertMessage = _this$props.handleAlertMessage,
           needInlineAttachment = _this$props.needInlineAttachment;
@@ -145,7 +144,7 @@ var TextEditor = /*#__PURE__*/function (_Component) {
         }
 
         defaultObj = Object.assign(defaultObj, editorOptions);
-        ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
+        ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback);
         ZohoDeskEditor.create && ZohoDeskEditor.create(defaultObj);
       }
     }
@@ -451,7 +450,6 @@ TextEditor.defaultProps = {
   type: 'large',
   changeEditorContent: false,
   fontFamily: 'Lato',
-  fontSize: '16',
   shouldUpdateContent: true,
   i18nKeys: {},
   needInlineAttachment: false,
@@ -468,7 +466,6 @@ TextEditor.propTypes = {
   editorMode: _propTypes["default"].string,
   editorOptions: _propTypes["default"].object,
   fontFamily: _propTypes["default"].oneOf(['Lato', 'Roboto', 'Puvi']),
-  fontSize: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   handleAlertMessage: _propTypes["default"].func,
   handleDropUpload: _propTypes["default"].func,

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

@@ -649,18 +649,7 @@
   right: 0;
   left: 0;
 }
-.readOnly :global .KB_Editor_menus {
-  display: none !important;
-}
+.readOnly :global .KB_Editor_menus,
 .editorHide :global .KB_Editor {
-  position: absolute !important;
-  top: 0;
-  opacity: 0;
-  visibility: hidden;
-}
-[dir=ltr] .editorHide :global .KB_Editor {
-  left: 0;
-}
-[dir=rtl] .editorHide :global .KB_Editor {
-  right: 0;
+  display: none !important;
 }

package/lib/form/fields/TextareaField/TextareaField.js

@@ -143,7 +143,7 @@ var TextareaField = /*#__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 : null
+        "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
       }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -108,7 +108,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
           searchEmptyText = _i18nKeys$searchEmpty === void 0 ? 'No results found' : _i18nKeys$searchEmpty,
           _i18nKeys$searchError = i18nKeys.searchErrorText,
-          searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
+          searchErrorText = _i18nKeys$searchError === void 0 ? 'OOPS !' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
       return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {

package/lib/list/GridStencils/GridStencils.module.css

@@ -1,11 +1,9 @@
 .stenLoading {
   position: relative;
-  width: var(--zd_size265);
   background-color: var(--zdt_gridstencils_default_bg);
   border-bottom: 1px solid var(--zdt_gridstencils_default_border);
   padding: var(--zd_size13) var(--zd_size20) var(--zd_size11);
-  margin: 0 auto var(--zd_size10) auto;
-  border-radius: var(--zd_size5);
+  margin-bottom: var(--zd_size10);
 }
 [dir=ltr] .stenLoadbody {
   margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0;

package/lib/list/SecondaryText/AccountName.js

@@ -82,44 +82,40 @@ var AccountName = /*#__PURE__*/function (_Component) {
           TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp,
           _customProps$Secondar = customProps.SecondaryTextProps,
           SecondaryTextProps = _customProps$Secondar === void 0 ? {} : _customProps$Secondar;
-      return (
-        /*#__PURE__*/
-        // <Container
-        //   alignBox='row'
-        //   align='baseline'
-        //   isCover={false}
-        //   data-title={dataTitle}
-        //   dataId={dataId}
-        // >
-        // <Box flexible>
-        _react["default"].createElement("div", {
-          className: _SecondaryTextModule["default"].primaryAccountNameCnt,
-          "data-title": dataTitle,
-          "data-id": dataId
-        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          className: _SecondaryTextModule["default"].primaryAccountName,
-          shrink: true
-        }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
-          href: href,
-          urlName: urlName,
-          urlData: urlData,
-          onClick: onClick,
-          dataId: "".concat(dataId, "_link"),
-          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
-        }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-        }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
-        }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-          href: secondaryAccountHref,
-          onClick: secondaryAccountClick,
-          className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
-        }, /*#__PURE__*/_react["default"].createElement("div", _extends({
-          className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
-        }, SecondaryTextProps), secondaryAccountText))) //   </Box>
-        // </Container>
-
-      );
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false,
+        "data-title": dataTitle,
+        dataId: dataId
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false,
+        className: _SecondaryTextModule["default"].primaryAccountNameCnt
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _SecondaryTextModule["default"].primaryAccountName,
+        shrink: true
+      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+        href: href,
+        urlName: urlName,
+        urlData: urlData,
+        onClick: onClick,
+        dataId: "".concat(dataId, "_link"),
+        className: _SecondaryTextModule["default"].link
+      }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
+      }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
+        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : '')
+      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        href: secondaryAccountHref,
+        onClick: secondaryAccountClick,
+        className: _SecondaryTextModule["default"].link
+      }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+        className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
+      }, SecondaryTextProps), secondaryAccountText))))));
     }
   }]);
 

package/lib/list/SecondaryText/ContactName.js

@@ -93,30 +93,36 @@ var ContactName = /*#__PURE__*/function (_Component) {
           LinkProps = _customProps$LinkProp === void 0 ? {} : _customProps$LinkProp,
           _customProps$TextProp = customProps.TextProps,
           TextProps = _customProps$TextProp === void 0 ? {} : _customProps$TextProp;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SecondaryTextModule["default"].contactNameCnt,
-        "data-id": dataId
-      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        name: "ZD-paiduser",
-        iconClass: _SecondaryTextModule["default"].paidUserIcon,
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: "baseline",
+        isCover: false,
+        dataId: dataId
+      }, isPaidUser && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _SecondaryTextModule["default"].paidUserIcon,
         title: paidTitle
-      }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: "ZD-paiduser",
+        iconClass: _SecondaryTextModule["default"].icon
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, isLink ? /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
         urlName: urlName,
         href: href,
         urlData: urlData,
         onClick: onClick,
         title: dataTitle,
         dataId: "".concat(dataId, "_link"),
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].link)
+        className: _SecondaryTextModule["default"].link
       }, LinkProps), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SecondaryTextModule["default"].textStyle, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '')
       }, text)) : /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_SecondaryTextModule["default"].gridItem, " ").concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
+        className: "".concat(_SecondaryTextModule["default"].secondaryText, " ").concat(_SecondaryTextModule["default"]["font_".concat(fontWeight)], " ").concat(className ? className : '', " ").concat(notAccessible ? _SecondaryTextModule["default"].disable : ''),
         "data-title": dataTitle
-      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
+      }, TextProps), text)), sentimentType && /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_SentimentStatus["default"], {
         type: sentimentType,
         dataTitle: sentimentDataTitle
-      }));
+      })));
     }
   }]);
 
@@ -158,8 +164,7 @@ ContactName.defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  customProps: {},
-  sentimentType: 'positive'
+  customProps: {}
 };
 
 if (false) {

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -1,3 +1,13 @@
+.paidUserIcon {
+  vertical-align: middle;
+  bottom: var(--zd_size1);
+  position: relative;
+  font-size: var(--zd_font_size8);
+}[dir=ltr] .paidUserIcon {
+  margin-right: var(--zd_size5);
+}[dir=rtl] .paidUserIcon {
+  margin-left: var(--zd_size5);
+}
 .icon {
   display: block;
 }
@@ -57,6 +67,9 @@ display: block
 .ticketIdLink:hover, .ticketIdLink:focus {
   color: var(--zdt_secondaryText_blue_hover_text);
 }
+.primaryAccountNameCnt {
+  max-width: 100%;
+}
 /* status */
 .font_regular {
   font-family: var(--zd_regular);
@@ -92,7 +105,7 @@ display: block
   composes: inlineBlockMiddle from '../listCommon.module.css';
 }
 .happinessImg {
-  width: var(--zd_size13);
+  width: var(--zd_size10);
   vertical-align: middle;
 }
 [dir=ltr] .happinessImg {
@@ -121,31 +134,3 @@ display: block
 .black {
   color: var(--zdt_secondaryText_black_text);
 }
-/* Contact Name */
-.contactNameCnt {
-  display: inline-grid;
-  grid-template-columns: minmax(auto,max-content) 1fr minmax(auto,max-content);
-  align-items: baseline;
-}
-.paidUserIcon {
-  vertical-align: middle;
-  bottom: var(--zd_size1);
-  position: relative;
-  font-size: var(--zd_font_size8);
-}
-[dir=ltr] .paidUserIcon {
-  margin-right: var(--zd_size5);
-}
-[dir=rtl] .paidUserIcon {
-  margin-left: var(--zd_size5);
-}
-.gridItem {
-  min-width: 0;
-}
-/* Account Name */
-.primaryAccountNameCnt {
-  max-width: 100%;
-  display: grid;
-  grid-template-columns: 1fr minmax(auto,max-content);
-  align-items: baseline;
-}