@zohodesk/dot 1.0.0-temp-66 → 1.0.0-temp-69

package/README.md

@@ -2,6 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.215
+
+- CheckBoxField, CurrencyField, DateField, MultiSelectField, PhoneField, RadioField, SelectField, TextBoxField, TextareaField, setup/header/Views/Views => Tooltip undefined case solved
+- StatusDropdown => Enter, Down Arrow Shortcut issue solved
+- TextEditor => editor focus issue fix
+
 # 1.0.0-beta.214
 
 - Dot => Provider Config Added

package/es/ActionButton/ActionButton.js

@@ -6,7 +6,6 @@ import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import style from './ActionButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
@@ -72,9 +71,8 @@ export class ActionButton extends React.Component {
       flexible: true,
       onClick: onClick,
       dataId: dataId,
-      className: ` ${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} `,
-      "data-title": dataTitle,
-      tagName: "button"
+      className: `${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} `,
+      "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -98,9 +96,8 @@ export class ActionButton extends React.Component {
       onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
-      className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
-      dataId: arrowBoxDataId,
-      tagName: "button"
+      className: `${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
+      dataId: arrowBoxDataId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/IconButton/IconButton.js

@@ -94,8 +94,7 @@ export default class IconButton extends React.Component {
       ariaExpanded,
       ariaLabel,
       ariaControls,
-      ariaLabelledby,
-      role
+      ariaLabelledby
     } = a11y;
     return /*#__PURE__*/React.createElement(RippleEffect, {
       palette: palette,
@@ -109,7 +108,6 @@ export default class IconButton extends React.Component {
       "aria-expanded": ariaExpanded,
       "aria-controls": ariaControls,
       "aria-labelledby": ariaLabelledby,
-      role: role,
       tagName: needButtonTag ? 'button' : 'div',
       isInline: true,
       tourId: tourId,
@@ -163,8 +161,7 @@ IconButton.propTypes = {
     ariaExpanded: PropTypes.bool,
     ariaLabel: PropTypes.string,
     ariaControls: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    role: PropTypes.string
+    ariaLabelledby: PropTypes.string
   }),
   dataIsHtml: PropTypes.bool
 };

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -105,7 +105,7 @@ export default class CheckBoxField extends PureComponent {
     }) : null);
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(Container, {

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -121,7 +121,7 @@ export default class CurrencyField 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 : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({

package/es/form/fields/DateField/DateField.js

@@ -125,7 +125,7 @@ export default class DateField extends PureComponent {
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -137,7 +137,7 @@ export default class MultiSelectField 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 : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({

package/es/form/fields/PhoneField/PhoneField.js

@@ -127,7 +127,7 @@ export default class PhoneField extends PureComponent {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxField, _extends({

package/es/form/fields/RadioField/RadioField.js

@@ -56,7 +56,7 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",

package/es/form/fields/SelectField/SelectField.js

@@ -105,7 +105,7 @@ export default class SelectField 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 : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({

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

@@ -98,7 +98,7 @@ 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 : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({

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

@@ -649,7 +649,18 @@
   right: 0;
   left: 0;
 }
-.readOnly :global .KB_Editor_menus,
-.editorHide :global .KB_Editor {
+.readOnly :global .KB_Editor_menus {
   display: none !important;
 }
+.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;
+}

package/es/form/fields/TextareaField/TextareaField.js

@@ -96,7 +96,7 @@ export default class TextareaField 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 : ''
+      "data-title": isDisabled ? title : null
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
     }, /*#__PURE__*/React.createElement(Label, _extends({

package/es/list/Comment/Comment.js

@@ -22,10 +22,7 @@ export default class Comment extends Component {
       customClass: `${style.container} ${className} `,
       onClick: onClick,
       dataId: "commentLstContainer",
-      title: commentTitle,
-      customProps: {
-        'aria-label': commentTitle
-      }
+      title: commentTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-commentLine",
       iconClass: style.commentIcon

package/es/list/Icons/AddNewIcon.js

@@ -1,9 +1,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Icons.module.css';
 export default class AddNewIcon extends React.Component {
   render() {
@@ -12,15 +9,14 @@ export default class AddNewIcon extends React.Component {
       dataId,
       dataTitle,
       iconClass,
-      className,
-      customProps
+      className
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
-      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      dataId: dataId,
-      title: dataTitle
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-SE-addTickets",
       iconClass: iconClass ? iconClass : ''
     }));
@@ -32,6 +28,5 @@ AddNewIcon.propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.object
+  onClick: PropTypes.func
 };

package/es/list/Icons/CompleteIcon.js

@@ -1,9 +1,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Icons.module.css';
 export default class CompleteIcon extends React.Component {
   render() {
@@ -13,15 +10,14 @@ export default class CompleteIcon extends React.Component {
       dataTitle,
       iconClass,
       className,
-      iconSize,
-      customProps
+      iconSize
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
-      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      dataId: dataId,
-      title: dataTitle
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-checkbox",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -35,6 +31,5 @@ CompleteIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.object
+  onClick: PropTypes.func
 };

package/es/list/Icons/DeleteIcon.js

@@ -1,10 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class DeleteComponent extends React.Component {
   render() {
     let {
@@ -13,15 +10,14 @@ export default class DeleteComponent extends React.Component {
       dataTitle,
       iconClass,
       iconSize,
-      className,
-      customProps
+      className
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
-      customClass: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
-      dataId: dataId,
-      title: dataTitle
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+      className: `${style.iconStyle} ${style.redHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-delete",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -35,6 +31,5 @@ DeleteComponent.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.object
+  onClick: PropTypes.func
 };

package/es/list/Icons/EditIcon.js

@@ -1,10 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class EditIcon extends React.Component {
   render() {
     let {
@@ -13,15 +10,14 @@ export default class EditIcon extends React.Component {
       dataTitle,
       iconClass,
       iconSize,
-      className,
-      customProps
+      className
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
-      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      dataId: dataId,
-      title: dataTitle
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-edit",
       iconClass: iconClass ? iconClass : '',
       size: iconSize
@@ -35,6 +31,5 @@ EditIcon.propTypes = {
   dataTitle: PropTypes.string,
   iconClass: PropTypes.string,
   iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.object
+  onClick: PropTypes.func
 };

package/es/list/Icons/ReadUnreadIcon.js

@@ -1,10 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
 import style from './Icons.module.css';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class ReadUnreadIcon extends React.Component {
   render() {
     let {
@@ -15,15 +12,14 @@ export default class ReadUnreadIcon extends React.Component {
       iconClass,
       className,
       isRead,
-      iconSize,
-      customProps
+      iconSize
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
-      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      dataId: dataId,
-      title: dataTitle
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
       size: iconSize,
       iconClass: `${iconClassName ? iconClassName : ''} ${iconClass ? iconClass : ''}`
@@ -42,6 +38,5 @@ ReadUnreadIcon.propTypes = {
   iconClass: PropTypes.string,
   onClick: PropTypes.func,
   isRead: PropTypes.bool,
-  iconSize: PropTypes.string,
-  customProps: PropTypes.object
+  iconSize: PropTypes.string
 };

package/es/list/Icons/SmartIcon.js

@@ -1,10 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import style from './Icons.module.css';
 import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/semantic/Button/Button';
 export default class SmartIcon extends Component {
   render() {
     let {
@@ -12,15 +9,14 @@ export default class SmartIcon extends Component {
       dataId,
       dataTitle,
       iconClass,
-      className,
-      customProps
+      className
     } = this.props;
-    return /*#__PURE__*/React.createElement(Button, _extends({
+    return /*#__PURE__*/React.createElement("span", {
       onClick: onClick,
-      customClass: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
-      dataId: dataId,
-      title: dataTitle
-    }, customProps), /*#__PURE__*/React.createElement(Icon, {
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      "data-id": dataId,
+      "data-title": dataTitle
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-peek",
       iconClass: iconClass ? iconClass : ''
     }));
@@ -34,6 +30,5 @@ SmartIcon.propTypes = {
   features: PropTypes.array,
   iconClass: PropTypes.string,
   module: PropTypes.string,
-  onClick: PropTypes.func,
-  customProps: PropTypes.object
+  onClick: PropTypes.func
 };

package/es/list/SecondaryText/AccountName.js

@@ -36,40 +36,44 @@ export default class AccountName extends Component {
       TextProps = {},
       SecondaryTextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      "data-title": dataTitle,
-      dataId: dataId
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      className: style.primaryAccountNameCnt
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.primaryAccountName,
-      shrink: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
-      href: href,
-      urlName: urlName,
-      urlData: urlData,
-      onClick: onClick,
-      dataId: `${dataId}_link`,
-      className: style.link
-    }, LinkProps), /*#__PURE__*/React.createElement("div", {
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
-    }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
-      href: secondaryAccountHref,
-      onClick: secondaryAccountClick,
-      className: style.link
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, SecondaryTextProps), secondaryAccountText))))));
+    return (
+      /*#__PURE__*/
+      // <Container
+      //   alignBox='row'
+      //   align='baseline'
+      //   isCover={false}
+      //   data-title={dataTitle}
+      //   dataId={dataId}
+      // >
+      // <Box flexible>
+      React.createElement("div", {
+        className: style.primaryAccountNameCnt,
+        "data-title": dataTitle,
+        "data-id": dataId
+      }, /*#__PURE__*/React.createElement(React.Fragment, {
+        className: style.primaryAccountName,
+        shrink: true
+      }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+        href: href,
+        urlName: urlName,
+        urlData: urlData,
+        onClick: onClick,
+        dataId: `${dataId}_link`,
+        className: `${style.gridItem} ${style.link}`
+      }, LinkProps), /*#__PURE__*/React.createElement("div", {
+        className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+      }, text)) : /*#__PURE__*/React.createElement("div", _extends({
+        className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`
+      }, TextProps), text)), secondaryAccountText && /*#__PURE__*/React.createElement(Link, {
+        href: secondaryAccountHref,
+        onClick: secondaryAccountClick,
+        className: `${style.gridItem} ${style.link}`
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
+      }, SecondaryTextProps), secondaryAccountText))) //   </Box>
+      // </Container>
+
+    );
   }
 
 }

package/es/list/SecondaryText/ContactName.js

@@ -39,36 +39,30 @@ export default class ContactName extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "baseline",
-      isCover: false,
-      dataId: dataId
-    }, isPaidUser && /*#__PURE__*/React.createElement(Box, {
-      className: style.paidUserIcon,
-      title: paidTitle
-    }, /*#__PURE__*/React.createElement(Icon, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.contactNameCnt,
+      "data-id": dataId
+    }, isPaidUser && /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-paiduser",
-      iconClass: style.icon
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+      iconClass: style.paidUserIcon,
+      title: paidTitle
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
       urlName: urlName,
       href: href,
       urlData: urlData,
       onClick: onClick,
       title: dataTitle,
       dataId: `${dataId}_link`,
-      className: style.link
+      className: `${style.gridItem} ${style.link}`
     }, LinkProps), /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
     }, text)) : /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
+      className: `${style.gridItem} ${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle
-    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, TextProps), text)), sentimentType && /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
-    })));
+    }));
   }
 
 }
@@ -106,7 +100,8 @@ ContactName.defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  sentimentType: 'positive'
 };
 
 if (false) {

package/es/list/SecondaryText/SecondaryText.module.css

@@ -1,13 +1,3 @@
-.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;
 }
@@ -67,9 +57,6 @@ 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);
@@ -134,3 +121,31 @@ 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;
+}