@zohodesk/components 1.4.17 → 1.4.18

package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap

@@ -1,5 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card rendering the a11y 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      role="button"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the children 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="customClass flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the dataId value 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="customdataId"
+    data-selector-id="container"
+    data-test-id="customdataId"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -11,6 +93,49 @@ exports[`Card rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Card rendering the htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+      id="customHtmlId"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card rendering the isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-scroll="true"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+     
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="CardContent"
+      data-selector-id="cardContent"
+      data-test-id="CardContent"
+    >
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
 <DocumentFragment>
   <div

package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardContent Should render with name - both 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollboth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - both 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollx"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - none 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollnone"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering children 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering customClass is true 1`] = `
+<DocumentFragment>
+  <div
+    class="cardCustomClass grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering shrink is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOn scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  />
+</DocumentFragment>
+`;

package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardHeader rendering the Children is true 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the customClass  1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll cardHeader-class shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  />
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the isScroll is true 1`] = `
+<DocumentFragment>
+  <div
+    class="scroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;

package/lib/ListItem/ListItem.js

@@ -19,6 +19,8 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
+var _utils = require("@zohodesk/utils");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -123,7 +125,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          secondaryValue = _this$props4.secondaryValue;
+          secondaryValue = _this$props4.secondaryValue,
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -131,7 +134,9 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
-          customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi;
+          customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi,
+          _customClass$customVa = customClass.customValueRightPlaceholder,
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -172,7 +177,9 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, (0, _utils.isRenderable)(renderValueRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: _ListItemModule["default"].children

package/lib/ListItem/ListItemWithAvatar.js

@@ -23,6 +23,8 @@ var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
 
 var _icons = require("@zohodesk/icons");
 
+var _utils = require("@zohodesk/utils");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -130,6 +132,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
@@ -144,7 +147,9 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           _customClass$customAv = customClass.customAvatar,
           customAvatar = _customClass$customAv === void 0 ? '' : _customClass$customAv,
           _customClass$customAv2 = customClass.customAvatarTeam,
-          customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2;
+          customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2,
+          _customClass$customVa = customClass.customValueRightPlaceholder,
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -200,16 +205,20 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         customClass: customAvatar
       }, AvatarProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "column"
+        className: _ListItemModule["default"].leftBox
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        adjust: true,
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, (0, _utils.isRenderable)(renderValueRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, secondaryValue) : null), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItemWithCheckBox.js

@@ -19,6 +19,8 @@ var _CheckBox = _interopRequireDefault(require("../CheckBox/CheckBox"));
 
 var _Layout = require("../Layout");
 
+var _utils = require("@zohodesk/utils");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -118,6 +120,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
 
@@ -134,7 +137,9 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customCh = customClass.customCheckBox,
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
-          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
+          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
+          _customClass$customVa = customClass.customValueRightPlaceholder,
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -169,16 +174,20 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         }
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "column"
+        className: _ListItemModule["default"].leftBox
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        adjust: true,
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, (0, _utils.isRenderable)(renderValueRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null)));
+      }, secondaryValue) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -19,6 +19,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("@zohodesk/utils");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -123,9 +125,11 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           disableTitle = _this$props4.disableTitle,
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
+          customValueRightPlaceholderClass = _this$props4.customValueRightPlaceholderClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -178,17 +182,21 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         className: iconClass
       }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "column"
+        className: _ListItemModule["default"].leftBox
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
-      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, (0, _utils.isRenderable)(renderValueRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholderClass
+      }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, secondaryValue) : null), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItemWithRadio.js

@@ -19,6 +19,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("@zohodesk/utils");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -119,6 +121,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -135,7 +138,9 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           _customClass$customRa = customClass.customRadio,
           customRadio = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadioWrap,
-          customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
+          customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
+          _customClass$customVa = customClass.customValueRightPlaceholder,
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -172,16 +177,20 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         }
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: "column"
+        className: _ListItemModule["default"].leftBox
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        adjust: true,
         "data-title": disableTitle ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, (0, _utils.isRenderable)(renderValueRightPlaceholderNode) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null)));
+      }, secondaryValue) : null));
     }
   }]);
 

package/lib/ListItem/__tests__/ListItem.spec.js

@@ -15,4 +15,27 @@ describe('ListItem', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItem with renderValueRightPlaceholderNode', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
+      }
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItem with renderValueRightPlaceholderNode & it\'s custom class', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
+      },
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -50,4 +50,27 @@ describe('ListItemWithAvatar', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithAvatar with renderValueRightPlaceholderNode', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
+      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
+      }
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with renderValueRightPlaceholderNode & it\'s custom class', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
+      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
+      },
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });