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

package/es/Select/SelectWithAvatar.js

@@ -41,6 +41,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
+      secondaryField,
       allowValueFallback
     } = props;
     return this.formatOptions({
@@ -48,6 +49,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
+      secondaryField,
       optionType: 'avatar',
       allowValueFallback
     });
@@ -165,6 +167,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
+      customProps,
       getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
@@ -187,6 +190,11 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = this.normalizedFormatOptions[selectedId] || {};
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps,
+      DropdownSearchTextBoxProps,
+      SuggestionsProps
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -246,7 +254,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       isClickable: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false
+      autoComplete: false,
+      ...TextBoxProps
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -295,7 +304,8 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaControls: setAriaId,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        ...DropdownSearchTextBoxProps
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -323,7 +333,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
+        },
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -328,6 +328,7 @@ class SelectWithIcon extends Component {
       targetOffset,
       isRestrictScroll,
       valueKey,
+      secondaryValueKey,
       idKey,
       needListBorder,
       needTick,
@@ -367,7 +368,8 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      ListItemProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -510,6 +512,7 @@ class SelectWithIcon extends Component {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, {
           key: options[idKey],
           value: options[valueKey],
+          secondaryValue: options[secondaryValueKey],
           size: "medium",
           onClick: this.handleChange,
           id: options[idKey],
@@ -530,7 +533,8 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          }
+          },
+          ...ListItemProps
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/props/defaultProps.js

@@ -6,6 +6,7 @@ export const Select_defaultProps = {
   dataId: 'selectComponent',
   dataSelectorId: 'select',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isDefaultSelectValue: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,
@@ -97,6 +98,7 @@ export const SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
+  customProps: {},
   needEffect: true,
   isLoading: false
 };

package/es/Select/props/propTypes.js

@@ -12,6 +12,7 @@ export const Select_propTypes = {
   defaultDropBoxPosition: PropTypes.string,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string,
+  isVirtualizerEnabled: PropTypes.bool,
   excludeOptions: PropTypes.array,
   getChildren: PropTypes.func,
   getContainerRef: PropTypes.func,
@@ -63,6 +64,8 @@ export const Select_propTypes = {
   searchBoxSize: PropTypes.string,
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
+  searchFields: PropTypes.arrayOf(PropTypes.string),
+  secondaryField: PropTypes.string,
   selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -120,6 +123,7 @@ export const GroupSelect_propTypes = {
   searchBoxPlaceHolder: PropTypes.string,
   needSearch: PropTypes.bool,
   searchEmptyMessage: PropTypes.string,
+  secondaryField: PropTypes.string,
   getRef: PropTypes.func,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -281,6 +285,7 @@ export const SelectWithIcon_propTypes = {
   removeClose: PropTypes.func,
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
+  secondaryValueKey: PropTypes.string,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selectedValue: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium']),
@@ -305,6 +310,7 @@ export const SelectWithIcon_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object
   })
 };

package/es/utils/Common.js

@@ -413,4 +413,5 @@ export function isTextSelected() {
 
   return false;
 }
-export const DUMMY_OBJECT = {};
+export const DUMMY_OBJECT = {};
+export const DUMMY_ARRAY = [];

package/es/utils/dropDownUtils.js

@@ -43,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
@@ -131,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 = {};
@@ -147,7 +151,8 @@ 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 : '';
@@ -193,6 +198,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.listItemProps = listStyle || listItemProps;
         }
 
+        if (listStyleCustomProps || listItemCustomProps) {
+          optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
+        }
+
         normalizedFormatOptions[id] = optionDetails;
         normalizedAllOptions[id] = { ...option,
           groupId: prefixText
@@ -319,7 +328,8 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
       id: groupId,
       name,
       valueField,
-      textField
+      textField,
+      secondaryField
     } = group;
 
     if (!getIsEmptyValue(groupId) && groupIds.indexOf(groupId) === -1) {
@@ -334,6 +344,7 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
+        secondaryField,
         prefixText: groupId,
         allowValueFallback
       });

package/lib/ListItem/ListItem.js

@@ -123,7 +123,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 +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,
@@ -172,7 +175,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, 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/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,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();
+  });
 });

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

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

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

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

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

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