@zohodesk/components 1.2.61 → 1.2.63

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