@zohodesk/components 1.0.0-temp-220.7 → 1.0.0-temp-223

package/es/MultiSelect/MultiSelect.module.css

@@ -200,7 +200,15 @@
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
-  border: 0;
+  border: 0
+}
+
+[dir=ltr] .more {
+  margin-right:var(--zd_size3) 
+}
+
+[dir=rtl] .more {
+  margin-left:var(--zd_size3) 
 }
 
 .rightPlaceholder{

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -42,7 +42,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       textField,
       imageField,
       disabledOptions,
-      allowValueFallback
+      allowValueFallback,
+      searchFields,
+      secondaryField
     } = props;
     return this.formatOptions({
       options,
@@ -51,7 +53,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       imageField,
       optionType: 'avatar',
       disabledOptions,
-      allowValueFallback
+      allowValueFallback,
+      searchFields,
+      secondaryField
     });
   }
 

package/es/MultiSelect/Suggestions.js

@@ -46,6 +46,7 @@ export default class Suggestions extends React.PureComponent {
       const {
         id,
         value,
+        secondaryValue,
         photoURL,
         icon,
         optionType,
@@ -92,7 +93,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -112,7 +114,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         });
       }
 

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -13,27 +13,48 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
   >
     <div
       aria-hidden="true"
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="MultiSelectHeader_selectAll_Icon"
       data-selector-id="box"
       data-test-id="MultiSelectHeader_selectAll_Icon"
     >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-androidd    "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size15);"
-      />
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-androidd    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size15);"
+        />
+      </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
-      data-id="MultiSelectHeader_selectAll_Text"
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Text"
+      data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="MultiSelectHeader_selectAll_Text"
+          data-selector-id="box"
+          data-test-id="MultiSelectHeader_selectAll_Text"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>

package/es/MultiSelect/props/propTypes.js

@@ -46,6 +46,7 @@ export const MultiSelect_propTypes = {
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),
+  searchFields: PropTypes.arrayOf(PropTypes.string),
   isAnimate: PropTypes.bool,
   isBoxPaddingNeed: PropTypes.bool,
   isDisabled: PropTypes.bool,
@@ -132,6 +133,7 @@ export const MultiSelectWithAvatar_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
+  secondaryField: PropTypes.string,
   ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
@@ -281,6 +283,7 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
   needEffect: PropTypes.bool,
+  secondaryField: PropTypes.string,
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),

package/es/Popup/Popup.js

@@ -74,9 +74,8 @@ const Popup = function (Component) {
         isMobile: false
       };
       this.togglePopup = this.togglePopup.bind(this);
-      this.closePopups = this.closePopups.bind(this);
-      this.handleDocumentInteraction = this.handleDocumentInteraction.bind(this);
       this.documentClickHandler = this.documentClickHandler.bind(this);
+      this.documentClickHandler1 = this.documentClickHandler1.bind(this);
       this.removeClose = this.removeClose.bind(this);
       this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
       this.openPopupOnly = this.openPopupOnly.bind(this);
@@ -134,11 +133,11 @@ const Popup = function (Component) {
       popups[group] = groupPopups;
 
       if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-        document.addEventListener('click', this.handleDocumentInteraction, true);
         document.addEventListener('click', this.documentClickHandler, false);
         document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
         window.addEventListener('resize', this.handleResize);
+        document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -225,11 +224,11 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        document.removeEventListener('click', this.handleDocumentInteraction, true);
-        document.removeEventListener('click', this.documentClickHandler, false);
+        document.removeEventListener('click', this.documentClickHandler);
         document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
         window.removeEventListener('resize', this.handleResize);
+        document.removeEventListener('click', this.documentClickHandler1, true);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.removeEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -618,62 +617,29 @@ const Popup = function (Component) {
       return needPrevent;
     }
 
-    closePopups(e) {
-      let checkTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-      try {
-        Object.keys(popups).forEach(groupName => {
-          const openGroupPopups = (popups[groupName] || []).filter(popup => popup.state.isPopupOpen);
-          openGroupPopups.forEach(popup => {
-            const {
-              dropElement,
-              placeHolderElement
-            } = popup;
-            const {
-              target
-            } = e || {};
-            const canClosePopup = !popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose() && !isTextSelected();
-            const isOutsideClick = checkTarget && placeHolderElement && dropElement && placeHolderElement !== target && !placeHolderElement.contains(target) && dropElement !== target && !dropElement.contains(target);
-
-            if (canClosePopup && (!checkTarget || isOutsideClick)) {
-              popup.setState({
-                isPopupOpen: false,
-                isPopupReady: false
-              });
-            }
-          });
-        });
-
-        if (!checkTarget) {
-          lastOpenedGroup = [];
-        }
-      } catch (error) {// eslint-disable-next-line no-console
-        //console.error('popup component not unmounted properly', error);
-      }
-    }
-
-    documentClickHandler(e) {
-      // Handles document click events to close all popups.
-      // This function closes all popups without checking if the click occurred outside the popup.
-      this.closePopups(e, false);
-    }
-
-    handleDocumentInteraction(e) {
-      // Handles interactions with the document to determine whether to close the popup.
-      // This function is specifically designed to close the popup when clicking outside of it.
-      // Check if the click event should prevent popup closure.
+    documentClickHandler1(e) {
       const needPrevent = this.handleGetNeedPrevent(e);
 
       if (needPrevent) {
-        // If the click event should prevent popup closure:
-        // - Stop the event propagation.
-        // - Close the last opened group of popups.
         this.removeClose(e);
         this.handleCloseLastOpenedGroup();
-      } else {
-        // If the click event does not need to prevent popup closure:
-        // - Close all popups, but only if the click occurred outside the popup elements.
-        this.closePopups(e, true);
+      }
+    }
+
+    documentClickHandler() {
+      try {
+        Object.keys(popups).forEach(groupName => {
+          const groupPopups = popups[groupName] || [];
+          groupPopups.forEach(popup => {
+            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
+              isPopupOpen: false,
+              isPopupReady: false
+            });
+          });
+        });
+        lastOpenedGroup = [];
+      } catch (e) {// eslint-disable-next-line no-console
+        //console.error('popup component not unmounted properly', e);
       }
     }
 

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -16,6 +16,20 @@ function clearProps(props) {
 export default class VelocityAnimationGroup extends React.Component {
   constructor(props) {
     super(props);
+    this.handleOnEnterComplete = this.handleOnEnterComplete.bind(this);
+  }
+
+  handleOnEnterComplete(onEnterComplete, elements) {
+    if (typeof onEnterComplete === 'function') {
+      onEnterComplete(elements);
+    } else if (onEnterComplete && typeof onEnterComplete === 'object') {
+      elements.forEach(rootElement => {
+        Object.entries(onEnterComplete).forEach(_ref => {
+          let [cssProperty, cssValue] = _ref;
+          if (cssProperty.includes) rootElement.style[cssProperty] = cssValue;
+        });
+      });
+    }
   }
 
   render() {
@@ -35,7 +49,8 @@ export default class VelocityAnimationGroup extends React.Component {
       enterDelay,
       isCustomized,
       name,
-      needUIPack
+      needUIPack,
+      onEnterComplete
     } = this.props;
     let {
       direction,
@@ -76,7 +91,10 @@ export default class VelocityAnimationGroup extends React.Component {
       animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
       duration: !isReducedMotion ? enterDuration : 0,
       delay: enterDelay ? enterDelay : 0,
-      display: isFlex ? 'flex' : ''
+      display: isFlex ? 'flex' : '',
+      complete: elements => {
+        this.handleOnEnterComplete(onEnterComplete, elements);
+      }
     };
     let exitAnimation = {
       animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
@@ -91,6 +109,7 @@ export default class VelocityAnimationGroup extends React.Component {
       runOnMount: runOnMount,
       enterHideStyle: enterHideStyle,
       enterShowStyle: enterShowStyle,
+      onEnterComplete: onEnterComplete,
       ...childProps
     }, isActive ? children : null);
   }

package/es/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   exitDuration: 300,
   isActive: false,
   isCustomized: true,
-  needUIPack: true
+  needUIPack: true,
+  onEnterComplete: {}
 };

package/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -15,5 +15,6 @@ export const propTypes = {
   isFlex: PropTypes.bool,
   name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: PropTypes.bool,
-  runOnMount: PropTypes.bool
+  runOnMount: PropTypes.bool,
+  onEnterComplete: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 };

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,6 +499,10 @@
   display: -webkit-box;
   overflow: hidden;
 }
+.lineClamp {
+  composes: wbreak clamp;
+  -webkit-line-clamp: var(--line-clamp,2);
+}
 
 .offSelection {
   -webkit-user-select: none;

package/es/utils/dropDownUtils.js

@@ -12,6 +12,7 @@ const getSelectedOptionsSel = props => props.selectedOptions || dummyArray;
 const getSearchStr = props => props.searchStr || '';
 
 export const getValueField = props => props.valueField || '';
+export const getSecondaryField = props => props.secondaryField || '';
 export const getTextField = props => props.textField || '';
 export const getImageField = props => props.imageField || '';
 export const getIconName = props => props.iconName || '';
@@ -40,23 +41,36 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getSearchFields = props => {
+  return props.searchFields || ['value'];
+};
+
+const isObjectContainsSearchString = function () {
+  let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let obj = arguments.length > 2 ? arguments[2] : undefined;
+  const matchedFields = searchFields.filter(element => {
+    return getSearchString(obj[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 searchString = getSearchString(searchStr);
     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) : isObjectContainsSearchString(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 {
@@ -107,7 +121,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], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback) => {
+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) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -119,6 +133,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         valueField: impValueField,
         textField: impTextField,
         imageField: impImageField,
+        secondaryField: impSecondaryField,
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
@@ -126,15 +141,25 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
       } = 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] : ''; // grouping options (group select/MultiSelect)
 
       id = !getIsEmptyValue(id) ? optionIdGrouping(id, prefixText) : '';
+      const additionalSearchFieldData = searchFields.reduce((value, item) => {
+        if (typeof option === 'object' && option.hasOwnProperty(item)) {
+          value[item] = option[item];
+        }
+
+        return value;
+      }, {});
 
       if (remvampOptionIds.indexOf(id) === -1 && !getIsEmptyValue(id) && !getIsEmptyValue(value)) {
         remvampOptionIds.push(id);
-        const optionDetails = {
+        const optionDetails = { // ...option,
+          ...additionalSearchFieldData,
           id,
           value,
+          secondaryValue,
           optionType: impOptionType || optionType
         };
 

package/lib/ListItem/ListContainer.js

@@ -58,7 +58,8 @@ var ListContainer = function ListContainer(props) {
       onClick = props.onClick,
       onMouseEnter = props.onMouseEnter,
       onMouseOver = props.onMouseOver,
-      eleRef = props.eleRef;
+      eleRef = props.eleRef,
+      align = props.align;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
     var mediaQueryOR = _ref.mediaQueryOR,
         isTouchDevice = _ref.isTouchDevice;
@@ -102,7 +103,7 @@ var ListContainer = function ListContainer(props) {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: "vertical",
+    align: align,
     alignBox: "row",
     className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,

package/lib/ListItem/ListItem.module.css

@@ -1,5 +1,6 @@
 .varClass {
   /* listitem default variables */
+  --listitem_font_size: var(--zd_font_size13);
   --listitem_text_color: var(--zdt_listitem_default_text);
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
@@ -24,7 +25,7 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--listitem_font_size);
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -57,7 +58,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);
@@ -72,9 +73,8 @@
 .value, .multiLineValue {
   line-height: 1.5385;
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+.multiLineValue,.multiLine{
+ composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -94,6 +94,42 @@
   margin: var(--listitem_avatar_margin);
 }
 
+.lhsJustifyContent_start,
+.lhsJustifyContent_center,
+.lhsJustifyContent_end {
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsJustifyContent_start {
+  composes: justifyFstart from '../common/common.module.css';
+}
+.lhsJustifyContent_center {
+  composes: alignHorizontal from '../common/common.module.css';
+}
+.lhsJustifyContent_end {
+  composes: justifyFend from '../common/common.module.css';
+}
+
+.lhsBox {
+  composes: dflex from '../common/common.module.css';
+  align-self: stretch;
+}
+.lhsBox_small,
+.lhsBox_medium,
+.lhsBox_large{
+  composes: varClass;
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
+  height: 100% ;
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsBox_small {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_medium {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_large {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -155,12 +191,22 @@
 .activedark {
   --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;
+}
 
 .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 {
@@ -199,7 +245,7 @@
 }
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
-  font-size: var(--zd_font_size15) ;
+  --listitem_font_size: var(--zd_font_size15);
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -128,7 +128,9 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          secondaryValue = _this$props4.secondaryValue,
+          lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -172,7 +174,10 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].leftAvatar
+        className: "".concat(_ListItemModule["default"].leftAvatar, " ").concat(lhsAlignContent !== 'center' ? "".concat(_ListItemModule["default"].lhsBox) : '')
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: _ListItemModule["default"]["lhsBox_".concat(size)]
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -193,12 +198,18 @@ 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, /*#__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, {
+      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : secondaryValue,
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : '')
+      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),