@zohodesk/components 1.0.0-temp-199.14 → 1.0.0-temp-222

package/es/MultiSelect/MultiSelect.js

@@ -272,7 +272,8 @@ export class MultiSelectComponent extends React.Component {
     const {
       selectedOptions,
       needLocalSearch,
-      keepSelectedOptions
+      keepSelectedOptions,
+      searchFields
     } = this.props;
     const {
       suggestions,
@@ -282,7 +283,8 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions,
       searchStr: getSearchString(searchStr),
       needSearch: needLocalSearch,
-      keepSelectedOptions
+      keepSelectedOptions,
+      searchFields
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -1018,11 +1020,8 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps
+      secondaryField
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1110,10 +1109,10 @@ export class MultiSelectComponent extends React.Component {
       dataId: `${dataId}_Options`,
       palette: palette,
       selectedOptions: selectedOptionIds,
+      secondaryField: secondaryField,
       a11y: {
         role: 'option'
-      },
-      ...SuggestionsProps
+      }
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -89,7 +89,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       needEffect,
       isLoading,
       keepSelectedOptions,
-      customProps
+      customProps,
+      secondaryField
     } = this.props;
     let {
       SuggestionsProps = {}
@@ -177,6 +178,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       dataId: `${dataId}_Options`,
       palette: palette,
       selectedOptions: selectedOptionIds,
+      secondaryField: secondaryField,
       a11y: {
         role: 'option'
       },

package/es/MultiSelect/Suggestions.js

@@ -8,6 +8,7 @@ import ListItem from "../ListItem/ListItem";
 import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
 import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Container, Box } from "../Layout";
+import ListContainer from "../ListItem/ListContainer";
 export default class Suggestions extends React.PureComponent {
   render() {
     const {
@@ -28,23 +29,18 @@ export default class Suggestions extends React.PureComponent {
       palette,
       htmlId,
       a11y,
-      customClass,
-      needMultiLineText
+      secondaryField
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''
@@ -69,7 +65,6 @@ export default class Suggestions extends React.PureComponent {
       });
       const commonProps = {
         isDisabled,
-        needMultiLineText,
         ...listItemCustomProps
       };
 
@@ -78,7 +73,33 @@ export default class Suggestions extends React.PureComponent {
           ListItemProps: { ...listItemProps
           }
         };
-      }
+      } // if(secondaryField) {
+      //   return (
+      //     <ListContainer
+      //       active={isActive}
+      //       iconSize={iconSize}
+      //       size={listItemSize}
+      //       palette={palette}
+      //       a11y={list_a11y}
+      //       highlight={isHighlight}
+      //       isDisabled={isDisabled}
+      //       autoHover
+      //       needTick={needTick}
+      //       needBorder={needBorder}
+      //       onClick={onClick}
+      //       onMouseEnter={onMouseEnter}
+      //       eleRef={getRef}
+      //       key={`${id}avatarListItem`}
+      //     >
+      //       <Box flexible>
+      //         <div>{value}</div>
+      //         <div>{suggestion[secondaryField]}</div>
+      //       </Box>
+      //     </ListContainer>
+      //   )
+      // }
+      // else
+
 
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
@@ -99,7 +120,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: suggestion[secondaryField] || undefined
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -119,7 +141,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: suggestion[secondaryField] || undefined
         });
       }
 

package/es/MultiSelect/props/defaultProps.js

@@ -38,7 +38,6 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -167,7 +166,5 @@ export const SelectedOptions_defaultProps = {
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {},
-  customClass: {},
-  needMultiLineText: false
+  a11y: {}
 };

package/es/MultiSelect/props/propTypes.js

@@ -46,6 +46,8 @@ export const MultiSelect_propTypes = {
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),
+  secondaryField: PropTypes.string,
+  searchFields: PropTypes.arrayOf(PropTypes.string),
   isAnimate: PropTypes.bool,
   isBoxPaddingNeed: PropTypes.bool,
   isDisabled: PropTypes.bool,
@@ -110,8 +112,7 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool
@@ -172,6 +173,7 @@ export const Suggestions_propTypes = {
   palette: PropTypes.string,
   selectedOptions: PropTypes.array,
   htmlId: PropTypes.string,
+  secondaryField: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -179,11 +181,7 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  })),
-  customClass: PropTypes.shape({
-    containerClass: PropTypes.string
-  }),
-  needMultiLineText: PropTypes.bool
+  }))
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -255,10 +253,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  allowValueFallback: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -289,6 +284,8 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
   needEffect: PropTypes.bool,
+  secondaryField: PropTypes.string,
+  searchFields: PropTypes.arrayOf(PropTypes.string),
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),

package/es/Select/GroupSelect.js

@@ -593,9 +593,6 @@ export class GroupSelectComponent extends PureComponent {
       dataSelectorId,
       customProps
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -794,8 +791,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...SuggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/SelectWithAvatar.js

@@ -165,12 +165,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      getTargetRef
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -327,8 +323,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...SuggestionsProps
+        }
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -367,8 +367,7 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {},
-      ListItemProps = {}
+      TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -531,8 +530,7 @@ 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

@@ -98,8 +98,7 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

package/es/Select/props/propTypes.js

@@ -178,8 +178,7 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   allowValueFallback: PropTypes.bool
 };
@@ -242,10 +241,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -307,7 +303,6 @@ export const SelectWithIcon_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   })
 };

package/es/common/common.module.css

@@ -260,6 +260,12 @@
   justify-content: space-between;
 }
 
+.justifyFStart {
+  -webkit-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+}
+
 .justifyFend {
   -webkit-box-pack: flex-end;
   -ms-flex-pack: flex-end;
@@ -493,7 +499,6 @@
   display: -webkit-box;
   overflow: hidden;
 }
-
 .lineClamp {
   composes: wbreak clamp;
   -webkit-line-clamp: var(--line-clamp,3);

package/es/utils/dropDownUtils.js

@@ -40,23 +40,32 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getSearchFields = props => {
+  return props.searchFields || ['value'];
+};
+
+const isExistInSearch = function () {
+  let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let option = arguments.length > 2 ? arguments[2] : undefined;
+  const matchedFields = searchFields.filter(element => {
+    return getSearchString(option[element]).indexOf(searchStr) !== -1;
+  });
+  return matchedFields.length !== 0;
+};
+
 const getAllowValueFallback = props => props.allowValueFallback !== false;
 
-export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
+export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions, getSearchFields], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions, searchFields) => {
   const suggestions = [];
   const suggestionIds = [];
   options.forEach(option => {
-    const {
-      id,
-      value = ''
-    } = option;
-    const valueString = getSearchString(value);
     const searchString = getSearchString(searchStr);
-    const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
+    const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : isExistInSearch(searchFields, searchString, option) : true;
 
-    if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
+    if (selectedOptions.indexOf(option.id) === -1 && isMatch || keepSelectedOptions) {
       suggestions.push(option);
-      suggestionIds.push(id);
+      suggestionIds.push(option.id);
     }
   });
   return {
@@ -132,7 +141,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
 
       if (remvampOptionIds.indexOf(id) === -1 && !getIsEmptyValue(id) && !getIsEmptyValue(value)) {
         remvampOptionIds.push(id);
-        const optionDetails = {
+        const optionDetails = { ...option,
           id,
           value,
           optionType: impOptionType || optionType

package/lib/ListItem/ListItem.js

@@ -122,8 +122,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText,
-          lhsBoxAlign = _this$props4.lhsBoxAlign;
+          needMultiLineText = _this$props4.needMultiLineText;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -151,8 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
-        align: lhsBoxAlign,
+        customClass: customListItem,
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -173,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : '', " ").concat(customTickIcon),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItem.module.css

@@ -57,7 +57,7 @@
   --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: var(--zd_size48);
+  --listitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
@@ -73,7 +73,7 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  composes: lineClamp from '../common/common.module.css';
+ composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -85,10 +85,6 @@
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
-.iconBoxTopAlign {
-  align-self: start;
-  composes: dflex alignVertical from '../common/common.module.css';
-}
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
@@ -96,17 +92,36 @@
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
-.smallIconBox {
-  /*  Variable:Ignore  */
-  height: var(--zd_font_size20);
+
+.lhsAvatarBox,
+.lhsJustifyContent_start,
+.lhsJustifyContent_center,
+.lhsJustifyContent_end {
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsJustifyContent_start {
+  composes: justifyFStart from '../common/common.module.css';
 }
-.mediumIconBox {
-  /*  Variable:Ignore  */
-  height: var(--zd_font_size21);
+.lhsJustifyContent_center {
+  composes: alignHorizontal from '../common/common.module.css';
 }
-.largeIconBox {
-  /*  Variable:Ignore  */
-  height: var(--zd_font_size28);
+.lhsJustifyContent_end {
+  composes: justifyFend from '../common/common.module.css';
+}
+
+.lhsBox_small,
+.lhsBox_medium,
+.lhsBox_large{
+  height: 1em ;
+}
+.lhsBox_small {
+  font-size: var(--zd_font_size20) ;
+}
+.lhsBox_medium {
+  font-size: var(--zd_font_size21) ;
+}
+.lhsBox_large {
+  font-size: var(--zd_font_size28) ;
 }
 
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
@@ -171,17 +186,33 @@
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
 
+.secondaryField{
+  color:var(--zdt_listitem_secondaryfield_text);
+  font-size: var(--zd_font_size12) ;
+  line-height: 1.25;
+  /* margin-top:1px */
+}
+
+
 .tickIcon,
 .defaultTick,
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
+  top:50% ;
+}
+
+
+.tickIcon, .defaultTick, .darkTick {
+  transform: translateY(-50%);
 }
 
+
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
   right: var(--zd_size20) ;
 }
 
+
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
@@ -212,17 +243,9 @@
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
-.largeSizeContainer{
-  --listitem_height: auto;
-  --listitem_min_height: var(--zd_size48);
-}
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}

package/lib/ListItem/ListItemWithAvatar.js

@@ -129,7 +129,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          lhsBoxAlign = _this$props4.lhsBoxAlign;
+          secondaryValue = _this$props4.secondaryValue,
+          lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -153,11 +154,6 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       var ariaHidden = listA11y.ariaHidden;
       var isDarkPalette = palette === 'dark';
       var dataIdString = value ? value : dataId;
-      var sizeClassMap = {
-        small: _ListItemModule["default"].smallIconBox,
-        medium: _ListItemModule["default"].mediumIconBox,
-        large: _ListItemModule["default"].largeIconBox
-      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -168,7 +164,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
+        customClass: customListItem,
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
@@ -178,7 +174,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: " ".concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : '', " ").concat(_ListItemModule["default"].leftAvatar)
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].leftAvatar, " ").concat(lhsAlignContent !== 'center' ? "".concat(_ListItemModule["default"].lhsAvatarBox, " ").concat(_ListItemModule["default"]["lhsBox_".concat(size)]) : '')
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -199,13 +196,19 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         needTitle: needAvatarTitle,
         palette: isDarkPalette ? 'info' : avatarPalette,
         customClass: customAvatar
-      }, AvatarProps))) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, AvatarProps))) : null, value || secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : secondaryValue,
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value)
+      }, secondaryValue) : null)) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")