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

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -165,6 +165,7 @@
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_listitem_secondaryfield_text: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -165,6 +165,7 @@
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_listitem_secondaryfield_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);

package/es/ListItem/ListItem.js

@@ -70,8 +70,7 @@ export default class ListItem extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText,
-      lhsBoxAlign
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -101,8 +100,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
-      align: lhsBoxAlign,
+      customClass: customListItem,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -124,7 +122,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${needMultiLineText ? style.tickIconCenter : ''} ${customTickIcon}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/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/es/ListItem/ListItemWithAvatar.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import ListContainer from "./ListContainer";
 import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
 import { ListItemWithAvatar_Props } from "./props/propTypes";
@@ -75,7 +75,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customClass,
       customProps,
       needMultiLineText,
-      lhsBoxAlign
+      secondaryValue,
+      lhsAlignContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -98,11 +99,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
     } = listA11y;
     let isDarkPalette = palette === 'dark';
     let dataIdString = value ? value : dataId;
-    const sizeClassMap = {
-      small: style.smallIconBox,
-      medium: style.mediumIconBox,
-      large: style.largeIconBox
-    };
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
@@ -113,7 +109,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -124,7 +120,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: ` ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''} ${style.leftAvatar}`
+      align: lhsAlignContent,
+      className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsAvatarBox} ${style[`lhsBox_${size}`]}` : ''}`
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -147,13 +144,19 @@ export default class ListItemWithAvatar extends React.PureComponent {
       palette: isDarkPalette ? 'info' : avatarPalette,
       customClass: customAvatar,
       ...AvatarProps
-    })) : null, value ? /*#__PURE__*/React.createElement(Box, {
+    })) : null, value || secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLineValue : style.value}`
+    }, secondaryValue) : null)) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithCheckBox.js

@@ -3,7 +3,7 @@ import ListContainer from "./ListContainer";
 import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
 import { ListItemWithCheckBox_Props } from "./props/propTypes";
 import CheckBox from "../CheckBox/CheckBox";
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import style from "./ListItem.module.css";
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -60,7 +60,9 @@ export default class ListItemWithCheckBox extends React.Component {
       customClass,
       customProps,
       needMultiLineText,
-      lhsBoxAlign
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
     } = this.props;
     const listA11y = {
       role: 'option',
@@ -75,11 +77,6 @@ export default class ListItemWithCheckBox extends React.Component {
       customCheckBox = '',
       customLabel = ''
     } = customClass;
-    const sizeClassMap = {
-      small: style.smallIconBox,
-      medium: style.mediumIconBox,
-      large: style.largeIconBox
-    };
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
@@ -88,7 +85,7 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
-      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       dataSelectorId: dataSelectorId,
       onClick: this.onClick,
@@ -99,7 +96,8 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.iconBox} ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''}`,
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]} ${lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
@@ -110,12 +108,18 @@ export default class ListItemWithCheckBox extends React.Component {
         customCheckBox: customCheckBox,
         customLabel: customLabel
       }
-    })), /*#__PURE__*/React.createElement(Box, {
+    })), value || secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value));
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLineValue : style.value}`
+    }, secondaryValue) : null)) : null);
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import { Icon } from '@zohodesk/icons';
 import ListContainer from "./ListContainer";
 import { ListItemWithIconDefaultProps } from "./props/defaultProps";
@@ -71,7 +71,9 @@ export default class ListItemWithIcon extends React.Component {
       customClass,
       customProps,
       needMultiLineText,
-      lhsBoxAlign
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -86,11 +88,6 @@ export default class ListItemWithIcon extends React.Component {
       ariaHidden
     } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    const sizeClassMap = {
-      small: style.smallIconBox,
-      medium: style.mediumIconBox,
-      large: style.largeIconBox
-    };
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
@@ -101,8 +98,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customClass}`,
-      align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
+      customClass: customClass,
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -117,7 +113,8 @@ export default class ListItemWithIcon extends React.Component {
       ...ContainerProps
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
-      className: `${style.iconBox} ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''}`,
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]} ${lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''}`,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
@@ -125,14 +122,20 @@ export default class ListItemWithIcon extends React.Component {
       size: iconSize
     })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
       className: iconClass
-    }) : null, value && /*#__PURE__*/React.createElement(Box, {
+    }) : null, value || secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
-    }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLineValue : style.value}`
+    }, secondaryValue) : null)) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+      className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithRadio.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Radio from "../Radio/Radio";
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
@@ -61,7 +61,9 @@ export default class ListItemWithRadio extends React.Component {
       customClass,
       customProps,
       needMultiLineText,
-      lhsBoxAlign
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -76,11 +78,6 @@ export default class ListItemWithRadio extends React.Component {
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    const sizeClassMap = {
-      small: style.smallIconBox,
-      medium: style.mediumIconBox,
-      large: style.largeIconBox
-    };
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
       size: size,
@@ -89,7 +86,7 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
-      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
+      customClass: customListItem,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       onClick: this.onClick,
@@ -100,7 +97,8 @@ export default class ListItemWithRadio extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.iconBox} ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''}`,
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]} ${lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
@@ -112,12 +110,18 @@ export default class ListItemWithRadio extends React.Component {
         customRadio: customRadio,
         customRadioWrap: customRadioWrap
       }
-    })), /*#__PURE__*/React.createElement(Box, {
+    })), value || secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       "data-title": disableTitle ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value));
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLineValue : style.value}`
+    }, secondaryValue) : null)) : null);
   }
 
 }

package/es/ListItem/props/defaultProps.js

@@ -30,8 +30,7 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  needMultiLineText: false
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -50,7 +49,7 @@ export const ListItemWithAvatarDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithAvatar',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start'
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -65,7 +64,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithCheckBox',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -83,7 +83,8 @@ export const ListItemWithIconDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -99,5 +100,6 @@ export const ListItemWithRadioDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithRadio',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };

package/es/ListItem/props/propTypes.js

@@ -58,7 +58,6 @@ export const ListItem_Props = {
     ariaSelected: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
-  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string
@@ -93,6 +92,8 @@ export const ListItemWithAvatar_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'end', 'center']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
@@ -104,7 +105,6 @@ export const ListItemWithAvatar_Props = {
     customAvatarTeam: PropTypes.string
   }),
   needMultiLineText: PropTypes.bool,
-  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object,
     ContainerProps: PropTypes.object,
@@ -130,12 +130,14 @@ export const ListItemWithCheckBox_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'end', 'center']),
+  lhsJustifyContent: PropTypes.oneOf(['start', 'end', 'center']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
-  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
@@ -165,13 +167,15 @@ export const ListItemWithIcon_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'end', 'center']),
+  lhsJustifyContent: PropTypes.oneOf(['start', 'end', 'center']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
-  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
@@ -198,12 +202,14 @@ export const ListItemWithRadio_Props = {
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,
+  secondaryValue: PropTypes.string,
+  lhsAlignContent: PropTypes.oneOf(['start', 'end', 'center']),
+  lhsJustifyContent: PropTypes.oneOf(['start', 'end', 'center']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
-  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -884,12 +884,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      isFocus,
-      customProps
+      isFocus
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1069,8 +1065,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...SuggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -63,7 +63,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       searchStr
     } = this.state;
     const {
-      needLocalSearch
+      needLocalSearch,
+      searchFields
     } = this.props;
     const {
       suggestions,
@@ -72,7 +73,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       options,
       selectedOptions: dummyArray,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch
+      needSearch: needLocalSearch,
+      searchFields
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -379,7 +381,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      isFocus
+      isFocus,
+      secondaryField
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -553,6 +556,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         onMouseEnter: this.handleMouseEnter,
         needTick: true,
         listItemSize: listItemSize,
+        secondaryField: secondaryField,
         a11y: {
           role: 'option'
         },