@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/es/TextBoxIcon/props/propTypes.js

@@ -40,7 +40,8 @@ export const propTypes = { ...TextBox_propTypes,
   customClass: PropTypes.shape({
     customTBoxWrap: PropTypes.string,
     customTextBox: PropTypes.string,
-    customTBoxIcon: PropTypes.string
+    customTBoxIcon: PropTypes.string,
+    customTBoxLine: PropTypes.string
   }),
   iconOnHover: PropTypes.bool,
   isFocus: PropTypes.bool,

package/es/utils/Common.js

@@ -376,7 +376,7 @@ export function getElementSpace(elementRef) {
 }
 export function getSearchString() {
   let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 export function findScrollEnd(element) {
   let {
@@ -413,6 +413,5 @@ export function isTextSelected() {
 
   return false;
 }
-export const DUMMY_ARRAY = Object.freeze([]);
-export const DUMMY_OBJECT = Object.freeze({});
-export const DUMMY_FUNCTION = () => {};
+export const DUMMY_OBJECT = {};
+export const DUMMY_ARRAY = [];

package/es/utils/dropDownUtils.js

@@ -1,13 +1,14 @@
 /***** Libraries *****/
 import { createSelector } from 'reselect';
-import { DUMMY_ARRAY, getIsEmptyValue, getSearchString } from "./Common";
-import selectn from 'selectn';
+import { getIsEmptyValue, getSearchString } from "./Common";
 export const dummyArray = [];
 export const dummyObj = {};
 export const getOptions = props => props.options || dummyArray;
 
 const getOptionsOrder = props => props.optionsOrder || dummyArray;
 
+const getLimit = props => props.limit || 0;
+
 const getSelectedOptionsSel = props => props.selectedOptions || dummyArray;
 
 const getSearchStr = props => props.searchStr || '';
@@ -42,8 +43,12 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getlistItemCustomProps = props => props.listItemCustomProps || dummyObj;
+
+const defaultSearchFields = ['value'];
+
 const getSearchFields = props => {
-  return props.searchFields || ['value'];
+  return props.searchFields || defaultSearchFields;
 }; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
 //   const matchedFields = searchFields.filter(element => {
 //     return getSearchString(obj[element]).indexOf(searchStr) !== -1
@@ -130,7 +135,7 @@ export const extractOptionId = id => {
   }
 };
 export const extractOptionIdFromJson = (id, localData) => localData[id] || {};
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -146,13 +151,13 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
-        listItemProps: listStyle
+        listItemProps: listStyle,
+        listItemCustomProps: listStyleCustomProps
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
       const secondaryValue = typeof option === 'object' ? option[impSecondaryField || secondaryField] : '';
-      const photoURL = typeof option === 'object' ? option[impImageField || imageField] : '';
-      const colorCode = selectn('colorCode', option); // grouping options (group select/MultiSelect)
+      const photoURL = typeof option === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
 
       id = !getIsEmptyValue(id) ? optionIdGrouping(id, prefixText) : '';
       const additionalSearchFieldData = searchFields.reduce((value, item) => {
@@ -193,8 +198,8 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.listItemProps = listStyle || listItemProps;
         }
 
-        if (colorCode) {
-          optionDetails.colorCode = colorCode;
+        if (listStyleCustomProps || listItemCustomProps) {
+          optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
         }
 
         normalizedFormatOptions[id] = optionDetails;
@@ -212,10 +217,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
     optionsOrder: remvampOptionIds
   };
 });
-export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) => {
-  const output = [];
-  const revampSelectedOptions = [];
-  const normalizedSelectedOptions = {};
+export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback, getLimit], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback, limit) => {
+  let output = [];
+  let revampSelectedOptions = [];
+  let normalizedSelectedOptions = {};
   selectedOptionsLength = !getIsEmptyValue(selectedOptionsLength) ? selectedOptionsLength : selectedOptions.length;
 
   for (let i = 0; i < selectedOptionsLength; i++) {
@@ -240,6 +245,12 @@ export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelect
     }
   }
 
+  if (limit && limit > 0) {
+    output = output.slice(0, limit);
+    revampSelectedOptions = revampSelectedOptions.slice(0, limit);
+    normalizedSelectedOptions = Object.fromEntries(Object.entries(normalizedSelectedOptions).slice(0, limit));
+  }
+
   return {
     formatSelectedOptions: output,
     normalizedSelectedOptions,
@@ -317,7 +328,8 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
       id: groupId,
       name,
       valueField,
-      textField
+      textField,
+      secondaryField
     } = group;
 
     if (!getIsEmptyValue(groupId) && groupIds.indexOf(groupId) === -1) {
@@ -332,6 +344,7 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
+        secondaryField,
         prefixText: groupId,
         allowValueFallback
       });
@@ -429,7 +442,8 @@ export const filterSelectedOptions = function () {
   let {
     selectedOptions = dummyArray,
     propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray
+    disabledOptions = dummyArray,
+    limit
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
@@ -451,8 +465,18 @@ export const filterSelectedOptions = function () {
 
     return true;
   });
+  const totalSelectedOptions = [...oldValidSelectedOptions, ...newlyAddedOptions];
+
+  if (limit && limit > 0) {
+    if (totalSelectedOptions.length > limit) {
+      return {
+        newSelectedOptions: totalSelectedOptions.slice(0, limit)
+      };
+    }
+  }
+
   return {
-    newSelectedOptions: [...oldValidSelectedOptions, ...newlyAddedOptions]
+    newSelectedOptions: totalSelectedOptions
   };
 };
 export const makeGetIsShowClearIcon = () => createSelector([getSelectedOptionsSel, getDisabledOptions], (selectedOptions, disabledOptions) => {

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

@@ -618,10 +618,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-                  data-id="hourField_textBox"
+                  class="container effect  input  flex rowdir"
+                  data-id="containerComponent"
                   data-selector-id="textBoxIcon"
-                  data-test-id="hourField_textBox"
+                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -695,6 +695,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="line borderColor_default "
+                  />
                 </div>
               </div>
             </div>
@@ -715,10 +718,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-                  data-id="minuteField_textBox"
+                  class="container effect  input  flex rowdir"
+                  data-id="containerComponent"
                   data-selector-id="textBoxIcon"
-                  data-test-id="minuteField_textBox"
+                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -792,6 +795,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="line borderColor_default "
+                  />
                 </div>
               </div>
             </div>
@@ -812,10 +818,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-                  data-id="ampmField_textBox"
+                  class="container effect  input  flex rowdir"
+                  data-id="containerComponent"
                   data-selector-id="textBoxIcon"
-                  data-test-id="ampmField_textBox"
+                  data-test-id="containerComponent"
                 >
                   <div
                     class="grow basis shrinkOff"
@@ -889,6 +895,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="line borderColor_default "
+                  />
                 </div>
               </div>
             </div>

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,10 +11,10 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
-        data-id="dateWidget"
+        class="container effect  placeHolder  flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="dateWidget"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -69,6 +69,9 @@ exports[`DateWidget rendering the defult props 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,10 +27,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-            data-id="hourField_textBox"
+            class="container effect  input  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="hourField_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -102,6 +102,9 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>
@@ -122,10 +125,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-            data-id="minuteField_textBox"
+            class="container effect  input  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="minuteField_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -197,6 +200,9 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>
@@ -217,10 +223,10 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
-            data-id="ampmField_textBox"
+            class="container effect  input  flex rowdir"
+            data-id="containerComponent"
             data-selector-id="textBoxIcon"
-            data-test-id="ampmField_textBox"
+            data-test-id="containerComponent"
           >
             <div
               class="grow basis shrinkOff"
@@ -292,6 +298,9 @@ exports[`Time rendering the defult props 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="line borderColor_default "
+            />
           </div>
         </div>
       </div>

package/lib/ListItem/ListItem.js

@@ -124,7 +124,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
-          renderBeforeChildren = _this$props4.renderBeforeChildren;
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -132,7 +132,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,
@@ -169,15 +171,13 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         className: _ListItemModule["default"].leftBox
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].titleBox
-      }, renderBeforeChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
-        className: _ListItemModule["default"].beforeChild
-      }, renderBeforeChildren) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, renderValueRightPlaceholderNode()) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: _ListItemModule["default"].children

package/lib/ListItem/ListItem.module.css

@@ -70,12 +70,6 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
-}
 .value, .multiLineValue {
   line-height: 1.5385;
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -130,6 +130,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 +145,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 +203,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, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, 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

@@ -118,6 +118,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 +135,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 +172,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, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, 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

@@ -123,9 +123,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 +180,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, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholderClass
+      }, 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

@@ -119,6 +119,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 +136,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 +175,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, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: customValueRightPlaceholder
+      }, 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,12 +15,27 @@ describe('ListItem', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with renderBeforeChildren', function () {
+  test('ListItem with renderValueRightPlaceholderNode', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-      renderBeforeChildren: /*#__PURE__*/_react["default"].createElement("span", null, "Before children")
-    }, "Content")),
+      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();
+  });
 });