@zohodesk/components 1.0.0-temp-221.1 → 1.0.0-temp-199.13

package/es/ListItem/ListContainer.js

@@ -31,7 +31,8 @@ const ListContainer = props => {
     onClick,
     onMouseEnter,
     onMouseOver,
-    eleRef
+    eleRef,
+    align
   } = props;
   const responsiveFunc = useCallback(_ref => {
     let {
@@ -77,7 +78,7 @@ const ListContainer = props => {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: "vertical",
+    align: align,
     alignBox: "row",
     className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,

package/es/ListItem/ListItem.js

@@ -70,7 +70,8 @@ export default class ListItem extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      lhsBoxAlign
     } = this.props;
     let {
       ListItemProps = {},
@@ -100,7 +101,8 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customListItem,
+      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
+      align: lhsBoxAlign,
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -122,7 +124,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} ${customTickIcon}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${needMultiLineText ? style.tickIconCenter : ''} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -73,8 +73,7 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+  composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -86,6 +85,10 @@
 [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 ;
@@ -93,6 +96,18 @@
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
+.smallIconBox {
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size20);
+}
+.mediumIconBox {
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size21);
+}
+.largeIconBox {
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size28);
+}
 
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -197,9 +212,17 @@
 [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

@@ -74,7 +74,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      lhsBoxAlign
     } = this.props;
     let {
       ListItemProps = {},
@@ -97,6 +98,11 @@ 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,
@@ -107,7 +113,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customListItem,
+      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
@@ -118,7 +124,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: style.leftAvatar
+      className: ` ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''} ${style.leftAvatar}`
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -147,7 +153,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithCheckBox.js

@@ -59,7 +59,8 @@ export default class ListItemWithCheckBox extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      lhsBoxAlign
     } = this.props;
     const listA11y = {
       role: 'option',
@@ -74,6 +75,11 @@ 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,
@@ -82,7 +88,7 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
-      customClass: customListItem,
+      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       dataSelectorId: dataSelectorId,
       onClick: this.onClick,
@@ -93,7 +99,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox,
+      className: `${style.iconBox} ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,

package/es/ListItem/ListItemWithIcon.js

@@ -70,7 +70,8 @@ export default class ListItemWithIcon extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      lhsBoxAlign
     } = this.props;
     let {
       ListItemProps = {},
@@ -85,6 +86,11 @@ 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,
@@ -95,7 +101,8 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: customClass,
+      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customClass}`,
+      align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,
@@ -110,7 +117,7 @@ export default class ListItemWithIcon extends React.Component {
       ...ContainerProps
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
-      className: style.iconBox,
+      className: `${style.iconBox} ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''}`,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
@@ -125,7 +132,7 @@ export default class ListItemWithIcon extends React.Component {
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: style.tickIcon,
+      className: `${style.tickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItemWithRadio.js

@@ -60,7 +60,8 @@ export default class ListItemWithRadio extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      lhsBoxAlign
     } = this.props;
     let {
       ListItemProps = {},
@@ -75,6 +76,11 @@ 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,
@@ -83,7 +89,7 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
-      customClass: customListItem,
+      customClass: `${needMultiLineText && size == 'large' ? style.largeSizeContainer : ''} ${customListItem}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       onClick: this.onClick,
@@ -94,7 +100,7 @@ export default class ListItemWithRadio extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox,
+      className: `${style.iconBox} ${lhsBoxAlign == 'baseline' ? `${style.iconBoxTopAlign} ${sizeClassMap[size]}` : ''}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,

package/es/ListItem/props/defaultProps.js

@@ -12,7 +12,8 @@ export const ListContainerDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listContainer',
-  needMultiLineText: false
+  needMultiLineText: false,
+  align: 'vertical'
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -29,7 +30,8 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -47,7 +49,8 @@ export const ListItemWithAvatarDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithAvatar',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -61,7 +64,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithCheckBox',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -78,7 +82,8 @@ export const ListItemWithIconDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -93,5 +98,6 @@ export const ListItemWithRadioDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithRadio',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };

package/es/ListItem/props/propTypes.js

@@ -27,7 +27,8 @@ export const ListContainer_Props = {
   }),
   customClass: PropTypes.string,
   customProps: PropTypes.object,
-  eleRef: PropTypes.func
+  eleRef: PropTypes.func,
+  align: PropTypes.string
 };
 export const ListItem_Props = {
   active: PropTypes.bool,
@@ -57,6 +58,7 @@ export const ListItem_Props = {
     ariaSelected: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
+  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string
@@ -102,6 +104,7 @@ export const ListItemWithAvatar_Props = {
     customAvatarTeam: PropTypes.string
   }),
   needMultiLineText: PropTypes.bool,
+  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object,
     ContainerProps: PropTypes.object,
@@ -132,6 +135,7 @@ export const ListItemWithCheckBox_Props = {
     ariaSelected: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
+  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
@@ -167,6 +171,7 @@ export const ListItemWithIcon_Props = {
     ariaHidden: PropTypes.bool
   }),
   needMultiLineText: PropTypes.bool,
+  lhsBoxAlign: PropTypes.oneOf(['baseline', 'vertical']),
   customClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
@@ -198,6 +203,7 @@ export const ListItemWithRadio_Props = {
     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,8 +884,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      isFocus
+      isFocus,
+      customProps
     } = this.props;
+    const {
+      SuggestionsProps = {}
+    } = customProps;
     let {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -1065,7 +1069,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...SuggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/MultiSelect.js

@@ -1017,8 +1017,12 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      customProps
     } = this.props;
+    const {
+      SuggestionsProps = {}
+    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1108,7 +1112,8 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
+      },
+      ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -27,18 +27,24 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      customClass,
+      needMultiLineText
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
+    const {
+      containerClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
+      "aria-multiselectable": ariaMultiselectable,
+      className: containerClass
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''
@@ -63,6 +69,7 @@ export default class Suggestions extends React.PureComponent {
       });
       const commonProps = {
         isDisabled,
+        needMultiLineText,
         ...listItemCustomProps
       };
 

package/es/MultiSelect/props/defaultProps.js

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

package/es/MultiSelect/props/propTypes.js

@@ -110,7 +110,8 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool
@@ -178,7 +179,11 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  }))
+  })),
+  customClass: PropTypes.shape({
+    containerClass: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -250,7 +255,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Select/GroupSelect.js

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

package/es/Select/SelectWithAvatar.js

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

package/es/Select/SelectWithIcon.js

@@ -367,7 +367,8 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      ListItemProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -530,7 +531,8 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          }
+          },
+          ...ListItemProps
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/props/defaultProps.js

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

package/es/Select/props/propTypes.js

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

package/es/common/common.module.css

@@ -494,6 +494,11 @@
   overflow: hidden;
 }
 
+.lineClamp {
+  composes: wbreak clamp;
+  -webkit-line-clamp: var(--line-clamp,3);
+}
+
 .offSelection {
   -webkit-user-select: none;
   -moz-user-select: none;

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,