@zohodesk/components 1.2.62 → 1.3.0

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,
@@ -218,7 +221,10 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           iconSize = props.iconSize,
           prefixText = props.prefixText,
           optionType = props.optionType,
-          disabledOptions = props.disabledOptions;
+          disabledOptions = props.disabledOptions,
+          allowValueFallback = props.allowValueFallback,
+          searchFields = props.searchFields,
+          secondaryField = props.secondaryField;
       return this.formatOptions({
         options: options,
         valueField: valueField,
@@ -228,7 +234,10 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         prefixText: prefixText,
         optionType: optionType,
         iconSize: iconSize,
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback,
+        searchFields: searchFields,
+        secondaryField: secondaryField
       });
     }
   }, {
@@ -239,7 +248,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 +262,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       return this.getSelectedOptions({
         selectedOptions: selectedOptions,
         normalizedFormatOptions: formatOptions,
-        selectedOptionsLength: showedSelectedOptionsCount
+        selectedOptionsLength: showedSelectedOptionsCount,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -264,7 +275,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 +285,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         optionType: optionType,
         iconName: iconName,
         iconSize: iconSize,
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -282,11 +295,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;
@@ -354,11 +367,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;
 
@@ -395,53 +408,53 @@ 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;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,

package/lib/MultiSelect/MultiSelect.js

@@ -299,22 +299,28 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           valueField = props.valueField,
           textField = props.textField,
           prefixText = props.prefixText,
-          disabledOptions = props.disabledOptions;
+          disabledOptions = props.disabledOptions,
+          allowValueFallback = props.allowValueFallback,
+          searchFields = props.searchFields;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         prefixText: prefixText,
         optionType: 'default',
-        disabledOptions: disabledOptions
+        disabledOptions: disabledOptions,
+        allowValueFallback: allowValueFallback,
+        searchFields: searchFields
       });
     }
   }, {
     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
       });
     }
   }, {
@@ -350,14 +356,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;

package/lib/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/lib/MultiSelect/MultiSelectWithAvatar.js

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

package/lib/MultiSelect/Suggestions.js

@@ -98,6 +98,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
       }, suggestions.map(function (suggestion, index) {
         var id = suggestion.id,
             value = suggestion.value,
+            secondaryValue = suggestion.secondaryValue,
             photoURL = suggestion.photoURL,
             icon = suggestion.icon,
             optionType = suggestion.optionType,
@@ -143,7 +144,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            secondaryValue: secondaryValue
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -163,7 +165,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            secondaryValue: secondaryValue
           }));
         }
 

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();
+  });
 });