@zohodesk/components 1.0.0-temp-248 → 1.0.0-temp-199.21

package/README.md

@@ -2,15 +2,14 @@
 
 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.5.7 
-- **InputFieldline**  
- - changed the handling of conditional logic for padding and size properties.
+# 1.5.8
 
-- **TextBoxIcon**  
- - added support for `InputFieldLineProps` via the customProps object.
+- Memoized **Portal** logic to improve performance.
 
-- **Select**  
- - Removed the size prop from InputFieldLine usage, as it is unused.
+# 1.5.7
+
+- **ListContainer, ListItem, ListItemWithIcon**
+  - `danger` value supported for the **palette** prop.
 
 # 1.5.6
 

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgb(253,243,243);
+	--zdt_listitem_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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 {
+
+  /* multiLine value for list item */
+  --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 {
@@ -76,8 +82,9 @@
 [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,28 +122,20 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
+.contentWrapper {
+  composes: dflex flexrow alignVertical from '../common/common.module.css';
+  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% ;
+.lhsBoxInner{
   composes: dflex alignVertical from '../common/common.module.css';
+  height: 100% ;
+  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
-.lhsBox_small {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
-}
-.lhsBox_medium {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
-}
-.lhsBox_large {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
-}
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
@@ -155,6 +154,13 @@
 {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+.activedanger,
+.dangerHover,
+.dangerEffect:hover {
+  --listitem_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_text_color: var(--zdt_listitem_danger_text)
+}
 .primaryHover,
 .primaryEffect:hover
 /* .primaryEffect:focus */
@@ -177,7 +183,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault, .activeprimary, .activedanger, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -186,6 +192,10 @@
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+.activedanger,
+.activedanger:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_danger_bg);
+}
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);

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,6 +116,8 @@ export default class ListItemWithIcon extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       align: lhsAlignContent,
@@ -123,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -154,7 +156,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/propTypes.js

@@ -17,7 +17,7 @@ export const ListContainer_Props = {
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseOver: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -48,7 +48,7 @@ export const ListItem_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -172,7 +172,7 @@ export const ListItemWithIcon_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,

package/es/Modal/Portal/Portal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
 import { getLibraryConfig } from "../../Provider/Config";
 import { defaultProps } from "./props/defaultProps";
@@ -8,13 +8,11 @@ export default function Portal(_ref) {
     children,
     portalId
   } = _ref;
-  const portalPrefix = getLibraryConfig("portalPrefix");
+  const getPortalContainer = useCallback(() => {
+    const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
 
-  const getPortalContainer = () => {
-    const getPortalContainer = getLibraryConfig('getPortalContainer');
-
-    if (getPortalContainer && typeof getPortalContainer === 'function') {
-      const portal = getPortalContainer();
+    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
+      const portal = getConfigPortalContainer();
 
       if (portal) {
         return portal;
@@ -22,10 +20,13 @@ export default function Portal(_ref) {
     }
 
     return null;
-  };
-
+  }, []);
+  const memoizedPortalId = useMemo(() => {
+    const portalPrefix = getLibraryConfig("portalPrefix");
+    return `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`;
+  }, [portalId]);
   return /*#__PURE__*/React.createElement(BasePortal, {
-    portalId: `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`,
+    portalId: memoizedPortalId,
     getFallbackElement: getPortalContainer
   }, children);
 }

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/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/Select.js

@@ -835,8 +835,7 @@ export class SelectComponent extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       SuggestionsProps = {},
-      TextBoxIconProps = {},
-      InputFieldLineProps = {}
+      TextBoxIconProps = {}
     } = customProps;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -856,15 +855,14 @@ export class SelectComponent extends Component {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, isRenderable(renderCustomSelectedValue) ? /*#__PURE__*/React.createElement(InputFieldLine, {
-      border: needBorder ? 'bottom' : 'none',
-      hasPadding: true,
-      ...InputFieldLineProps,
       isActive: isPopupReady,
+      border: needBorder ? 'bottom' : 'none',
       size: size,
       borderColor: borderColor,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       onKeyDown: this.handleKeyDown,
+      hasPadding: true,
       a11yAttributes: inputFieldLineA11yAttributes
     }, renderNode(renderCustomSelectedValue, {
       isDisabled,

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/__tests__/Select.spec.js

@@ -962,11 +962,6 @@ describe('Select snapshot - ', () => {
         },
         listItemProps: {
           'data-custom-listitem-attr': 'true'
-        },
-        InputFieldLineProps: {
-          tagAttributes: {
-            'data-custom-attr': 'true'
-          }
         }
       }
     }));

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

@@ -87,8 +87,7 @@ export const Select_propTypes = {
     TextBoxIconProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     listItemProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object,
-    InputFieldLineProps: PropTypes.object
+    SuggestionsProps: PropTypes.object
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
@@ -187,7 +186,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 +250,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 +318,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/TextBoxIcon/TextBoxIcon.js

@@ -130,6 +130,7 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(InputFieldLine, {
       isActive: isActive || isFocus,
       border: needBorder ? 'bottom' : 'none',
+      size: size,
       borderColor: borderColor,
       hasEffect: needEffect,
       isDisabled: isDisabled,

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/es/shared/InputFieldLine/InputFieldLine.js

@@ -36,8 +36,7 @@ function InputFieldLine(props) {
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
-    scroll: !!size ? 'vertical' : undefined,
-    className: `${style.varClass} ${style.customContainer} ${!!size ? style[size] : ''} ${hasPadding ? style[`padding_${size}`] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
+    className: `${style.varClass} ${style.customContainer} ${hasPadding ? style[size] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
   }, children);
 }