@zohodesk/components 1.0.0-temp-199.24 → 1.0.0-temp-242.6

package/README.md

@@ -2,6 +2,10 @@
 
 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**
+  - Added `isAutoHeight`, `isAutoHeightOnScroll` and `heightAdjustment` to handle dynamic content height.
 
 # 1.6.1
 

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

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

package/es/ListItem/ListItem.js

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

package/es/ListItem/ListItem.module.css

@@ -1,4 +1,3 @@
-/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: 13px;
@@ -16,15 +15,10 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-
-  /* line-height for multiline text */
-  --listitem_multiline_lineheight: 1.5385;
-}
-[dir=ltr] .varClass {
+}[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 15px 0 0
     /*rtl: 0 0 0 15px*/;
-}
-[dir=rtl] .varClass {
+}[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 15px;
 }
 .list {
@@ -81,18 +75,18 @@
 .children,.secondaryValue {
   composes: dotted from '../common/common.module.css';
 }
-  /* css:lineheight-validation:ignore */
+[dir=ltr] .beforeChild{
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .beforeChild{
+  margin-left: var(--zd_size10) ;
+}
 .value, .multiLineValue {
-  line-height: var(--listitem_multiline_lineheight);
+  line-height: 1.5385;
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
 }
-.iconBox,
-.leftAvatar,
-.lhsBoxInner {
-  composes: dflex from '../common/common.module.css';
-}
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
@@ -110,16 +104,10 @@
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
-.iconWrapper{
-  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
-}
 
-.iconWrapper,
 .lhsJustifyContent_start,
 .lhsJustifyContent_center,
-.lhsJustifyContent_end,
-.beforeChild,
-.titleBox {
+.lhsJustifyContent_end {
   composes: dflex alignVertical from '../common/common.module.css';
 }
 .lhsJustifyContent_start {
@@ -132,32 +120,26 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
-.contentWrapper {
-  composes: dflex flexrow from '../common/common.module.css';
-  align-items: stretch;
-  width: 100% ;
-}
-.beforeChild{
-  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
-}
-[dir=ltr] .beforeChild{
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .beforeChild{
-  margin-left: var(--zd_size10) ;
+.lhsBox {
+  composes: dflex from '../common/common.module.css';
+  align-self: stretch;
 }
-.titleBox {
-  align-items: stretch;
+.lhsBox_small,
+.lhsBox_medium,
+.lhsBox_large{
+  composes: varClass;
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
+  height: 100% ;
+  composes: dflex alignVertical from '../common/common.module.css';
 }
-.alignLhsBox_end {
-  align-items: flex-end;
+.lhsBox_small {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
-.alignLhsBox_center {
-  align-items: center;
+.lhsBox_medium {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
-.lhsBoxInner{
-  height: 100% ;
-  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
+.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, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -300,4 +282,8 @@
 
 .leftBox {
   composes: dflex flexcolumn from '../common/common.module.css';
+}
+
+.titleBox {
+  composes: dflex alignVertical from '../common/common.module.css';
 }

package/es/ListItem/ListItemWithAvatar.js

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

package/es/ListItem/ListItemWithCheckBox.js

@@ -102,13 +102,11 @@ export default class ListItemWithCheckBox extends React.Component {
       title: null,
       customProps: ListItemProps
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
-      className: style.contentWrapper
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {
@@ -133,7 +131,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

@@ -117,15 +117,14 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle: disableTitle,
       title: null,
       customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
-    }, iconName && /*#__PURE__*/React.createElement("div", {
+    }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      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: style.iconWrapper
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -156,7 +155,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -103,14 +103,12 @@ export default class ListItemWithRadio extends React.Component {
       title: null,
       customProps: ListItemProps
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
-      className: style.contentWrapper
-    }, /*#__PURE__*/React.createElement("div", {
       align: lhsAlignContent,
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -136,7 +134,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,8 +30,7 @@ export const ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false,
-  lhsAlignContent: 'start'
+  needMultiLineText: false
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,

package/es/ListItem/props/propTypes.js

@@ -61,16 +61,14 @@ export const ListItem_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string,
-    titleBoxClass: PropTypes.string
+    customValueRightPlaceholder: 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]),
-  lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end'])
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,5 +1,3 @@
-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); }
-
 import React from 'react';
 import { AdvancedGroupMultiSelect_propTypes } from "./props/propTypes";
 import { AdvancedGroupMultiSelect_defaultProps } from "./props/defaultProps";
@@ -891,12 +889,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit,
-      customProps
+      limit
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1065,7 +1059,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
+        })), /*#__PURE__*/React.createElement(Suggestions, {
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,
@@ -1080,7 +1074,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           limit: limit,
           limitReachedMessage: limitReachedMessage,
           dataId: `${dataId}_Options`
-        })));
+        }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,
         searchString: searchStr,

package/es/MultiSelect/MultiSelect.js

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

package/es/MultiSelect/Suggestions.js

@@ -195,23 +195,18 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction,
-      customClass
+      setVirtualizerContainerRefFunction
     } = 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,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/props/defaultProps.js

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

package/es/MultiSelect/props/propTypes.js

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

package/es/Popup/Popup.js

@@ -15,7 +15,10 @@ const Popup = function (Component) {
     customOrder = DUMMY_ARRAY,
     scrollDebounceTime = 0,
     closeOnScroll = false,
-    isOutsideScrollBlocked = false
+    isOutsideScrollBlocked = false,
+    isAutoHeight = false,
+    isAutoHeightOnScroll = false,
+    heightAdjustment = 0
   } = options;
   const getRootElement = getLibraryConfig('getRootElement');
   const mobileWidth = getLibraryConfig('mobileWidth');
@@ -26,7 +29,10 @@ const Popup = function (Component) {
     scrollDebounceTime,
     closeOnScroll,
     isOutsideScrollBlocked,
-    enableResizeHandling: needResizeHandling
+    enableResizeHandling: needResizeHandling,
+    isAutoHeight,
+    isAutoHeightOnScroll,
+    heightAdjustment
   };
   const popupConfig = {
     group,

package/es/Select/GroupSelect.js

@@ -625,7 +625,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

@@ -171,8 +171,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      customProps,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -197,7 +197,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

@@ -359,8 +359,7 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps,
-      customClass
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -378,11 +377,8 @@ 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,
@@ -478,10 +474,7 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row",
-        customClass: {
-          customDropBox: dropBoxClass
-        }
+        alignBox: "row"
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/props/defaultProps.js

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

package/es/Select/props/propTypes.js

@@ -187,8 +187,7 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   allowValueFallback: PropTypes.bool
 };
@@ -251,10 +250,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -319,10 +315,6 @@ export const SelectWithIcon_propTypes = {
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     SuggestionsProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
-  }),
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
+    TextBoxIconProps: PropTypes.object
   })
 };

package/es/common/common.module.css

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

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

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

package/lib/ListItem/ListItem.js

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