@zohodesk/components 1.0.0-temp-199.14 → 1.0.0-temp-222

package/lib/ListItem/ListItemWithCheckBox.js

@@ -117,7 +117,9 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          lhsBoxAlign = _this$props4.lhsBoxAlign;
+          secondaryValue = _this$props4.secondaryValue,
+          lhsAlignContent = _this$props4.lhsAlignContent,
+          lhsJustifyContent = _this$props4.lhsJustifyContent;
 
       var listA11y = _objectSpread({
         role: 'option'
@@ -133,11 +135,6 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
-      var sizeClassMap = {
-        small: _ListItemModule["default"].smallIconBox,
-        medium: _ListItemModule["default"].mediumIconBox,
-        large: _ListItemModule["default"].largeIconBox
-      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -146,7 +143,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
+        customClass: customListItem,
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         dataSelectorId: dataSelectorId,
         onClick: this.onClick,
@@ -156,7 +153,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : ''),
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)], " ").concat(lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''),
         dataId: "".concat(dataId ? dataId : value, "_checkBox")
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
@@ -167,12 +165,18 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customCheckBox: customCheckBox,
           customLabel: customLabel
         }
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      })), value || secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value));
+      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : secondaryValue,
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value)
+      }, secondaryValue) : null)) : null);
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -125,7 +125,9 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          lhsBoxAlign = _this$props4.lhsBoxAlign;
+          secondaryValue = _this$props4.secondaryValue,
+          lhsAlignContent = _this$props4.lhsAlignContent,
+          lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -138,11 +140,6 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 
       var ariaHidden = listA11y.ariaHidden;
       var dataIdString = dataId ? "".concat(dataId.replace("'", '_')) : value.toLowerCase().replace("'", '_');
-      var sizeClassMap = {
-        small: _ListItemModule["default"].smallIconBox,
-        medium: _ListItemModule["default"].mediumIconBox,
-        large: _ListItemModule["default"].largeIconBox
-      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -153,8 +150,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customClass),
-        align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
+        customClass: customClass,
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,
@@ -168,7 +164,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         customProps: ListItemProps
       }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : ''),
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)], " ").concat(lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''),
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
@@ -176,14 +173,20 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         size: iconSize
       })), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
         className: iconClass
-      }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : null, value || secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
-      }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : secondaryValue,
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value)
+      }, secondaryValue) : null)) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItemWithRadio.js

@@ -118,7 +118,9 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          lhsBoxAlign = _this$props4.lhsBoxAlign;
+          secondaryValue = _this$props4.secondaryValue,
+          lhsAlignContent = _this$props4.lhsAlignContent,
+          lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -134,11 +136,6 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customRadio = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
-      var sizeClassMap = {
-        small: _ListItemModule["default"].smallIconBox,
-        medium: _ListItemModule["default"].mediumIconBox,
-        large: _ListItemModule["default"].largeIconBox
-      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -147,7 +144,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
+        customClass: customListItem,
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         onClick: this.onClick,
@@ -157,7 +154,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : ''),
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)], " ").concat(lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''),
         dataId: "".concat(dataId, "_radio")
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,
@@ -169,12 +167,18 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customRadio: customRadio,
           customRadioWrap: customRadioWrap
         }
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      })), value || secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": disableTitle ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value));
+      }, value) : null, secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : secondaryValue,
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value)
+      }, secondaryValue) : null)) : null);
     }
   }]);
 

package/lib/ListItem/props/defaultProps.js

@@ -37,8 +37,7 @@ var ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  needMultiLineText: false
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {
@@ -58,7 +57,7 @@ var ListItemWithAvatarDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithAvatar',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start'
 };
 exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
 var ListItemWithCheckBoxDefaultProps = {
@@ -74,7 +73,8 @@ var ListItemWithCheckBoxDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithCheckBox',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
 var ListItemWithIconDefaultProps = {
@@ -93,7 +93,8 @@ var ListItemWithIconDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
 var ListItemWithRadioDefaultProps = {
@@ -110,6 +111,7 @@ var ListItemWithRadioDefaultProps = {
   customProps: {},
   dataSelectorId: 'listItemWithRadio',
   needMultiLineText: false,
-  lhsBoxAlign: 'baseline'
+  lhsAlignContent: 'start',
+  lhsJustifyContent: 'center'
 };
 exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;

package/lib/ListItem/props/propTypes.js

@@ -75,7 +75,6 @@ var ListItem_Props = {
     ariaSelected: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
-  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customTickIcon: _propTypes["default"].string
@@ -89,7 +88,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'end', 'center'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -97,7 +96,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
-})), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "lhsBoxAlign", _propTypes["default"].oneOf(['baseline', 'vertical'])), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
+})), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object,
   ContainerProps: _propTypes["default"].object,
   AvatarTeamProps: _propTypes["default"].exact(_propTypes3.propTypes),
@@ -122,12 +121,14 @@ var ListItemWithCheckBox_Props = {
   size: _propTypes["default"].string,
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
+  secondaryValue: _propTypes["default"].string,
+  lhsAlignContent: _propTypes["default"].oneOf(['start', 'end', 'center']),
+  lhsJustifyContent: _propTypes["default"].oneOf(['start', 'end', 'center']),
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
-  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
@@ -158,13 +159,15 @@ var ListItemWithIcon_Props = {
   size: _propTypes["default"].string,
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
+  secondaryValue: _propTypes["default"].string,
+  lhsAlignContent: _propTypes["default"].oneOf(['start', 'end', 'center']),
+  lhsJustifyContent: _propTypes["default"].oneOf(['start', 'end', 'center']),
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
-  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
@@ -192,12 +195,14 @@ var ListItemWithRadio_Props = {
   size: _propTypes["default"].string,
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
+  secondaryValue: _propTypes["default"].string,
+  lhsAlignContent: _propTypes["default"].oneOf(['start', 'end', 'center']),
+  lhsJustifyContent: _propTypes["default"].oneOf(['start', 'end', 'center']),
   a11y: _propTypes["default"].shape({
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
-  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

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

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -135,13 +135,16 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           _this$state$options = _this$state.options,
           options = _this$state$options === void 0 ? dummyArray : _this$state$options,
           searchStr = _this$state.searchStr;
-      var needLocalSearch = this.props.needLocalSearch;
+      var _this$props2 = this.props,
+          needLocalSearch = _this$props2.needLocalSearch,
+          searchFields = _this$props2.searchFields;
 
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
         selectedOptions: dummyArray,
         searchStr: (0, _Common.getSearchString)(searchStr),
-        needSearch: needLocalSearch
+        needSearch: needLocalSearch,
+        searchFields: searchFields
       }),
           suggestions = _this$getFilterSugges.suggestions,
           suggestionIds = _this$getFilterSugges.suggestionIds;
@@ -157,14 +160,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this$state2 = this.state,
           optionsNormalize = _this$state2.optionsNormalize,
           searchStr = _this$state2.searchStr;
-      var _this$props2 = this.props,
-          onChange = _this$props2.onChange,
-          _this$props2$needToCl = _this$props2.needToCloseOnSelect,
-          needToCloseOnSelect = _this$props2$needToCl === void 0 ? false : _this$props2$needToCl,
-          togglePopup = _this$props2.togglePopup,
-          isSearchClearOnSelect = _this$props2.isSearchClearOnSelect,
-          propSelectedOptions = _this$props2.selectedOptions,
-          disabledOptions = _this$props2.disabledOptions;
+      var _this$props3 = this.props,
+          onChange = _this$props3.onChange,
+          _this$props3$needToCl = _this$props3.needToCloseOnSelect,
+          needToCloseOnSelect = _this$props3$needToCl === void 0 ? false : _this$props3$needToCl,
+          togglePopup = _this$props3.togglePopup,
+          isSearchClearOnSelect = _this$props3.isSearchClearOnSelect,
+          propSelectedOptions = _this$props3.selectedOptions,
+          disabledOptions = _this$props3.disabledOptions;
 
       var _filterSelectedOption = (0, _dropDownUtils.filterSelectedOptions)({
         selectedOptions: selectedOptions,
@@ -288,11 +291,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this2 = this;
 
       var oldAllSelectedOptionsDetails = this.allSelectedOptionsDetails;
-      var _this$props3 = this.props,
-          selectedOptions = _this$props3.selectedOptions,
-          selectedOptionsLimit = _this$props3.selectedOptionsLimit,
-          id = _this$props3.id,
-          selectedOptionDetails = _this$props3.selectedOptionDetails;
+      var _this$props4 = this.props,
+          selectedOptions = _this$props4.selectedOptions,
+          selectedOptionsLimit = _this$props4.selectedOptionsLimit,
+          id = _this$props4.id,
+          selectedOptionDetails = _this$props4.selectedOptionDetails;
       var oldSelectedOptions = prevProps.selectedOptions,
           oldSelectedOptionsLimit = prevProps.selectedOptionsLimit;
       var oldCount = this.state.showedSelectedOptionsCount;
@@ -360,11 +363,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this3 = this;
 
       var showedSelectedOptionsCount = this.state.showedSelectedOptionsCount;
-      var _this$props4 = this.props,
-          selectedOptionsLimit = _this$props4.selectedOptionsLimit,
-          selectedOptions = _this$props4.selectedOptions,
-          getSelectedOptionDetails = _this$props4.getSelectedOptionDetails,
-          removeClose = _this$props4.removeClose;
+      var _this$props5 = this.props,
+          selectedOptionsLimit = _this$props5.selectedOptionsLimit,
+          selectedOptions = _this$props5.selectedOptions,
+          getSelectedOptionDetails = _this$props5.getSelectedOptionDetails,
+          removeClose = _this$props5.removeClose;
       removeClose(e);
       var selectedOptionsLen = selectedOptions.length;
 
@@ -401,53 +404,54 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
     value: function render() {
       var _this4 = this;
 
-      var _this$props5 = this.props,
-          isReadOnly = _this$props5.isReadOnly,
-          needSelectAll = _this$props5.needSelectAll,
-          searchEmptyMessage = _this$props5.searchEmptyMessage,
-          emptyMessage = _this$props5.emptyMessage,
-          noMoreOptionsMessage = _this$props5.noMoreOptionsMessage,
-          dropBoxSize = _this$props5.dropBoxSize,
-          placeHolder = _this$props5.placeHolder,
-          isPopupOpen = _this$props5.isPopupOpen,
-          isPopupReady = _this$props5.isPopupReady,
-          position = _this$props5.position,
-          defaultDropBoxPosition = _this$props5.defaultDropBoxPosition,
-          selectAllText = _this$props5.selectAllText,
-          getContainerRef = _this$props5.getContainerRef,
-          removeClose = _this$props5.removeClose,
-          isAnimate = _this$props5.isAnimate,
-          animationStyle = _this$props5.animationStyle,
-          textBoxSize = _this$props5.textBoxSize,
-          variant = _this$props5.variant,
-          size = _this$props5.size,
-          isDisabled = _this$props5.isDisabled,
-          title = _this$props5.title,
-          dataIdMultiSelectComp = _this$props5.dataIdMultiSelectComp,
-          dataIdClearIcon = _this$props5.dataIdClearIcon,
-          dataIdSelectAllEle = _this$props5.dataIdSelectAllEle,
-          dataIdLoading = _this$props5.dataIdLoading,
-          _this$props5$selected = _this$props5.selectedOptions,
-          allselectedOptionIds = _this$props5$selected === void 0 ? [] : _this$props5$selected,
-          listItemSize = _this$props5.listItemSize,
-          needBorder = _this$props5.needBorder,
-          i18nKeys = _this$props5.i18nKeys,
-          htmlId = _this$props5.htmlId,
-          a11y = _this$props5.a11y,
-          borderColor = _this$props5.borderColor,
-          isBoxPaddingNeed = _this$props5.isBoxPaddingNeed,
-          getFooter = _this$props5.getFooter,
-          customProps = _this$props5.customProps,
-          needEffect = _this$props5.needEffect,
-          disabledOptions = _this$props5.disabledOptions,
-          isLoading = _this$props5.isLoading,
-          dataSelectorId = _this$props5.dataSelectorId,
-          customClass = _this$props5.customClass,
-          isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
-          positionsOffset = _this$props5.positionsOffset,
-          targetOffset = _this$props5.targetOffset,
-          isRestrictScroll = _this$props5.isRestrictScroll,
-          isFocus = _this$props5.isFocus;
+      var _this$props6 = this.props,
+          isReadOnly = _this$props6.isReadOnly,
+          needSelectAll = _this$props6.needSelectAll,
+          searchEmptyMessage = _this$props6.searchEmptyMessage,
+          emptyMessage = _this$props6.emptyMessage,
+          noMoreOptionsMessage = _this$props6.noMoreOptionsMessage,
+          dropBoxSize = _this$props6.dropBoxSize,
+          placeHolder = _this$props6.placeHolder,
+          isPopupOpen = _this$props6.isPopupOpen,
+          isPopupReady = _this$props6.isPopupReady,
+          position = _this$props6.position,
+          defaultDropBoxPosition = _this$props6.defaultDropBoxPosition,
+          selectAllText = _this$props6.selectAllText,
+          getContainerRef = _this$props6.getContainerRef,
+          removeClose = _this$props6.removeClose,
+          isAnimate = _this$props6.isAnimate,
+          animationStyle = _this$props6.animationStyle,
+          textBoxSize = _this$props6.textBoxSize,
+          variant = _this$props6.variant,
+          size = _this$props6.size,
+          isDisabled = _this$props6.isDisabled,
+          title = _this$props6.title,
+          dataIdMultiSelectComp = _this$props6.dataIdMultiSelectComp,
+          dataIdClearIcon = _this$props6.dataIdClearIcon,
+          dataIdSelectAllEle = _this$props6.dataIdSelectAllEle,
+          dataIdLoading = _this$props6.dataIdLoading,
+          _this$props6$selected = _this$props6.selectedOptions,
+          allselectedOptionIds = _this$props6$selected === void 0 ? [] : _this$props6$selected,
+          listItemSize = _this$props6.listItemSize,
+          needBorder = _this$props6.needBorder,
+          i18nKeys = _this$props6.i18nKeys,
+          htmlId = _this$props6.htmlId,
+          a11y = _this$props6.a11y,
+          borderColor = _this$props6.borderColor,
+          isBoxPaddingNeed = _this$props6.isBoxPaddingNeed,
+          getFooter = _this$props6.getFooter,
+          customProps = _this$props6.customProps,
+          needEffect = _this$props6.needEffect,
+          disabledOptions = _this$props6.disabledOptions,
+          isLoading = _this$props6.isLoading,
+          dataSelectorId = _this$props6.dataSelectorId,
+          customClass = _this$props6.customClass,
+          isAbsolutePositioningNeeded = _this$props6.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props6.positionsOffset,
+          targetOffset = _this$props6.targetOffset,
+          isRestrictScroll = _this$props6.isRestrictScroll,
+          isFocus = _this$props6.isFocus,
+          secondaryField = _this$props6.secondaryField;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -615,6 +619,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           onMouseEnter: _this4.handleMouseEnter,
           needTick: true,
           listItemSize: listItemSize,
+          secondaryField: secondaryField,
           a11y: {
             role: 'option'
           },

package/lib/MultiSelect/MultiSelect.js

@@ -354,14 +354,16 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props4 = this.props,
           selectedOptions = _this$props4.selectedOptions,
           needLocalSearch = _this$props4.needLocalSearch,
-          keepSelectedOptions = _this$props4.keepSelectedOptions;
+          keepSelectedOptions = _this$props4.keepSelectedOptions,
+          searchFields = _this$props4.searchFields;
 
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
         selectedOptions: selectedOptions,
         searchStr: (0, _Common.getSearchString)(searchStr),
         needSearch: needLocalSearch,
-        keepSelectedOptions: keepSelectedOptions
+        keepSelectedOptions: keepSelectedOptions,
+        searchFields: searchFields
       }),
           suggestions = _this$getFilterSugges.suggestions,
           suggestionIds = _this$getFilterSugges.suggestionIds;
@@ -1094,9 +1096,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          secondaryField = _this$props15.secondaryField;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1173,7 +1173,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1183,10 +1183,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         dataId: "".concat(dataId, "_Options"),
         palette: palette,
         selectedOptions: selectedOptionIds,
+        secondaryField: secondaryField,
         a11y: {
           role: 'option'
         }
-      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -147,7 +147,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           keepSelectedOptions = _this$props.keepSelectedOptions,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          secondaryField = _this$props.secondaryField;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       i18nKeys = Object.assign({}, _defaultProps2.defaultProps.i18nKeys, i18nKeys, {
@@ -232,6 +233,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         dataId: "".concat(dataId, "_Options"),
         palette: palette,
         selectedOptions: selectedOptionIds,
+        secondaryField: secondaryField,
         a11y: {
           role: 'option'
         }