@zohodesk/components 1.2.62 → 1.3.0

package/es/MultiSelect/props/defaultProps.js

@@ -37,7 +37,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -71,7 +72,8 @@ export const AdvancedMultiSelect_defaultProps = {
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  allowValueFallback: true
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -118,7 +120,8 @@ export const MultiSelect_defaultProps = {
   selectedOptionsCount: 0,
   cardHeaderName: '',
   needResponsive: true,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -155,7 +158,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},
-  needResponsive: true
+  needResponsive: true,
+  allowValueFallback: true
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium',

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,
@@ -112,7 +113,8 @@ export const MultiSelect_propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object
   }),
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -131,6 +133,7 @@ export const MultiSelectWithAvatar_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
+  secondaryField: PropTypes.string,
   ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
@@ -248,7 +251,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   searchStr: PropTypes.string,
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  allowValueFallback: PropTypes.bool
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -279,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/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/Select/GroupSelect.js

@@ -170,10 +170,12 @@ export class GroupSelectComponent extends PureComponent {
 
   handleGetGroupSelectOptions(props) {
     let {
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     } = props;
     return this.getGroupSelectOptions({
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     });
   }
 

package/es/Select/Select.js

@@ -250,6 +250,7 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
+      allowValueFallback,
       customProps = {}
     } = props;
     let {
@@ -259,7 +260,8 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
-      listItemProps
+      listItemProps,
+      allowValueFallback
     });
   }
 

package/es/Select/SelectWithAvatar.js

@@ -40,14 +40,16 @@ class SelectWithAvatarComponent extends SelectComponent {
       options,
       valueField,
       textField,
-      imageField
+      imageField,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
       valueField,
       textField,
       imageField,
-      optionType: 'avatar'
+      optionType: 'avatar',
+      allowValueFallback
     });
   }
 

package/es/Select/props/defaultProps.js

@@ -33,7 +33,8 @@ export const Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
-  isAbsolutePositioningNeeded: true
+  isAbsolutePositioningNeeded: true,
+  allowValueFallback: true
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -70,7 +71,8 @@ export const GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -93,7 +93,8 @@ export const Select_propTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
-  dropBoxPortalId: PropTypes.string
+  dropBoxPortalId: PropTypes.string,
+  allowValueFallback: PropTypes.bool
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -178,7 +179,8 @@ export const GroupSelect_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object
-  })
+  }),
+  allowValueFallback: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,

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,21 +41,36 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
-export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
+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, 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 {
@@ -105,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], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
+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 = {};
@@ -117,22 +133,33 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         valueField: impValueField,
         textField: impTextField,
         imageField: impImageField,
+        secondaryField: impSecondaryField,
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
         listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
-      const value = typeof option === 'object' ? option[impTextField || textField] : 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
         };
 
@@ -171,7 +198,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
     optionsOrder: remvampOptionIds
   };
 });
-export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength], (selectedOptions, normalizedFormatOptions, selectedOptionsLength) => {
+export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) => {
   const output = [];
   const revampSelectedOptions = [];
   const normalizedSelectedOptions = {};
@@ -187,7 +214,8 @@ export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelect
       revampSelectedOptions.push(id);
       output.push(normalizedFormatOptions[option]);
       normalizedSelectedOptions[id] = normalizedFormatOptions[option];
-    } else if (getIsEmptyValue(id) && !getIsEmptyValue(option) && revampSelectedOptions.indexOf(option) === -1) {
+    } else if (allowValueFallback && getIsEmptyValue(id) && !getIsEmptyValue(option) && revampSelectedOptions.indexOf(option) === -1) {
+      //fallback case
       const newObj = {
         id: option,
         value: option
@@ -261,7 +289,7 @@ export const makeObjectConcat = () => createSelector([getObj1, getObj2], (obj1,
 const getGroupedOptions = props => props.groupedOptions || dummyArray;
 
 const getFormatOptions = makeFormatOptions();
-export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions], groupedOptions => {
+export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions, getAllowValueFallback], (groupedOptions, allowValueFallback) => {
   const revampedGroups = [];
   let allOptionIds = [];
   let allNormalizedOptions = {}; //all group normalized options
@@ -290,7 +318,8 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
-        prefixText: groupId
+        prefixText: groupId,
+        allowValueFallback
       });
 
       if (optionsOrder.length) {

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);
@@ -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"),

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 : '')
+      }, 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 : '')
+      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),