@zohodesk/components 1.0.0-temp-199.11 → 1.0.0-temp-220

package/lib/Button/css/Button.module.css

@@ -25,6 +25,7 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
+
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
@@ -130,22 +131,43 @@
   composes: container;
 }
 
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
+.plainprimary,
+.plaindanger,
+.plainsuccess,
+.plainsecondary {
   --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
+.plainprimary {
+  --button_text_color: var(--zdt_button_default_text);
+}
+
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
+.plaindanger {
+  --button_text_color: var(--zdt_button_danger_text);
+}
+
+.plaindanger:hover {
+  --button_text_color: var(--zdt_button_danger_hover_text);
+}
+
+.plainsuccess {
+  --button_text_color: var(--zdt_button_success_text);
+}
+
+.plainsuccess:hover {
+  --button_text_color: var(--zdt_button_success_hover_text);
+}
+
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -156,10 +178,12 @@
 .dangerfilled,
 .secondary,
 .secondaryfilled,
+.success,
 .successfilled,
 .tertiaryfilled {
   --button_border_width: 1px;
 }
+
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -170,6 +194,7 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
+
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -179,16 +204,29 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
+
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
 
+.success {
+  --button_border_color: var(--zdt_button_success_border);
+  --button_bg_color: var(--zdt_button_default_bg);
+  --button_text_color: var(--zdt_button_success_text);
+}
+
+.success:hover {
+  --button_border_color: var(--zdt_button_success_hover_border);
+  --button_text_color: var(--zdt_button_success_hover_text);
+}
+
 .dangerfilled {
   --button_border_color: var(--zdt_button_primaryfill_border);
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -198,6 +236,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -208,6 +247,7 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -217,6 +257,7 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -227,6 +268,7 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
@@ -326,18 +368,23 @@
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .primaryelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -366,13 +413,13 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
@@ -447,7 +494,7 @@
     -webkit-transform: scaleX(-1) rotate(360deg);
   }
 }
-.success {
+.successstate {
   position: absolute;
   top: 50% ;
   left: 50% ;
@@ -523,6 +570,6 @@
   }
 }
 
-.loader{
-  color:var(--dot_mirror)
+.loader {
+  color: var(--dot_mirror)
 }

package/lib/Button/css/cssJSLogic.js

@@ -31,7 +31,7 @@ function cssJSLogic(_ref) {
   var paletteLower = palette.toLowerCase();
   var statusLower = status.toLowerCase();
   var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
-  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.success, statusLower != 'loading'), _compileClassNames2));
+  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
   var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
   return {
     buttonClass: buttonClass,

package/lib/Button/props/propTypes.js

@@ -18,7 +18,7 @@ var propTypes = {
   isBold: _propTypes["default"].bool,
   needAppearance: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
+  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'plainDanger', 'plainSuccess', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'success', 'successFilled', 'info', 'tertiaryFilled']),
   rounded: _propTypes["default"].bool,
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
   status: _propTypes["default"].oneOf(['loading', 'success', 'none']),

package/lib/ListItem/ListContainer.js

@@ -58,8 +58,7 @@ var ListContainer = function ListContainer(props) {
       onClick = props.onClick,
       onMouseEnter = props.onMouseEnter,
       onMouseOver = props.onMouseOver,
-      eleRef = props.eleRef,
-      align = props.align;
+      eleRef = props.eleRef;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
     var mediaQueryOR = _ref.mediaQueryOR,
         isTouchDevice = _ref.isTouchDevice;
@@ -103,7 +102,7 @@ var ListContainer = function ListContainer(props) {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: align,
+    align: "vertical",
     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,

package/lib/ListItem/ListItem.js

@@ -150,8 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
-        align: needMultiLineText ? 'baseline' : 'vertical',
+        customClass: customListItem,
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -172,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItem.module.css

@@ -73,7 +73,8 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  composes: lineClamp from '../common/common.module.css';
+  word-break: break-word;
+  composes: clamp from '../common/common.module.css'
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -202,13 +203,3 @@
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-.autoHeight {
-  --listitem_height: auto;
-}
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}
-.alignItemBaseline {
-  align-self: baseline;
-}

package/lib/ListItem/ListItemWithAvatar.js

@@ -162,7 +162,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
+        customClass: customListItem,
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
@@ -172,7 +172,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(needMultiLineText ? _ListItemModule["default"].alignItemBaseline : '', " ").concat(_ListItemModule["default"].leftAvatar)
+        className: _ListItemModule["default"].leftAvatar
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -199,7 +199,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItemWithIcon.js

@@ -147,8 +147,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customClass),
-        align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
+        customClass: customClass,
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,
@@ -177,7 +176,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "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 : ''),
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/props/defaultProps.js

@@ -18,8 +18,7 @@ var ListContainerDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listContainer',
-  needMultiLineText: false,
-  align: 'vertical'
+  needMultiLineText: false
 };
 exports.ListContainerDefaultProps = ListContainerDefaultProps;
 var ListItemDefaultProps = {

package/lib/ListItem/props/propTypes.js

@@ -43,8 +43,7 @@ var ListContainer_Props = {
   }),
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].object,
-  eleRef: _propTypes["default"].func,
-  align: _propTypes["default"].string
+  eleRef: _propTypes["default"].func
 };
 exports.ListContainer_Props = ListContainer_Props;
 var ListItem_Props = {

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."); }
@@ -201,11 +199,13 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
     key: "handleFormatSelectedOptions",
     value: function handleFormatSelectedOptions(selectedOptionDetails, props) {
       var valueField = props.valueField,
-          textField = props.textField;
+          textField = props.textField,
+          allowValueFallback = props.allowValueFallback;
       return this.formatSelectedOptions({
         options: selectedOptionDetails,
         valueField: valueField,
-        textField: textField
+        textField: textField,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -266,6 +266,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleSelectedOptionIdChange",
     value: function handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
+      var allowValueFallback = this.props.allowValueFallback;
       var newSelectedOptions = selectedGroupOptions.map(function (option) {
         return (0, _dropDownUtils.optionIdGrouping)(option.id, option.groupId);
       });
@@ -277,7 +278,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       return this.getSelectedOptions({
         selectedOptions: newSelectedOptions,
         normalizedFormatOptions: formatOptions,
-        selectedOptionsLength: selectedOptionsLength
+        selectedOptionsLength: selectedOptionsLength,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -324,10 +326,12 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleGetGroupSelectOptions",
     value: function handleGetGroupSelectOptions(props) {
-      var _props$groupedOptions = props.groupedOptions,
+      var allowValueFallback = props.allowValueFallback,
+          _props$groupedOptions = props.groupedOptions,
           groupedOptions = _props$groupedOptions === void 0 ? [] : _props$groupedOptions;
       return this.getGroupSelectOptions({
-        groupedOptions: groupedOptions
+        groupedOptions: groupedOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -968,9 +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 SuggestionsProps = customProps.SuggestionsProps;
+          isFocus = _this$props8.isFocus;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1134,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,
@@ -1147,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

@@ -218,7 +218,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           iconSize = props.iconSize,
           prefixText = props.prefixText,
           optionType = props.optionType,
-          disabledOptions = props.disabledOptions;
+          disabledOptions = props.disabledOptions,
+          allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -228,7 +229,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         prefixText: prefixText,
         optionType: optionType,
         iconSize: iconSize,
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -239,7 +241,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           showedSelectedOptionsCount = _ref.showedSelectedOptionsCount;
 
       var selectedOptionsLimit = props.selectedOptionsLimit,
-          selectedOptionDetails = props.selectedOptionDetails;
+          selectedOptionDetails = props.selectedOptionDetails,
+          allowValueFallback = props.allowValueFallback;
       showedSelectedOptionsCount = (0, _Common.getIsEmptyValue)(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
 
       var _this$handleFormatSel = this.handleFormatSelectedOptions(selectedOptionDetails, props),
@@ -252,7 +255,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       return this.getSelectedOptions({
         selectedOptions: selectedOptions,
         normalizedFormatOptions: formatOptions,
-        selectedOptionsLength: showedSelectedOptionsCount
+        selectedOptionsLength: showedSelectedOptionsCount,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -264,7 +268,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           optionType = props.optionType,
           iconName = props.iconName,
           iconSize = props.iconSize,
-          disabledOptions = props.disabledOptions;
+          disabledOptions = props.disabledOptions,
+          allowValueFallback = props.allowValueFallback;
       return this.formatSelectedOptions({
         options: selectedOptionDetails,
         valueField: valueField,
@@ -273,7 +278,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         optionType: optionType,
         iconName: iconName,
         iconSize: iconSize,
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {

package/lib/MultiSelect/MultiSelect.js

@@ -299,22 +299,26 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           valueField = props.valueField,
           textField = props.textField,
           prefixText = props.prefixText,
-          disabledOptions = props.disabledOptions;
+          disabledOptions = props.disabledOptions,
+          allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         prefixText: prefixText,
         optionType: 'default',
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
     key: "handleGetSelectedOptions",
-    value: function handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
+    value: function handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
+      var allowValueFallback = props.allowValueFallback;
       return this.getSelectedOptions({
         selectedOptions: selectedOptions,
-        normalizedFormatOptions: normalizedFormatOptions
+        normalizedFormatOptions: normalizedFormatOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -1089,9 +1093,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps;
-      var SuggestionsProps = customProps.SuggestionsProps;
+          needSelectAll = _this$props15.needSelectAll;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1168,7 +1170,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,
@@ -1181,7 +1183,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         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

@@ -99,14 +99,16 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           valueField = props.valueField,
           textField = props.textField,
           imageField = props.imageField,
-          disabledOptions = props.disabledOptions;
+          disabledOptions = props.disabledOptions,
+          allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         imageField: imageField,
         optionType: 'avatar',
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {

package/lib/MultiSelect/Suggestions.js

@@ -83,19 +83,15 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y,
-          customClass = _this$props.customClass,
-          needMultiLineText = _this$props.needMultiLineText;
+          a11y = _this$props.a11y;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
-      var containerClass = customClass.containerClass;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable,
-        className: containerClass
+        "aria-multiselectable": ariaMultiselectable
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''
@@ -119,8 +115,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         var commonProps = _objectSpread({
-          isDisabled: isDisabled,
-          needMultiLineText: needMultiLineText
+          isDisabled: isDisabled
         }, listItemCustomProps);
 
         if (listItemProps) {

package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -17,4 +17,32 @@ describe('AdvancedMultiSelect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var options = [{
+    id: 1,
+    text: 'Apple'
+  }, {
+    id: 2,
+    text: 'Orange'
+  }, 'string test'];
+  test('rendering the options array with objects and string', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedMultiSelect["default"], {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the options array with only objects using allowValueFallback', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AdvancedMultiSelect["default"], {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options,
+      allowValueFallback: false
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });