@zohodesk/components 1.0.0-temp-220.6 → 1.0.0-temp-223

package/es/MultiSelect/MultiSelect.module.css

@@ -200,7 +200,15 @@
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
-  border: 0;
+  border: 0
+}
+
+[dir=ltr] .more {
+  margin-right:var(--zd_size3) 
+}
+
+[dir=rtl] .more {
+  margin-left:var(--zd_size3) 
 }
 
 .rightPlaceholder{

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -42,7 +42,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       textField,
       imageField,
       disabledOptions,
-      allowValueFallback
+      allowValueFallback,
+      searchFields,
+      secondaryField
     } = props;
     return this.formatOptions({
       options,
@@ -51,7 +53,9 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       imageField,
       optionType: 'avatar',
       disabledOptions,
-      allowValueFallback
+      allowValueFallback,
+      searchFields,
+      secondaryField
     });
   }
 

package/es/MultiSelect/Suggestions.js

@@ -46,6 +46,7 @@ export default class Suggestions extends React.PureComponent {
       const {
         id,
         value,
+        secondaryValue,
         photoURL,
         icon,
         optionType,
@@ -92,7 +93,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -112,7 +114,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         });
       }
 

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -13,27 +13,48 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
   >
     <div
       aria-hidden="true"
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="MultiSelectHeader_selectAll_Icon"
       data-selector-id="box"
       data-test-id="MultiSelectHeader_selectAll_Icon"
     >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-androidd    "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size15);"
-      />
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-androidd    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size15);"
+        />
+      </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
-      data-id="MultiSelectHeader_selectAll_Text"
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Text"
+      data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="MultiSelectHeader_selectAll_Text"
+          data-selector-id="box"
+          data-test-id="MultiSelectHeader_selectAll_Text"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>

package/es/MultiSelect/props/propTypes.js

@@ -46,6 +46,7 @@ export const MultiSelect_propTypes = {
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),
+  searchFields: PropTypes.arrayOf(PropTypes.string),
   isAnimate: PropTypes.bool,
   isBoxPaddingNeed: PropTypes.bool,
   isDisabled: PropTypes.bool,
@@ -132,6 +133,7 @@ export const MultiSelectWithAvatar_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
+  secondaryField: PropTypes.string,
   ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
@@ -281,6 +283,7 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
   needEffect: PropTypes.bool,
+  secondaryField: PropTypes.string,
   animationStyle: PropTypes.string,
   defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),

package/es/Popup/Popup.js

@@ -12,7 +12,6 @@ import { addIntersectionObserver, removeIntersectionObserver } from "./intersect
 import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
 import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
 import selectn from 'selectn';
-import { getLibraryConfig } from "../Provider/Config.js";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -39,51 +38,6 @@ const defaultState = {
   //{height: ‘’, width: ‘’,}
   isAbsolutePositioningNeeded: true
 };
-const SCROLL_BLOCK_EVENTS = Object.freeze([{
-  name: 'wheel',
-  handlerName: 'handleBlockScroll',
-  options: {
-    capture: true,
-    passive: false
-  }
-}, {
-  name: 'touchmove',
-  handlerName: 'handleBlockScroll',
-  options: {
-    capture: true,
-    passive: false
-  }
-}, {
-  name: 'scroll',
-  handlerName: 'handlePositionChange',
-  options: {
-    capture: true,
-    passive: false
-  }
-}, {
-  name: 'keydown',
-  handlerName: 'preventKeyboardScroll',
-  options: {
-    capture: true,
-    passive: false
-  }
-}]);
-const IFRAME_SCROLL_BLOCK_EVENTS = Object.freeze(SCROLL_BLOCK_EVENTS.filter(event => event.name !== 'keydown'));
-const CLICK_EVENTS = Object.freeze([{
-  name: 'click',
-  handlerName: 'documentClickHandler',
-  options: {
-    capture: false,
-    passive: false
-  }
-}, {
-  name: 'click',
-  handlerName: 'documentClickHandler1',
-  options: {
-    capture: true,
-    passive: false
-  }
-}]);
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -145,7 +99,6 @@ const Popup = function (Component) {
       this.handleBlockScroll = this.handleBlockScroll.bind(this);
       this.handlePositionChange = this.handlePositionChange.bind(this);
       this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
-      this.updateListeners = this.updateListeners.bind(this);
       this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
       this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
       this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
@@ -158,11 +111,8 @@ const Popup = function (Component) {
       this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
       this.updatePopupState = this.updatePopupState.bind(this);
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
-      this.handleIframeClickEvents = this.handleIframeClickEvents.bind(this);
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
-      this.getParentContainerElement = this.getParentContainerElement.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
-      this.parentContainerElement = this.getParentContainerElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -183,10 +133,11 @@ const Popup = function (Component) {
       popups[group] = groupPopups;
 
       if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-        this.updateListeners(true, CLICK_EVENTS, document);
+        document.addEventListener('click', this.documentClickHandler, false);
         document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
         window.addEventListener('resize', this.handleResize);
+        document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -205,22 +156,8 @@ const Popup = function (Component) {
       }
     }
 
-    getParentContainerElement() {
-      const getParentContainer = getLibraryConfig('getParentContainer');
-
-      if (getParentContainer && typeof getParentContainer === 'function') {
-        const parent = getParentContainer();
-
-        if (parent) {
-          return parent;
-        }
-      }
-
-      return document;
-    }
-
-    handleScrollAndBlockEvents(shouldAdd) {
-      if (shouldAdd) {
+    handleScrollAndBlockEvents(isPopupReady, isMobile) {
+      if (isPopupReady && !isMobile) {
         this.handleAddingScrollBlock();
         this.handleAddingScrollToUpdatePosition();
       } else {
@@ -229,16 +166,6 @@ const Popup = function (Component) {
       }
     }
 
-    handleIframeClickEvents(shouldAdd) {
-      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
-        const frameDocument = frame.contentDocument;
-
-        if (frameDocument) {
-          this.updateListeners(shouldAdd, CLICK_EVENTS, frameDocument);
-        }
-      });
-    }
-
     componentDidUpdate(prevProps, prevState) {
       const {
         isPopupReady,
@@ -265,8 +192,7 @@ const Popup = function (Component) {
       }
 
       if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-        this.handleScrollAndBlockEvents(isPopupReady && !isMobile);
-        this.handleIframeClickEvents(isPopupReady && !isMobile);
+        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
       }
     }
 
@@ -284,7 +210,6 @@ const Popup = function (Component) {
       }, popups);
       this.handleRemovingScrollBlock();
       this.handleRemovingScrollToUpdatePosition();
-      this.handleIframeClickEvents(false);
       let noPopups = true;
 
       for (const i in popups) {
@@ -299,10 +224,11 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        this.updateListeners(false, CLICK_EVENTS, document);
+        document.removeEventListener('click', this.documentClickHandler);
         document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
         window.removeEventListener('resize', this.handleResize);
+        document.removeEventListener('click', this.documentClickHandler1, true);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.removeEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -420,46 +346,41 @@ const Popup = function (Component) {
       }
     }
 
-    updateListeners() {
-      let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      let eventList = arguments.length > 1 ? arguments[1] : undefined;
-      let element = arguments.length > 2 ? arguments[2] : undefined;
-      const method = add ? 'addEventListener' : 'removeEventListener';
-      eventList.forEach(_ref2 => {
-        let {
-          name,
-          handlerName,
-          options
-        } = _ref2;
-        const handler = this[handlerName];
-
-        if (handler) {
-          element[method](name, handler, options);
-        }
-      });
-    }
-
     addScrollBlockListeners() {
-      // Main document
-      this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within parentContainerElement
-
-      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
-        const frameDocument = frame.contentDocument;
-
-        if (frameDocument) {
-          this.updateListeners(true, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
-        }
+      document.addEventListener('wheel', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('touchmove', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('scroll', this.handlePositionChange, {
+        capture: true,
+        passive: false
+      });
+      document.addEventListener('keydown', this.preventKeyboardScroll, {
+        capture: true,
+        passive: false
       });
     }
 
     removeScrollBlockListeners() {
-      this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
-      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
-        const frameDocument = frame.contentDocument;
-
-        if (frameDocument) {
-          this.updateListeners(false, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
-        }
+      document.removeEventListener('wheel', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('touchmove', this.handleBlockScroll, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('scroll', this.handlePositionChange, {
+        capture: true,
+        passive: false
+      });
+      document.removeEventListener('keydown', this.preventKeyboardScroll, {
+        capture: true,
+        passive: false
       });
     }
 

package/es/Provider/Config.js

@@ -8,8 +8,7 @@ let id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: () => {},
-  autoComplete: false,
-  getParentContainer: () => {}
+  autoComplete: false
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -16,6 +16,20 @@ function clearProps(props) {
 export default class VelocityAnimationGroup extends React.Component {
   constructor(props) {
     super(props);
+    this.handleOnEnterComplete = this.handleOnEnterComplete.bind(this);
+  }
+
+  handleOnEnterComplete(onEnterComplete, elements) {
+    if (typeof onEnterComplete === 'function') {
+      onEnterComplete(elements);
+    } else if (onEnterComplete && typeof onEnterComplete === 'object') {
+      elements.forEach(rootElement => {
+        Object.entries(onEnterComplete).forEach(_ref => {
+          let [cssProperty, cssValue] = _ref;
+          if (cssProperty.includes) rootElement.style[cssProperty] = cssValue;
+        });
+      });
+    }
   }
 
   render() {
@@ -35,7 +49,8 @@ export default class VelocityAnimationGroup extends React.Component {
       enterDelay,
       isCustomized,
       name,
-      needUIPack
+      needUIPack,
+      onEnterComplete
     } = this.props;
     let {
       direction,
@@ -76,7 +91,10 @@ export default class VelocityAnimationGroup extends React.Component {
       animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
       duration: !isReducedMotion ? enterDuration : 0,
       delay: enterDelay ? enterDelay : 0,
-      display: isFlex ? 'flex' : ''
+      display: isFlex ? 'flex' : '',
+      complete: elements => {
+        this.handleOnEnterComplete(onEnterComplete, elements);
+      }
     };
     let exitAnimation = {
       animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
@@ -91,6 +109,7 @@ export default class VelocityAnimationGroup extends React.Component {
       runOnMount: runOnMount,
       enterHideStyle: enterHideStyle,
       enterShowStyle: enterShowStyle,
+      onEnterComplete: onEnterComplete,
       ...childProps
     }, isActive ? children : null);
   }

package/es/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   exitDuration: 300,
   isActive: false,
   isCustomized: true,
-  needUIPack: true
+  needUIPack: true,
+  onEnterComplete: {}
 };

package/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -15,5 +15,6 @@ export const propTypes = {
   isFlex: PropTypes.bool,
   name: PropTypes.oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
   needUIPack: PropTypes.bool,
-  runOnMount: PropTypes.bool
+  runOnMount: PropTypes.bool,
+  onEnterComplete: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 };

package/es/common/common.module.css

@@ -260,6 +260,12 @@
   justify-content: space-between;
 }
 
+.justifyFstart {
+  -webkit-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+}
+
 .justifyFend {
   -webkit-box-pack: flex-end;
   -ms-flex-pack: flex-end;
@@ -493,6 +499,10 @@
   display: -webkit-box;
   overflow: hidden;
 }
+.lineClamp {
+  composes: wbreak clamp;
+  -webkit-line-clamp: var(--line-clamp,2);
+}
 
 .offSelection {
   -webkit-user-select: none;

package/es/utils/dropDownUtils.js

@@ -12,6 +12,7 @@ const getSelectedOptionsSel = props => props.selectedOptions || dummyArray;
 const getSearchStr = props => props.searchStr || '';
 
 export const getValueField = props => props.valueField || '';
+export const getSecondaryField = props => props.secondaryField || '';
 export const getTextField = props => props.textField || '';
 export const getImageField = props => props.imageField || '';
 export const getIconName = props => props.iconName || '';
@@ -40,23 +41,36 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getSearchFields = props => {
+  return props.searchFields || ['value'];
+};
+
+const isObjectContainsSearchString = function () {
+  let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let obj = arguments.length > 2 ? arguments[2] : undefined;
+  const matchedFields = searchFields.filter(element => {
+    return getSearchString(obj[element]).indexOf(searchStr) !== -1;
+  });
+  return matchedFields.length !== 0;
+};
+
 const getAllowValueFallback = props => props.allowValueFallback !== false;
 
-export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
+export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions, getSearchFields], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions, searchFields) => {
   const suggestions = [];
   const suggestionIds = [];
   options.forEach(option => {
+    const searchString = getSearchString(searchStr);
     const {
-      id,
       value = ''
     } = option;
     const valueString = getSearchString(value);
-    const searchString = getSearchString(searchStr);
-    const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
+    const isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : isObjectContainsSearchString(searchFields, searchString, option) : true;
 
-    if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
+    if (selectedOptions.indexOf(option.id) === -1 && isMatch || keepSelectedOptions) {
       suggestions.push(option);
-      suggestionIds.push(id);
+      suggestionIds.push(option.id);
     }
   });
   return {
@@ -107,7 +121,7 @@ export const extractOptionId = id => {
   }
 };
 export const extractOptionIdFromJson = (id, localData) => localData[id] || {};
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -119,6 +133,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         valueField: impValueField,
         textField: impTextField,
         imageField: impImageField,
+        secondaryField: impSecondaryField,
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
@@ -126,15 +141,25 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
+      const secondaryValue = typeof option === 'object' ? option[impSecondaryField || secondaryField] : '';
       const photoURL = typeof option === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
 
       id = !getIsEmptyValue(id) ? optionIdGrouping(id, prefixText) : '';
+      const additionalSearchFieldData = searchFields.reduce((value, item) => {
+        if (typeof option === 'object' && option.hasOwnProperty(item)) {
+          value[item] = option[item];
+        }
+
+        return value;
+      }, {});
 
       if (remvampOptionIds.indexOf(id) === -1 && !getIsEmptyValue(id) && !getIsEmptyValue(value)) {
         remvampOptionIds.push(id);
-        const optionDetails = {
+        const optionDetails = { // ...option,
+          ...additionalSearchFieldData,
           id,
           value,
+          secondaryValue,
           optionType: impOptionType || optionType
         };
 

package/lib/ListItem/ListContainer.js

@@ -58,7 +58,8 @@ var ListContainer = function ListContainer(props) {
       onClick = props.onClick,
       onMouseEnter = props.onMouseEnter,
       onMouseOver = props.onMouseOver,
-      eleRef = props.eleRef;
+      eleRef = props.eleRef,
+      align = props.align;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
     var mediaQueryOR = _ref.mediaQueryOR,
         isTouchDevice = _ref.isTouchDevice;
@@ -102,7 +103,7 @@ var ListContainer = function ListContainer(props) {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: "vertical",
+    align: align,
     alignBox: "row",
     className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,