@zohodesk/dot 1.0.0-temp-138 → 1.0.0-temp.139

package/es/layout/List/common/SubTabListItemWebCommon.module.css

@@ -0,0 +1,99 @@
+.listWrapper .innerWrapper, .peekViewWrapper .innerWrapper {
+    padding-top: var(--zd_size15);
+    padding-bottom: var(--zd_size12);
+}
+
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size65);
+    padding-right: var(--zd_size65);
+}
+
+[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size65);
+    padding-left: var(--zd_size65);
+}
+
+[dir=ltr] .peekViewWrapper {
+    padding-left: var(--zd_size42);
+    padding-right: var(--zd_size42);
+}
+
+[dir=rtl] .peekViewWrapper {
+    padding-right: var(--zd_size42);
+    padding-left: var(--zd_size42);
+}
+
+[dir=ltr] .avatarWrapper {
+    margin-right: var(--zd_size25);
+}
+
+[dir=rtl] .avatarWrapper {
+    margin-left: var(--zd_size25);
+}
+
+.secondaryWrapper {
+    line-height: var(--zd_size18);
+    margin-top: var(--zd_size2);
+}
+
+.floatingWrapper {
+    display: none;
+}
+
+.wrapper {
+    transition: padding var(--zd_transition3);
+}
+
+.wrapper:hover .floatingWrapper {
+    display: block;
+}
+
+.notAccessible {
+    cursor: not-allowed
+}
+
+.dot {
+    color: var(--zdt_dot_text);
+    font-size: var(--zd_font_size16);
+    display: none;
+    transform: perspective(1px);
+    margin: 0 var(--zd_size6)
+}
+
+[is-dot='true']+.dot {
+    display: block
+}
+
+.posRel {
+    position: relative;
+}
+
+.dotted {
+    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.visibleOnHover {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.wrapper:hover .visibleOnHover {
+    opacity: 1;
+    visibility: visible;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.secondaryItem {
+    max-width: var(--zd_size232)
+}
+
+[dir=ltr] .icnSpace {
+    margin-left: var(--zd_size8)
+}
+
+[dir=rtl] .icnSpace {
+    margin-right: var(--zd_size8)
+}

package/es/layout/List/common/twoToneIconColor.module.css

@@ -0,0 +1,26 @@
+.primary :global .path1:before {
+  color: var(--zdt_twotoneIcon_primary_bg);
+}
+
+.primary :global .path2:before {
+  color: var(--zdt_twotoneIcon_primary_border);
+}
+
+/* .secondary :global .path1:before {
+  color: var(--zdt_twotoneIcon_secondary_bg);
+}
+.secondary :global .path2:before {
+  color: var(--zdt_twotoneIcon_secondary_border);
+}
+.danger :global .path1:before {
+  color: var(--zdt_twotoneIcon_danger_bg);
+}
+.danger :global .path2:before {
+  color: var(--zdt_twotoneIcon_danger_border);
+}
+.info :global .path1:before {
+  color: var(--zdt_twotoneIcon_info_bg);
+}
+.info :global .path2:before {
+  color: var(--zdt_twotoneIcon_info_border);
+} */

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -3,6 +3,7 @@
   font-size: var(--zd_font_size13);
   position: relative;
   list-style: none;
+  min-height: var(--zd_size35);
   cursor: pointer;
 }
 [dir=ltr] .withBorder {
@@ -12,13 +13,13 @@
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
 [dir=ltr] .small {
-  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
+  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
-  padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
 .medium {
-  padding: var(--zd_size9) var(--zd_size20);
+  padding: var(--zd_size7) var(--zd_size20);
 }
 .large {
   height: var(--zd_size48);
@@ -29,13 +30,14 @@
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
+.value,.multiLineValue {
+  line-height: var(--zd_size20);
+}
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
 .multiLineValue{
   word-break: break-word;
-  line-height: var(--zd_size20);
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {

package/lib/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,92 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Layout = require("@zohodesk/components/es/Layout");
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+var _TagWithIconModule = _interopRequireDefault(require("./TagWithIcon.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var TagWithIcon = /*#__PURE__*/function (_React$Component) {
+  _inherits(TagWithIcon, _React$Component);
+  var _super = _createSuper(TagWithIcon);
+  function TagWithIcon() {
+    _classCallCheck(this, TagWithIcon);
+    return _super.apply(this, arguments);
+  }
+  _createClass(TagWithIcon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        text = _this$props.text,
+        iconName = _this$props.iconName,
+        iconSize = _this$props.iconSize,
+        palette = _this$props.palette,
+        iconClass = _this$props.iconClass,
+        isBold = _this$props.isBold,
+        size = _this$props.size,
+        dataId = _this$props.dataId,
+        className = _this$props.className,
+        title = _this$props.title;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isInline: true,
+        alignBox: "row",
+        align: "vertical",
+        isCover: false,
+        className: "".concat(_TagWithIconModule["default"].wrapper, " ").concat(_TagWithIconModule["default"][palette], " ").concat(_TagWithIconModule["default"][size], " ").concat(className),
+        dataId: dataId,
+        title: title
+      }, iconName ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: iconName,
+        size: iconSize,
+        iconClass: "".concat(text ? _TagWithIconModule["default"].iconSpace : '', " ").concat(iconClass, " ")
+      }) : null, text ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        "data-title": text,
+        className: "".concat(_TagWithIconModule["default"].text, " ").concat(_TagWithIconModule["default"][size], "_text ").concat(isBold ? _TagWithIconModule["default"].bold : '')
+      }, text) : null);
+    }
+  }]);
+  return TagWithIcon;
+}(_react["default"].Component);
+exports["default"] = TagWithIcon;
+TagWithIcon.defaultProps = {
+  iconSize: '9',
+  size: 'large',
+  iconClass: '',
+  isBold: true,
+  palette: 'grey',
+  className: ''
+};
+TagWithIcon.propTypes = {
+  iconClass: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  isBold: _propTypes["default"].bool,
+  palette: _propTypes["default"].oneOf(['yellow', 'blue', 'grey']),
+  size: _propTypes["default"].oneOf('small', 'large'),
+  className: _propTypes["default"].string,
+  text: _propTypes["default"].string
+};
+if (false) {
+  TagWithIcon.docs = {
+    componentGroup: 'TagWithIcon'
+  };
+}

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+.small,
+.large {
+  max-width: 100%;
+  height: var(--zd_size18);
+}
+.small, .large {
+  border: 1px solid;
+  border-color: var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6);
+}
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .iconSpace{
+  margin-right: var(--zd_size4);
+}
+[dir=rtl] .iconSpace{
+  margin-left: var(--zd_size4);
+}
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+}

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -581,8 +581,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         ListItemWithIconProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
         _customProps$ListItem2 = customProps.ListItemProps,
         ListItemProps = _customProps$ListItem2 === void 0 ? {} : _customProps$ListItem2;
-      var customDropBox = customClass.customDropBox,
-        customListBox = customClass.customListBox;
+      var _customClass$customDr = customClass.customDropBox,
+        customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
+        _customClass$customLi = customClass.customListBox,
+        customListBox = _customClass$customLi === void 0 ? '' : _customClass$customLi;
       var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
       var Component = isToggleStateNeeded ? children.type : null,
         componentProps = isToggleStateNeeded ? children.props : null;

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -28,6 +28,7 @@ var defaultProps = {
   customProps: {},
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -75,6 +75,10 @@ var propTypes = {
     ListItemProps: _propTypes["default"].object
   }),
   preventPopupClose: _propTypes["default"].bool,
-  needMultiLineText: _propTypes["default"].bool
+  needMultiLineText: _propTypes["default"].bool,
+  customClass: _propTypes["default"].shape({
+    customDropBox: _propTypes["default"].string,
+    customListBox: _propTypes["default"].string
+  })
 };
 exports.propTypes = propTypes;

package/lib/layout/List/CommentsList/CommentListItemCommon.module.css

@@ -0,0 +1,143 @@
+.private {
+  background-color: var(--zdt_commentList_private_bg);
+  border: 1px solid var(--zdt_commentList_private_border);
+}
+.public {
+  background-color: var(--zdt_commentList_public_bg);
+  border: 1px solid var(--zdt_commentList_public_border);
+}
+.normal {
+  background-color: var(--zdt_commentList_normal_bg);
+  border: 1px solid var(--zdt_conversationList_border);
+}
+.publicIcon :global .path2:before {
+  color: var(--zdt_commentList_publicIcon_border);
+}
+.publicIcon :global .path1:before {
+  color: var(--zdt_commentList_publicIcon_bg);
+}
+.privateIcon :global .path2:before {
+  color: var(--zdt_commentList_privateIcon_border);
+}
+.privateIcon :global .path1:before {
+  color: var(--zdt_commentList_privateIcon_bg);
+}
+[dir=ltr] .avatarWrapper {
+  margin-right: var(--zd_size15);
+}
+[dir=rtl] .avatarWrapper {
+  margin-left: var(--zd_size15);
+}
+.agentName {
+  font-size: var(--zd_font_size14);
+  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_conversationList_agentName_text);
+}
+.agentNameHover:hover {
+  color: var(--zdt_conversationList_agent_text);
+  cursor: pointer;
+}
+.editTxt {
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_conversationList_secondaryText);
+}
+.editAccess {
+  cursor: pointer;
+}
+.editAccess:hover {
+  color: var(--zdt_commentList_edit_hover_text);
+}
+.attachCount {
+  top: calc(var(--zd_size4) * -1);
+  color: var(--zdt_conversationList_attachCount_text);
+  position: relative;
+  font-size: var(--zd_font_size10);
+}
+.contentWrapper {
+  margin-bottom: var(--zd_size12);
+}
+.attachmentWrapper {
+  margin-top: var(--zd_size4);
+}
+
+.thrdPlain {
+  font-size: var(--zd_font_size14);
+  word-break: break-word;
+  composes: oflowx from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_conversationList_thread_text);
+}
+.thrdPlain table {
+  word-break: initial;
+}
+.thrdPlainContent {
+  line-height: var(--zd_size20);
+}
+.thrdPlain a {
+  color: var(--zdt_conversationList_primary_text);
+}
+.thrdPlain a:hover {
+  color: var(--zdt_conversationList_primary_hover_text);
+}
+.thrdPlain img[src*='/ImageDisplay'], .thrdPlain img[src*='/inlineImages'], .thrdPlain img[src*='/ViewMailAttachment.do'] {
+  cursor: pointer;
+}
+[dir=ltr] .thrdPlain blockquote {
+  margin: 0 0 0 var(--zd_size4);
+}
+[dir=rtl] .thrdPlain blockquote {
+  margin: 0 var(--zd_size4) 0 0;
+}
+.thrdPlain img {
+  max-width: 100%;
+}
+.whiteBg.thrdPlain a,
+.whiteBg .thrdPlain a {
+  color: var(--zdt_conversationList_agent_text);
+}
+.whiteBg.thrdPlain a:hover, 
+.whiteBg .thrdPlain a:hover {
+  color: var(--zdt_conversationList_agent_hover_text);
+}
+
+/* opposite colors applied in variables to show original theme colors for selection area in inverted threads */
+.invert .thrdPlain ::selection,
+.invert.thrdPlain ::selection,
+.invert .thrdPlain::selection,
+.invert.thrdPlain::selection {
+  color: var(--zdt_inverted_selection_text);
+}
+.invert .thrdPlain ::selection, .invert.thrdPlain ::selection, .invert .thrdPlain::selection, .invert.thrdPlain::selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert .thrdPlain ::-moz-selection,
+.invert.thrdPlain ::-moz-selection,
+.invert .thrdPlain::-moz-selection,
+.invert.thrdPlain::-moz-selection {
+  color: var(--zdt_inverted_selection_text);
+}
+.invert .thrdPlain ::-moz-selection, .invert.thrdPlain ::-moz-selection, .invert .thrdPlain::-moz-selection, .invert.thrdPlain::-moz-selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert .thrdPlain,
+.invert.thrdPlain {
+  filter: invert(1) hue-rotate(180deg);
+}
+/* <img> and <a> elements selection inverted again below. So, to avoid opposite colors in <img> & <a> area original colors variables used below */
+.invert .thrdPlain img::selection,
+.invert.thrdPlain img::selection {
+  color: var(--zdt_selection_text);
+}
+.invert .thrdPlain img::selection, .invert.thrdPlain img::selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert .thrdPlain img::-moz-selection,
+.invert.thrdPlain img::-moz-selection {
+  color: var(--zdt_selection_text);
+}
+.invert .thrdPlain img::-moz-selection, .invert.thrdPlain img::-moz-selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert img,
+.invert video {
+  filter: invert(1) hue-rotate(180deg);
+}

package/lib/layout/List/CommentsList/CommentListItemFromTab.module.css

@@ -0,0 +1,50 @@
+.listWrapper,
+.mobileListWrapper {
+    letter-spacing: 0.2px;
+    transition: var(--zd_transition3)
+}.listWrapper, .mobileListWrapper {
+    padding-top: var(--zd_size12);
+    padding-bottom: var(--zd_size12);
+    margin: var(--zd_size8);
+    border-radius: var(--zd_size4)
+}
+[dir=ltr] .mobileListWrapper {
+    padding-left: var(--zd_size16);
+    padding-right: var(--zd_size16);
+}
+[dir=rtl] .mobileListWrapper {
+    padding-right: var(--zd_size16);
+    padding-left: var(--zd_size16);
+}
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size20);
+    padding-right: var(--zd_size12);
+}
+[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size20);
+    padding-left: var(--zd_size12);
+}
+  .lightAgentTxt {
+    font-size: var(--zd_font_size12);
+    color: var(--zdt_conversationList_secondaryText);
+  }
+  [dir=ltr] .lightAgentTxt {
+    margin-left: var(--zd_size4);
+  }
+  [dir=rtl] .lightAgentTxt {
+    margin-right: var(--zd_size4);
+  }
+  .attachIconWrapper {
+    composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  }
+  [dir=ltr] .attachIconWrapper {
+    margin-right: var(--zd_size8);
+    margin-left: var(--zd_size8);
+  }
+  [dir=rtl] .attachIconWrapper {
+    margin-left: var(--zd_size8);
+    margin-right: var(--zd_size8);
+  }
+.time {
+  font-size: var(--zd_size11)
+}

package/lib/layout/List/CommentsList/CommentListItemFromTabUI.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CommentListItemFromTabUI;
+var _react = _interopRequireDefault(require("react"));
+var _Layout = require("@zohodesk/components/es/Layout");
+var _CommentListItemFromTabModule = _interopRequireDefault(require("./CommentListItemFromTab.module.css"));
+var _SubTabListItemTabCommonModule = _interopRequireDefault(require("../common/SubTabListItemTabCommon.module.css"));
+var _CommentListItemCommonModule = _interopRequireDefault(require("./CommentListItemCommon.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function CommentListItemFromTabUI(props) {
+  var isPeekView = props.isPeekView,
+    isPublic = props.isPublic,
+    dataId = props.dataId,
+    getAvatar = props.getAvatar,
+    getName = props.getName,
+    getLightAgent = props.getLightAgent,
+    getTag = props.getTag,
+    getTime = props.getTime,
+    getEdit = props.getEdit,
+    getAttachmentIcon = props.getAttachmentIcon,
+    getAttachment = props.getAttachment,
+    getMoreDropdown = props.getMoreDropdown,
+    getContent = props.getContent,
+    from = props.from,
+    hasPrivacyMode = props.hasPrivacyMode,
+    hasEditHistoryPermission = props.hasEditHistoryPermission,
+    isPopupOpen = props.isPopupOpen,
+    isNightMode = props.isNightMode,
+    onContentWrapperClick = props.onContentWrapperClick,
+    contentWrapperRef = props.contentWrapperRef,
+    key = props.key,
+    id = props.id,
+    customList = props.customList,
+    isMobile = props.isMobile,
+    ViewInLightDarkBg = props.ViewInLightDarkBg,
+    getTheme = props.getTheme,
+    children = props.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    "data-desk-mode": ViewInLightDarkBg ? 'default' : '',
+    "data-desk-theme": ViewInLightDarkBg ? getTheme : '',
+    className: "".concat(_SubTabListItemTabCommonModule["default"].wrapper, "\n                ").concat(isMobile ? _CommentListItemFromTabModule["default"].mobileListWrapper : _CommentListItemFromTabModule["default"].listWrapper, "\n                    ").concat(hasPrivacyMode ? isPublic ? _CommentListItemCommonModule["default"]["public"] : _CommentListItemCommonModule["default"]["private"] : _CommentListItemCommonModule["default"].normal, "\n                    ").concat(customList),
+    "data-id": dataId,
+    key: key,
+    id: id
+  }, children ? children : null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: getContent || getAttachment ? _CommentListItemCommonModule["default"].contentWrapper : ''
+  }, getAvatar ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    className: _CommentListItemCommonModule["default"].avatarWrapper
+  }, getAvatar({
+    size: 'xsmall',
+    iconColor: hasPrivacyMode ? isPublic ? _CommentListItemCommonModule["default"].publicIcon : _CommentListItemCommonModule["default"].privateIcon : ''
+  })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    "data-a11y-focus": true,
+    onClick: onContentWrapperClick
+  }, getName ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, getName({
+    'is-dot': 'true',
+    className: "".concat(_CommentListItemCommonModule["default"].agentName, " ").concat(from != 'editHistory' ? _CommentListItemCommonModule["default"].agentNameHover : '', " ").concat(_SubTabListItemTabCommonModule["default"].dotted)
+  })) : null, getLightAgent ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), getLightAgent({
+    'is-dot': 'true',
+    className: "".concat(_CommentListItemFromTabModule["default"].lightAgentTxt, " ").concat(_SubTabListItemTabCommonModule["default"].dotted)
+  })) : null)), getAttachmentIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getAttachmentIcon({
+    innerProps: {
+      className: _CommentListItemCommonModule["default"].attachCount
+    },
+    wrapperProps: {
+      className: _CommentListItemFromTabModule["default"].attachIconWrapper
+    }
+  })) : null, getMoreDropdown ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemTabCommonModule["default"].posRel, " ").concat(!isPopupOpen ? _SubTabListItemTabCommonModule["default"].floatingWrapper : '')
+  }, getMoreDropdown()) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, getTag ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getTag())) : null, getTime ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: _SubTabListItemTabCommonModule["default"].dotted
+  }, getTime(isMobile ? {
+    textClass: _CommentListItemFromTabModule["default"].time
+  } : ''))) : null, getEdit ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), getEdit({
+    'is-dot': 'true',
+    className: "".concat(_CommentListItemCommonModule["default"].editTxt, " ").concat(hasEditHistoryPermission ? _CommentListItemCommonModule["default"].editAccess : '', " ").concat(_SubTabListItemTabCommonModule["default"].dotted)
+  })) : null))), /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: onContentWrapperClick,
+    ref: contentWrapperRef
+  }, getContent ? getContent({
+    className: "".concat(isNightMode ? ViewInLightDarkBg ? _CommentListItemCommonModule["default"].whiteBg : _CommentListItemCommonModule["default"].invert : '', " ").concat(_CommentListItemCommonModule["default"].thrdPlain)
+  }) : null, getAttachment ? getAttachment({
+    customWrapperClass: {
+      className: _CommentListItemCommonModule["default"].attachmentWrapper
+    },
+    size: 'small'
+  }) : null));
+}