@zohodesk/components 1.0.0-temp-217.5 → 1.0.0-temp-199.9

package/es/Popup/Popup.js

@@ -4,11 +4,14 @@ import hoistStatics from 'hoist-non-react-statics';
 import { PopupPropTypes, ContextTypes } from "./props/propTypes";
 /**** Methods ****/
 
-import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from "../utils/Common.js";
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect, DUMMY_OBJECT } from "../utils/Common.js";
 import viewPort from "./viewPort";
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
+import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
+import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
+import selectn from 'selectn';
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -47,7 +50,8 @@ const Popup = function (Component) {
     isArrow: needPopupArrow = false,
     customOrder: customPositionOrder = [],
     scrollDebounceTime: popupScrollDebounceTime = 0,
-    closeOnScroll: closeOnScrollPopup = false
+    closeOnScroll: closeOnScrollPopup = false,
+    isOutsideScrollBlocked: isOutsideScrollBlock = false
   } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 
   class Popup extends React.Component {
@@ -66,7 +70,8 @@ const Popup = function (Component) {
         //{height: ‘’, width: ‘’,}
         popupOffset: {},
         //{height: ‘’, width: ‘’,}
-        isAbsolutePositioningNeeded: true
+        isAbsolutePositioningNeeded: true,
+        isMobile: false
       };
       this.togglePopup = this.togglePopup.bind(this);
       this.documentClickHandler = this.documentClickHandler.bind(this);
@@ -81,10 +86,11 @@ const Popup = function (Component) {
       this.handleResize = debounce(this.handleResize.bind(this), 300);
       this.handlePopupResize = this.handlePopupResize.bind(this);
       this.getIsAbsolutePopup = this.getIsAbsolutePopup.bind(this);
+      this.getIsOutsideScrollBlocked = this.getIsOutsideScrollBlocked.bind(this);
       this.getNeedArrow = this.getNeedArrow.bind(this);
       this.getCustomPositionOrder = this.getCustomPositionOrder.bind(this);
-      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this);
-      this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this); // this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+
       this.getCloseOnScrollPopup = this.getCloseOnScrollPopup.bind(this);
       this.handleCloseLastOpenedGroup = this.handleCloseLastOpenedGroup.bind(this);
       this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -98,19 +104,26 @@ const Popup = function (Component) {
       this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
       this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
       this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
+      this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
+      this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
+      this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
+      this.updatePositionOnScroll = this.updatePositionOnScroll.bind(this);
+      this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
+      this.updatePopupState = this.updatePopupState.bind(this);
+      this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
+      this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
+      this.positionRef = /*#__PURE__*/React.createRef();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
+      this.isTargetElementVisible = false;
       this.isAbsolutePopup = isAbsolutePopup;
       this.needPopupArrow = needPopupArrow;
       this.customPositionOrder = customPositionOrder;
       this.scrollDebounceTime = popupScrollDebounceTime;
       this.closeOnScroll = closeOnScrollPopup;
-      const {
-        scrollDebounceTime
-      } = this.getScrollDebounceTime(this);
-      this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
-      this.handleDebouncedPositionChange = debounce(this.handlePositionChange.bind(this), 100);
+      this.isOutsideScrollBlock = isOutsideScrollBlock; // const { scrollDebounceTime } = this.getScrollDebounceTime(this);
+      // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
     }
 
     componentDidMount() {
@@ -143,12 +156,24 @@ const Popup = function (Component) {
       }
     }
 
+    handleScrollAndBlockEvents(isPopupReady, isMobile) {
+      if (isPopupReady && !isMobile) {
+        this.handleAddingScrollBlock();
+        this.handleAddingScrollToUpdatePosition();
+      } else {
+        this.handleRemovingScrollBlock();
+        this.handleRemovingScrollToUpdatePosition();
+      }
+    }
+
     componentDidUpdate(prevProps, prevState) {
       const {
-        isPopupReady
+        isPopupReady,
+        isMobile
       } = this.state;
       const {
-        isPopupReady: oldStateOpen = false
+        isPopupReady: oldStateOpen = false,
+        isMobile: oldIsMobileState
       } = prevState || {};
       const {
         dropElement
@@ -164,12 +189,10 @@ const Popup = function (Component) {
           this.size = null;
           this.popupObserver.disconnect();
         }
+      }
 
-        if (isPopupReady) {
-          this.handleAddingScrollBlock();
-        } else {
-          this.handleRemovingScrollBlock();
-        }
+      if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
+        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
       }
     }
 
@@ -186,6 +209,7 @@ const Popup = function (Component) {
         return res;
       }, popups);
       this.handleRemovingScrollBlock();
+      this.handleRemovingScrollToUpdatePosition();
       let noPopups = true;
 
       for (const i in popups) {
@@ -211,10 +235,8 @@ const Popup = function (Component) {
     }
 
     handleAddingScrollBlock() {
-      const {
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
-      } = this.props;
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
 
       if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
         addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
@@ -223,10 +245,8 @@ const Popup = function (Component) {
     }
 
     handleRemovingScrollBlock() {
-      const {
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
-      } = this.props;
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
 
       if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
         removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
@@ -234,6 +254,98 @@ const Popup = function (Component) {
       }
     }
 
+    handleAddingScrollToUpdatePosition() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        document.addEventListener('scroll', this.updatePositionOnScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }
+
+    handleRemovingScrollToUpdatePosition() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        document.removeEventListener('scroll', this.updatePositionOnScroll, {
+          capture: true,
+          passive: false
+        });
+      }
+    }
+
+    handleDropElementStyleUpdate(_ref) {
+      let {
+        top = '',
+        left = '',
+        bottom = '',
+        right = ''
+      } = _ref;
+      const {
+        dropElement
+      } = this;
+      Object.assign(dropElement.style, {
+        top: top ? `${top}px` : '',
+        left: left ? `${left}px` : '',
+        right: right ? `${right}px` : '',
+        bottom: bottom ? `${bottom}px` : ''
+      });
+    }
+
+    setContainerDynamicPositioning(betterPosition, needArrow) {
+      const {
+        dropElement
+      } = this;
+      const {
+        isMobile
+      } = this.state;
+      const {
+        view,
+        viewsOffset
+      } = betterPosition || DUMMY_OBJECT;
+      const styleToApply = selectn(`${view}`, viewsOffset);
+
+      if (isMobile) {
+        this.handleDropElementStyleUpdate({
+          top: '',
+          left: '',
+          right: '',
+          bottom: ''
+        });
+      } else {
+        this.handleDropElementStyleUpdate(styleToApply);
+
+        if (this.positionRef.current !== view) {
+          dropElement.setAttribute('data-position', `${view}`);
+          dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
+
+          if (needArrow) {
+            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
+          }
+
+          this.positionRef.current = view;
+        }
+      }
+    }
+
+    updatePositionOnScroll(e) {
+      const {
+        placeHolderElement,
+        defaultPosition,
+        isTargetElementVisible
+      } = this;
+
+      if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
+        this.handlePopupPosition(defaultPosition, true);
+      }
+    }
+
     addScrollBlockListeners() {
       document.addEventListener('wheel', this.handleBlockScroll, {
         capture: true,
@@ -243,7 +355,7 @@ const Popup = function (Component) {
         capture: true,
         passive: false
       });
-      document.addEventListener('scroll', this.handleDebouncedPositionChange, {
+      document.addEventListener('scroll', this.handlePositionChange, {
         capture: true,
         passive: false
       });
@@ -262,7 +374,7 @@ const Popup = function (Component) {
         capture: true,
         passive: false
       });
-      document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
+      document.removeEventListener('scroll', this.handlePositionChange, {
         capture: true,
         passive: false
       });
@@ -291,7 +403,7 @@ const Popup = function (Component) {
       const containerElement = this.dropElement;
 
       if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
-        this.handlePopupPosition(this.state.position); // this.closePopupOnly(event);
+        this.handlePopupPosition(this.state.position, true); // this.closePopupOnly(event);
       }
     }
 
@@ -305,11 +417,25 @@ const Popup = function (Component) {
     }
 
     handleIntersectionObserver(entry) {
-      if (entry.intersectionRatio === 0) {
+      if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
         this.closePopupOnly();
       }
     }
 
+    updateVisibilityOnIntersection(entry) {
+      const {
+        dropElement
+      } = this;
+
+      if (entry.isIntersecting === true) {
+        this.isTargetElementVisible = true;
+        dropElement.setAttribute('data-visible', 'visible');
+      } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+        this.isTargetElementVisible = false;
+        dropElement.setAttribute('data-visible', 'hidden');
+      }
+    }
+
     getGroup() {
       const {
         popupGroup
@@ -325,17 +451,12 @@ const Popup = function (Component) {
         needPopupArrow
       } = popup;
       return isArrow !== undefined ? isArrow : needPopupArrow;
-    }
+    } // getScrollDebounceTime(popup) {
+    //   const { scrollDebounceTime } = popup.props;
+    //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
+    //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+    // }
 
-    getScrollDebounceTime(popup) {
-      const {
-        scrollDebounceTime
-      } = popup.props;
-      const {
-        scrollDebounceTime: popupScrollDebounceTime
-      } = popup;
-      return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-    }
 
     getCloseOnScrollPopup(popup) {
       const {
@@ -357,6 +478,16 @@ const Popup = function (Component) {
       return isAbsolutePositioningNeeded !== undefined ? isAbsolutePositioningNeeded : isAbsolutePopup;
     }
 
+    getIsOutsideScrollBlocked(popup) {
+      const {
+        isOutsideScrollBlocked
+      } = popup.props;
+      const {
+        isOutsideScrollBlock
+      } = popup;
+      return isOutsideScrollBlocked !== undefined ? isOutsideScrollBlocked : isOutsideScrollBlock;
+    }
+
     getCustomPositionOrder(popup) {
       const {
         customOrder = []
@@ -527,10 +658,24 @@ const Popup = function (Component) {
       cancelBubblingEffect(e);
     }
 
+    updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute) {
+      const isMobile = isMobilePopover(true);
+      this.setState({
+        isPopupReady: true,
+        position: view,
+        positions: views,
+        positionsOffset: viewsOffset,
+        targetOffset,
+        popupOffset,
+        isAbsolutePositioningNeeded: isAbsolute,
+        isMobile: isMobile
+      });
+    }
+
     handlePopupPosition() {
       let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
-      let isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
-      // isResizeHandling --->>> Window resize and dropBox resize
+      let isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
+      // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
       const {
         direction
       } = this.context || {};
@@ -549,9 +694,11 @@ const Popup = function (Component) {
       }
 
       if (!placeHolderElement && !dropElement) {
+        const isMobile = isMobilePopover(true);
         this.setState({
           isPopupOpen: true,
-          isPopupReady: true
+          isPopupReady: true,
+          isMobile: isMobile
         });
         return;
       }
@@ -578,23 +725,27 @@ const Popup = function (Component) {
             viewsOffset,
             targetOffset,
             popupOffset
-          } = betterPosition || {};
-
-          if (position !== view || !isPopupReady) {
-            this.setState({
-              isPopupReady: true,
-              position: view,
-              positions: views,
-              positionsOffset: viewsOffset,
-              targetOffset,
-              popupOffset,
-              isAbsolutePositioningNeeded: isAbsolute
-            });
+          } = betterPosition || DUMMY_OBJECT;
+
+          if (!isAbsolute) {
+            if (!isPopupReady) {
+              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+
+            if (!dropElement) {
+              return;
+            }
+
+            this.setContainerDynamicPositioning(betterPosition, needArrow);
+          } else {
+            if (position !== view || !isPopupReady) {
+              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
           }
         });
       };
 
-      if (isResizeHandling) {
+      if (isUpdatePosition) {
         setPosition();
       } else {
         this.defaultPosition = defaultPosition;
@@ -626,6 +777,7 @@ const Popup = function (Component) {
                 const needArrow = this.getNeedArrow(popup);
                 const isAbsolute = this.getIsAbsolutePopup(popup);
                 const customOrder = this.getCustomPositionOrder(popup);
+                const isMobile = isMobilePopover(true);
                 const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
                   needArrow,
                   isAbsolute,
@@ -641,14 +793,16 @@ const Popup = function (Component) {
                 const {
                   left: oldLeft = '',
                   top: oldTop = '',
-                  bottom: oldBottom = ''
+                  bottom: oldBottom = '',
+                  right: oldRight = ''
                 } = positionsOffset[position] || {};
                 const {
                   left = '',
                   top = '',
-                  bottom = ''
+                  bottom = '',
+                  right = ''
                 } = viewsOffset[view] || {};
-                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
                 //   placeHolderElement,
                 //   scrollContainer
                 // );
@@ -660,7 +814,8 @@ const Popup = function (Component) {
                     positionsOffset: viewsOffset,
                     targetOffset,
                     popupOffset,
-                    isAbsolutePositioningNeeded: isAbsolute
+                    isAbsolutePositioningNeeded: isAbsolute,
+                    isMobile: isMobile
                   });
                 } // if (!isInViewPort && !isAbsolute) {
                 //   popup.setState({ isPopupOpen: false, isPopupReady: false });
@@ -684,26 +839,19 @@ const Popup = function (Component) {
 
     handleResize() {
       this.handleOpenPopupPositionChange();
-    }
-
-    handleScroll(e) {
-      // this.handleOpenPopupPositionChange();
-      const {
-        closeOnScroll
-      } = this.getCloseOnScrollPopup(this);
-      const {
-        isPopupReady
-      } = this.state;
-
-      if (isPopupReady) {
-        console.log('onscrollPopupREady');
-      }
+    } // handleScroll(e) {
+    //   // this.handleOpenPopupPositionChange();
+    //   const { closeOnScroll } = this.getCloseOnScrollPopup(this);
+    //   const { isPopupReady } = this.state;
+    //   if (isPopupReady) {
+    //     console.log('onscrollPopupREady');
+    //   }
+    //   if (isPopupReady && closeOnScroll) {
+    //     console.log(this, 'handle Scroll');
+    //     this.togglePopup(e);
+    //   }
+    // }
 
-      if (isPopupReady && closeOnScroll) {
-        console.log(this, 'handle Scroll');
-        this.togglePopup(e);
-      }
-    }
 
     handlePopupResize(popupSize) {
       const {
@@ -735,13 +883,14 @@ const Popup = function (Component) {
     }
 
     render() {
+      // const { isPopupReady, isPopupOpen } = this.state;
       const {
-        isPopupReady,
-        isPopupOpen
-      } = this.state;
-      const localState = isPopupReady ? this.state : {};
+        isMobile,
+        ...restState
+      } = this.state; // const localState = isPopupReady ? this.state : {};
+
       return /*#__PURE__*/React.createElement(Component, { ...this.props,
-        ...this.state,
+        ...restState,
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,

package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -5,6 +5,8 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -12,14 +14,14 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

package/es/Select/GroupSelect.js

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

package/es/Select/SelectWithAvatar.js

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

package/es/Select/SelectWithIcon.js

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

package/es/Select/props/defaultProps.js

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

package/es/Select/props/propTypes.js

@@ -177,7 +177,8 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object,
+    suggestionsProps: PropTypes.object
   })
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
@@ -239,7 +240,8 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),

package/es/common/common.module.css

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

package/es/utils/Common.js

@@ -412,4 +412,5 @@ export function isTextSelected() {
   }
 
   return false;
-}
+}
+export const DUMMY_OBJECT = {};

package/es/v1/ListItem/ListItem.js

@@ -81,7 +81,7 @@ const ListItem = props => {
     autoHover: autoHover,
     needTick: needTick,
     needBorder: needBorder,
-    customClass: customListItem,
+    customClass: `${customListItem} ${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
     dataId: dataIdString,
     dataSelectorId: `${dataSelectorId}`,
     isLink: isLink,