@zohodesk/components 1.2.62 → 1.2.63

package/es/Select/SelectWithAvatar.js

@@ -40,14 +40,16 @@ class SelectWithAvatarComponent extends SelectComponent {
       options,
       valueField,
       textField,
-      imageField
+      imageField,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
       valueField,
       textField,
       imageField,
-      optionType: 'avatar'
+      optionType: 'avatar',
+      allowValueFallback
     });
   }
 

package/es/Select/props/defaultProps.js

@@ -33,7 +33,8 @@ export const Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
-  isAbsolutePositioningNeeded: true
+  isAbsolutePositioningNeeded: true,
+  allowValueFallback: true
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -70,7 +71,8 @@ export const GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
-  customProps: {}
+  customProps: {},
+  allowValueFallback: true
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -93,7 +93,8 @@ export const Select_propTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
-  dropBoxPortalId: PropTypes.string
+  dropBoxPortalId: PropTypes.string,
+  allowValueFallback: PropTypes.bool
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -178,7 +179,8 @@ export const GroupSelect_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     TextBoxIconProps: PropTypes.object
-  })
+  }),
+  allowValueFallback: PropTypes.bool
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,

package/es/utils/dropDownUtils.js

@@ -40,6 +40,8 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
+const getAllowValueFallback = props => props.allowValueFallback !== false;
+
 export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) => {
   const suggestions = [];
   const suggestionIds = [];
@@ -105,7 +107,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], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
+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) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -123,7 +125,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
-      const value = typeof option === 'object' ? option[impTextField || textField] : option;
+      const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
       const photoURL = typeof option === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
 
       id = !getIsEmptyValue(id) ? optionIdGrouping(id, prefixText) : '';
@@ -171,7 +173,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
     optionsOrder: remvampOptionIds
   };
 });
-export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength], (selectedOptions, normalizedFormatOptions, selectedOptionsLength) => {
+export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) => {
   const output = [];
   const revampSelectedOptions = [];
   const normalizedSelectedOptions = {};
@@ -187,7 +189,8 @@ export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelect
       revampSelectedOptions.push(id);
       output.push(normalizedFormatOptions[option]);
       normalizedSelectedOptions[id] = normalizedFormatOptions[option];
-    } else if (getIsEmptyValue(id) && !getIsEmptyValue(option) && revampSelectedOptions.indexOf(option) === -1) {
+    } else if (allowValueFallback && getIsEmptyValue(id) && !getIsEmptyValue(option) && revampSelectedOptions.indexOf(option) === -1) {
+      //fallback case
       const newObj = {
         id: option,
         value: option
@@ -261,7 +264,7 @@ export const makeObjectConcat = () => createSelector([getObj1, getObj2], (obj1,
 const getGroupedOptions = props => props.groupedOptions || dummyArray;
 
 const getFormatOptions = makeFormatOptions();
-export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions], groupedOptions => {
+export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions, getAllowValueFallback], (groupedOptions, allowValueFallback) => {
   const revampedGroups = [];
   let allOptionIds = [];
   let allNormalizedOptions = {}; //all group normalized options
@@ -290,7 +293,8 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
-        prefixText: groupId
+        prefixText: groupId,
+        allowValueFallback
       });
 
       if (optionsOrder.length) {

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -199,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
       });
     }
   }, {
@@ -264,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);
       });
@@ -275,7 +278,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       return this.getSelectedOptions({
         selectedOptions: newSelectedOptions,
         normalizedFormatOptions: formatOptions,
-        selectedOptionsLength: selectedOptionsLength
+        selectedOptionsLength: selectedOptionsLength,
+        allowValueFallback: allowValueFallback
       });
     }
   }, {
@@ -322,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
       });
     }
   }, {

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
       });
     }
   }, {

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