@zohodesk/components 1.2.63 → 1.3.1

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

@@ -27,7 +27,8 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      needMultiLineText
     } = this.props;
     const {
       ariaParentRole,
@@ -46,6 +47,7 @@ export default class Suggestions extends React.PureComponent {
       const {
         id,
         value,
+        secondaryValue,
         photoURL,
         icon,
         optionType,
@@ -63,6 +65,7 @@ export default class Suggestions extends React.PureComponent {
       });
       const commonProps = {
         isDisabled,
+        needMultiLineText,
         ...listItemCustomProps
       };
 
@@ -92,7 +95,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 +116,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/defaultProps.js

@@ -166,5 +166,6 @@ export const SelectedOptions_defaultProps = {
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };

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 = {
@@ -171,6 +173,7 @@ export const Suggestions_propTypes = {
   palette: PropTypes.string,
   selectedOptions: PropTypes.array,
   htmlId: PropTypes.string,
+  needMultiLineText: PropTypes.bool,
   suggestions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -281,6 +284,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/Radio/props/propTypes.js

@@ -29,7 +29,7 @@ export const propTypes = {
     ariaChecked: PropTypes.bool,
     ariaHidden: PropTypes.bool,
     role: PropTypes.string,
-    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     ariaLabelledby: PropTypes.string,
     ariaLabel: PropTypes.string,
     ariaReadonly: PropTypes.bool

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,44 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getSearchFields = props => {
+  return props.searchFields || ['value'];
+}; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
+//   const matchedFields = searchFields.filter(element => {
+//     return getSearchString(obj[element]).indexOf(searchStr) !== -1
+//   });
+//   return matchedFields.length !== 0;
+// }
+
+
+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 ? arguments[2] : {};
+  return searchFields.some(field => {
+    const val = obj[field];
+    if (val === null || val === undefined) return false;
+    const str = getSearchString(val);
+    return str && str.indexOf(searchStr) !== -1;
+  });
+};
+
 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 +129,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 +141,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         valueField: impValueField,
         textField: impTextField,
         imageField: impImageField,
+        secondaryField: impSecondaryField,
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
@@ -126,15 +149,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/es/v1/Radio/props/propTypes.js

@@ -29,7 +29,7 @@ export const propTypes = {
     ariaChecked: PropTypes.bool,
     ariaHidden: PropTypes.bool,
     role: PropTypes.string,
-    tabIndex: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     ariaLabelledby: PropTypes.string,
     ariaLabel: PropTypes.string,
     ariaReadonly: PropTypes.bool

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);
@@ -66,15 +67,14 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
-.children {
+.children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
 .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,23 @@
 .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% ;
+  font-size: 0 ;
+}
+
+.tickIcon, .defaultTick, .darkTick {
+  transform: translateY(-50%);
 }
 
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
@@ -199,7 +246,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 : _ListItemModule["default"].secondaryValue)
+      }, 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

@@ -116,7 +116,10 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           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,
+          lhsJustifyContent = _this$props4.lhsJustifyContent;
 
       var listA11y = _objectSpread({
         role: 'option'
@@ -150,8 +153,11 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].iconBox,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: "".concat(dataId ? dataId : value, "_checkBox")
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
         a11y: {
@@ -161,12 +167,18 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customCheckBox: customCheckBox,
           customLabel: customLabel
         }
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }))), /*#__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));
+      }, value) : 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)));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -124,7 +124,10 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           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,
+          lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -161,21 +164,31 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         customProps: ListItemProps
       }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
-        className: _ListItemModule["default"].iconBox,
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
         size: iconSize
-      })), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
+      }))), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
         className: iconClass
-      }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : 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, {
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
-      }, value), 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 : _ListItemModule["default"].secondaryValue)
+      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),