@zohodesk/components 1.0.0-temp-242.5 → 1.0.0-temp-199.23

package/README.md

@@ -2,9 +2,6 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
-# 1.6.2
-  - **Popup**
-    - Fixed an issue where the popup did not reposition correctly when the `mobileWidth` configuration was updated dynamically.
 
 # 1.6.1
 

package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -1,6 +1,8 @@
 .varClass {
-    --local-colorIndicator-height: var(--zd_size10);
-    --local-colorIndicator-width: var(--zd_size10);
+    /* css:validation:ignore */
+    --local-colorIndicator-height: var(--zd_font_size10);
+    /* css:validation:ignore */
+    --local-colorIndicator-width: var(--zd_font_size10);
     --local-colorIndicator-border-radius: 10px;
 }
 

package/es/ListItem/ListItem.js

@@ -76,7 +76,8 @@ export default class ListItem extends React.Component {
       needMultiLineText,
       secondaryValue,
       renderBeforeChildren,
-      renderValueRightPlaceholderNode
+      renderValueRightPlaceholderNode,
+      lhsAlignContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -85,7 +86,8 @@ export default class ListItem extends React.Component {
     let {
       customListItem = '',
       customTickIcon = '',
-      customValueRightPlaceholder = ''
+      customValueRightPlaceholder = '',
+      titleBoxClass = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -124,7 +126,7 @@ export default class ListItem extends React.Component {
       flexible: true,
       className: style.leftBox
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
+      className: `${style.titleBox} ${lhsAlignContent !== 'start' ? `${style[`alignLhsBox_${lhsAlignContent}`]}` : ''} ${titleBoxClass}`
     }, isRenderable(renderBeforeChildren) ? /*#__PURE__*/React.createElement(Box, {
       adjust: true,
       className: style.beforeChild

package/es/ListItem/ListItem.module.css

@@ -1,3 +1,4 @@
+/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -15,9 +16,14 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
+
+  /* line-height for multiline text */
+  --listitem_multiline_lineheight: 1.5385;
+}
+[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}[dir=rtl] .varClass {
+}
+[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -70,14 +76,9 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
-}
+  /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: 1.5385;
+  line-height: var(--listitem_multiline_lineheight);
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -115,26 +116,39 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
+.contentWrapper {
+  composes: dflex flexrow from '../common/common.module.css';
+  align-items: stretch;
+  width: 100% ;
+}
 .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% ;
+.beforeChild{
+  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
   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 */
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
 }
-.lhsBox_medium {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
 }
-.lhsBox_large {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+.titleBox {
+  composes: dflex alignVertical from '../common/common.module.css';
+  align-items: stretch;
+}
+.alignLhsBox_end {
+  align-items: flex-end;
+}
+.alignLhsBox_center {
+  align-items: center;
+}
+.lhsBoxInner{
+  composes: dflex alignVertical from '../common/common.module.css';
+  height: 100% ;
+  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -271,8 +285,4 @@
 
 .leftBox {
   composes: dflex flexcolumn from '../common/common.module.css';
-}
-
-.titleBox {
-  composes: dflex alignVertical from '../common/common.module.css';
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -124,11 +124,13 @@ export default class ListItemWithAvatar extends React.PureComponent {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: style[`lhsBox_${size}`]
+      className: style.lhsBoxInner
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -174,7 +176,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -100,12 +100,14 @@ export default class ListItemWithCheckBox extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {
@@ -130,7 +132,7 @@ export default class ListItemWithCheckBox extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -116,14 +116,14 @@ export default class ListItemWithIcon extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
-      align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Box, {
-      align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      align: lhsAlignContent
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -154,7 +154,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -101,13 +101,15 @@ export default class ListItemWithRadio extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -133,7 +135,7 @@ export default class ListItemWithRadio extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/props/defaultProps.js

@@ -30,7 +30,8 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start'
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,

package/es/ListItem/props/propTypes.js

@@ -61,14 +61,16 @@ export const ListItem_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customValueRightPlaceholder: PropTypes.string,
+    titleBoxClass: PropTypes.string
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
   secondaryValue: PropTypes.string,
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,8 +889,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit
+      limit,
+      customProps
     } = this.props;
+    const {
+      SuggestionsProps = {}
+    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1059,7 +1063,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps,
       isVirtualizerEnabled,
-      limit
+      limit,
+      customProps
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,18 +193,23 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction
+      setVirtualizerContainerRefFunction,
+      customClass
     } = 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 : ''

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 = {
@@ -169,5 +170,6 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -114,7 +114,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,
@@ -199,7 +200,11 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string
+  limitReachedMessage: PropTypes.string,
+  customClass: PropTypes.shape({
+    containerClass: PropTypes.string
+  }),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -273,7 +278,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Popup/Popup.js

@@ -17,15 +17,8 @@ const Popup = function (Component) {
     closeOnScroll = false,
     isOutsideScrollBlocked = false
   } = options;
-
-  const getRootElement = () => {
-    return getLibraryConfig('getRootElement');
-  };
-
-  const getMobileWidth = () => {
-    return getLibraryConfig('mobileWidth');
-  };
-
+  const getRootElement = getLibraryConfig('getRootElement');
+  const mobileWidth = getLibraryConfig('mobileWidth');
   const middleware = {
     useAbsolutePositioning: isAbsolutePositioningNeeded,
     positionOrder: customOrder,
@@ -37,8 +30,8 @@ const Popup = function (Component) {
   };
   const popupConfig = {
     group,
-    getMobileWidth,
-    getRootElement,
+    mobileWidth,
+    rootElementCallback: getRootElement,
     middleware
   };
   return DotkitPopup(Component, popupConfig);

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      customProps,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,7 +357,8 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps
+      customProps,
+      customClass
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -375,8 +376,11 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps
+      ListItemProps = {}
     } = customProps;
+    const {
+      dropBoxClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -473,7 +477,10 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        customClass: {
+          customDropBox: dropBoxClass
+        }
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/props/defaultProps.js

@@ -102,7 +102,8 @@ export const SelectWithAvatar_defaultProps = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -131,5 +132,6 @@ export const SelectWithIcon_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customProps: {}
+  customProps: {},
+  customClass: {}
 };

package/es/Select/props/propTypes.js

@@ -187,7 +187,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
 };
@@ -250,7 +251,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']),
@@ -315,6 +319,10 @@ export const SelectWithIcon_propTypes = {
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     SuggestionsProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    ListItemProps: PropTypes.object
+  }),
+  customClass: PropTypes.shape({
+    dropBoxClass: PropTypes.string
   })
 };

package/es/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp,2);
+  -webkit-line-clamp: var(--line-clamp, 3);
 }
 
 .offSelection {

package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css

@@ -1,6 +1,8 @@
 .varClass {
-    --local-colorIndicator-height: var(--zd_size10);
-    --local-colorIndicator-width: var(--zd_size10);
+    /* css:validation:ignore */
+    --local-colorIndicator-height: var(--zd_font_size10);
+    /* css:validation:ignore */
+    --local-colorIndicator-width: var(--zd_font_size10);
     --local-colorIndicator-border-radius: 10px;
 }
 

package/lib/ListItem/ListItem.js

@@ -127,7 +127,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
           renderBeforeChildren = _this$props4.renderBeforeChildren,
-          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode;
+          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
+          lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -137,7 +138,9 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           _customClass$customTi = customClass.customTickIcon,
           customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi,
           _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa,
+          _customClass$titleBox = customClass.titleBoxClass,
+          titleBoxClass = _customClass$titleBox === void 0 ? '' : _customClass$titleBox;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -173,7 +176,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         flexible: true,
         className: _ListItemModule["default"].leftBox
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].titleBox
+        className: "".concat(_ListItemModule["default"].titleBox, " ").concat(lhsAlignContent !== 'start' ? "".concat(_ListItemModule["default"]["alignLhsBox_".concat(lhsAlignContent)]) : '', " ").concat(titleBoxClass)
       }, (0, _utils.isRenderable)(renderBeforeChildren) ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         adjust: true,
         className: _ListItemModule["default"].beforeChild

package/lib/ListItem/ListItem.module.css

@@ -1,3 +1,4 @@
+/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -15,9 +16,14 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
+
+  /* line-height for multiline text */
+  --listitem_multiline_lineheight: 1.5385;
+}
+[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}[dir=rtl] .varClass {
+}
+[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -70,14 +76,9 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
-}
+  /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: 1.5385;
+  line-height: var(--listitem_multiline_lineheight);
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -115,26 +116,39 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
+.contentWrapper {
+  composes: dflex flexrow from '../common/common.module.css';
+  align-items: stretch;
+  width: 100% ;
+}
 .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% ;
+.beforeChild{
+  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
   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 */
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
 }
-.lhsBox_medium {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
 }
-.lhsBox_large {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+.titleBox {
+  composes: dflex alignVertical from '../common/common.module.css';
+  align-items: stretch;
+}
+.alignLhsBox_end {
+  align-items: flex-end;
+}
+.alignLhsBox_center {
+  align-items: center;
+}
+.lhsBoxInner{
+  composes: dflex alignVertical from '../common/common.module.css';
+  height: 100% ;
+  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -271,8 +285,4 @@
 
 .leftBox {
   composes: dflex flexcolumn from '../common/common.module.css';
-}
-
-.titleBox {
-  composes: dflex alignVertical from '../common/common.module.css';
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -178,11 +178,13 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         disableTitle: disableTitle,
         title: null,
         customProps: ListItemProps
-      }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         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)]
+        className: _ListItemModule["default"].lhsBoxInner
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -226,7 +228,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithCheckBox.js

@@ -160,11 +160,13 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         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)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
         a11y: {
@@ -189,7 +191,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
       }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : 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));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -166,14 +166,14 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         disableTitle: disableTitle,
         title: null,
         customProps: ListItemProps
-      }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: "".concat(_ListItemModule["default"].contentWrapper, " ").concat(!iconName && lhsAlignContent !== 'start' ? _ListItemModule["default"]["alignLhsBox_".concat(lhsAlignContent)] : '')
+      }, iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
-        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)] : ''
+        align: lhsAlignContent
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
@@ -204,7 +204,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithRadio.js

@@ -161,12 +161,14 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
         className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: "".concat(dataId, "_radio")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,
         id: id,
@@ -192,7 +194,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
       }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : 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));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/props/defaultProps.js

@@ -37,7 +37,8 @@ var ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start'
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {

package/lib/ListItem/props/propTypes.js

@@ -78,14 +78,16 @@ var ListItem_Props = {
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customTickIcon: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string,
+    titleBoxClass: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
   secondaryValue: _propTypes["default"].string,
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
+  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end'])
 };
 exports.ListItem_Props = ListItem_Props;
 var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -55,6 +55,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -979,7 +981,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           autoComplete = _this$props9.autoComplete,
           getTargetRef = _this$props9.getTargetRef,
           isFocus = _this$props9.isFocus,
-          limit = _this$props9.limit;
+          limit = _this$props9.limit,
+          customProps = _this$props9.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
@@ -1145,7 +1150,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({}, SuggestionsProps, {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1160,7 +1165,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             limit: limit,
             limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
-          }));
+          })));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1171,9 +1171,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
-          limit = _this$props15.limit;
+          limit = _this$props15.limit,
+          customProps = _this$props15.customProps;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -247,15 +247,19 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props2.htmlId,
           a11y = _this$props2.a11y,
           getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction,
+          customClass = _this$props2.customClass;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable
+        "aria-multiselectable": ariaMultiselectable,
+        className: containerClass
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''

package/lib/MultiSelect/props/defaultProps.js

@@ -46,6 +46,7 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -184,6 +185,7 @@ exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -133,7 +133,8 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
@@ -189,7 +190,8 @@ var SelectedOptions_propTypes = {
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
-var Suggestions_propTypes = {
+
+var Suggestions_propTypes = _defineProperty({
   a11y: _propTypes["default"].shape({
     ariaParentRole: _propTypes["default"].string,
     ariaMultiselectable: _propTypes["default"].bool
@@ -223,8 +225,12 @@ var Suggestions_propTypes = {
   })),
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
-  limitReachedMessage: _propTypes["default"].string
-};
+  limitReachedMessage: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    containerClass: _propTypes["default"].string
+  })
+}, "needMultiLineText", _propTypes["default"].bool);
+
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
@@ -295,7 +301,9 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
+  SuggestionsProps: _propTypes["default"].object
+})), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/Popup/Popup.js

@@ -35,15 +35,8 @@ var Popup = function Popup(Component) {
       closeOnScroll = _options$closeOnScrol === void 0 ? false : _options$closeOnScrol,
       _options$isOutsideScr = options.isOutsideScrollBlocked,
       isOutsideScrollBlocked = _options$isOutsideScr === void 0 ? false : _options$isOutsideScr;
-
-  var getRootElement = function getRootElement() {
-    return (0, _Config.getLibraryConfig)('getRootElement');
-  };
-
-  var getMobileWidth = function getMobileWidth() {
-    return (0, _Config.getLibraryConfig)('mobileWidth');
-  };
-
+  var getRootElement = (0, _Config.getLibraryConfig)('getRootElement');
+  var mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth');
   var middleware = {
     useAbsolutePositioning: isAbsolutePositioningNeeded,
     positionOrder: customOrder,
@@ -55,8 +48,8 @@ var Popup = function Popup(Component) {
   };
   var popupConfig = {
     group: group,
-    getMobileWidth: getMobileWidth,
-    getRootElement: getRootElement,
+    mobileWidth: mobileWidth,
+    rootElementCallback: getRootElement,
     middleware: middleware
   };
   return (0, _Popup["default"])(Component, popupConfig);

package/lib/Select/GroupSelect.js

@@ -700,7 +700,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
-          SuggestionsProps = customProps.SuggestionsProps;
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,

package/lib/Select/SelectWithAvatar.js

@@ -221,8 +221,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          customProps = _this$props.customProps,
-          getTargetRef = _this$props.getTargetRef;
+          getTargetRef = _this$props.getTargetRef,
+          customProps = _this$props.customProps;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -245,7 +245,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var ariaErrorId = this.getNextAriaId();
       var TextBoxProps = customProps.TextBoxProps,
           DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
-          SuggestionsProps = customProps.SuggestionsProps;
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),

package/lib/Select/SelectWithIcon.js

@@ -431,7 +431,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
           dataSelectorId = _this$props7.dataSelectorId,
-          customProps = _this$props7.customProps;
+          customProps = _this$props7.customProps,
+          customClass = _this$props7.customClass;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -449,7 +450,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          ListItemProps = customProps.ListItemProps;
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+      var _customClass$dropBoxC = customClass.dropBoxClass,
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -542,7 +546,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           size: boxSize,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row"
+          alignBox: "row",
+          customClass: {
+            customDropBox: dropBoxClass
+          }
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader

package/lib/Select/props/defaultProps.js

@@ -91,7 +91,8 @@ var GroupSelect_defaultProps = {
   allowValueFallback: true
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
-var SelectWithAvatar_defaultProps = {
+
+var SelectWithAvatar_defaultProps = _defineProperty({
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -117,7 +118,8 @@ var SelectWithAvatar_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false
-};
+}, "customProps", {});
+
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   isReadOnly: false,
@@ -128,5 +130,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -204,7 +204,8 @@ var GroupSelect_propTypes = {
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object
   }),
   allowValueFallback: _propTypes["default"].bool
 };
@@ -269,7 +270,10 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    SuggestionsProps: _propTypes["default"].object
+  })
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -336,7 +340,11 @@ var SelectWithIcon_propTypes = {
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object,
+    ListItemProps: _propTypes["default"].object
+  }),
+  customClass: _propTypes["default"].shape({
+    dropBoxClass: _propTypes["default"].string
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp,2);
+  -webkit-line-clamp: var(--line-clamp, 3);
 }
 
 .offSelection {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-242.5",
+  "version": "1.0.0-temp-199.23",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",