@zohodesk/components 1.2.61 → 1.2.63

package/README.md

@@ -32,6 +32,17 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.63
+
+- **AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar** - `allowValueFallback` prop supported.
+- **dropDownUtils** - Support string fallback for the object via the `allowValueFallback` prop.
+
+# 1.2.62
+
+- **Button**: Added new `palette` options: `plainDanger`, `plainSuccess`, and `success`.
+- **RippleEffect**: Added new `palette` option: `secondary`.
+- **Tag**: Enhanced the `onRemove` event to the `event` object `e` as the second argument for better event handling.
+
 # 1.2.61
 
 - **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -46,6 +46,10 @@
 	--zdt_button_secondary_border: var(--zdt_cta_grey_35_border);
 	--zdt_button_secondary_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_border: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_hover_text: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_text: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_hover_border: hsla(1, 63.86%, calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_hover_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
@@ -285,6 +289,10 @@
 	--zdt_rippleeffect_navy_border: var(--zdt_cta_grey_40_border);
 	--zdt_rippleeffect_danger_border: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_rippleeffect_danger_bg: hsla(0, 100.00%, calc(70.98% + var(--zdc_default)), calc( 0.05 + var(--zdc_alpha_high)));
+	--zdt_rippleeffect_secondary_border: var(--zdt_cta_grey_40_border);
+	--zdt_rippleeffect_secondary_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_rippleeffect_secondary_active_border: var(--zdt_cta_secondary_light_border);
+	--zdt_rippleeffect_secondary_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
 	
 	/* date time */
 	--zdt_datetime_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -46,6 +46,10 @@
 	--zdt_button_secondary_border: var(--zdt_cta_grey_35_border);
 	--zdt_button_secondary_hover_border: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_border: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_hover_border: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_border: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_hover_text: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_text: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_hover_border: hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_hover_text: hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
@@ -285,6 +289,10 @@
 	--zdt_rippleeffect_navy_border: var(--zdt_cta_grey_40_border);
 	--zdt_rippleeffect_danger_border: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_rippleeffect_danger_bg: hsla(0, 71.43%, calc(97.25% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_rippleeffect_secondary_border: var(--zdt_cta_grey_40_border);
+	--zdt_rippleeffect_secondary_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_rippleeffect_secondary_active_border: var(--zdt_cta_secondary_light_border);
+	--zdt_rippleeffect_secondary_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
 	
 	/* date time */
 	--zdt_datetime_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -46,6 +46,10 @@
 	--zdt_button_secondary_border: var(--zdt_cta_grey_35_border);
 	--zdt_button_secondary_hover_border: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_border: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_hover_text: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_success_text: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_hover_border: hsla(1, 63.86%, calc(48.82% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_danger_hover_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
@@ -285,6 +289,10 @@
 	--zdt_rippleeffect_navy_border: var(--zdt_cta_grey_40_border);
 	--zdt_rippleeffect_danger_border: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_rippleeffect_danger_bg: hsla(0, 100.00%, calc(70.98% + var(--zdc_default)), calc( 0.05 + var(--zdc_alpha_high)));
+	--zdt_rippleeffect_secondary_border: var(--zdt_cta_grey_40_border);
+	--zdt_rippleeffect_secondary_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_rippleeffect_secondary_active_border: var(--zdt_cta_secondary_light_border);
+	--zdt_rippleeffect_secondary_active_bg: var(--zdtm_cta_primary_light_bg_default_inverse_low);
 	
 	/* date time */
 	--zdt_datetime_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/es/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -139,7 +139,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="customStautusClassName successelement primarysuccess"
@@ -260,7 +260,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="successelement primarysuccess"

package/es/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/es/Button/css/cssJSLogic.js

@@ -36,7 +36,7 @@ export default function cssJSLogic(_ref) {
     [customStatusSize]: !!customStatusSize,
     [style.loading]: statusLower === 'loading',
     [style[`${size}loading`]]: statusLower === 'loading',
-    [style.success]: statusLower != 'loading'
+    [style.successstate]: statusLower != 'loading'
   });
   let loaderChildClass = compileClassNames({
     [customStatus]: !!customStatus,

package/es/Button/props/propTypes.js

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

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -121,12 +121,14 @@ class AdvancedGroupMultiSelect extends React.Component {
   handleFormatSelectedOptions(selectedOptionDetails, props) {
     let {
       valueField,
-      textField
+      textField,
+      allowValueFallback
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
       valueField,
-      textField
+      textField,
+      allowValueFallback
     });
   }
 
@@ -182,6 +184,9 @@ class AdvancedGroupMultiSelect extends React.Component {
   }
 
   handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
+    const {
+      allowValueFallback
+    } = this.props;
     let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
     let selectedOptionsLength = newSelectedOptions.length;
     let formatOptions = this.objectConcat({
@@ -191,7 +196,8 @@ class AdvancedGroupMultiSelect extends React.Component {
     return this.getSelectedOptions({
       selectedOptions: newSelectedOptions,
       normalizedFormatOptions: formatOptions,
-      selectedOptionsLength
+      selectedOptionsLength,
+      allowValueFallback
     });
   }
 
@@ -238,10 +244,12 @@ class AdvancedGroupMultiSelect extends React.Component {
 
   handleGetGroupSelectOptions(props) {
     let {
+      allowValueFallback,
       groupedOptions = []
     } = props;
     return this.getGroupSelectOptions({
-      groupedOptions
+      groupedOptions,
+      allowValueFallback
     });
   }
 

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -146,7 +146,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       iconSize,
       prefixText,
       optionType,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
@@ -157,7 +158,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       prefixText,
       optionType,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 
@@ -168,7 +170,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } = this.state || {};
     const {
       selectedOptionsLimit,
-      selectedOptionDetails
+      selectedOptionDetails,
+      allowValueFallback
     } = props;
     showedSelectedOptionsCount = getIsEmptyValue(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
     const {
@@ -181,7 +184,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return this.getSelectedOptions({
       selectedOptions,
       normalizedFormatOptions: formatOptions,
-      selectedOptionsLength: showedSelectedOptionsCount
+      selectedOptionsLength: showedSelectedOptionsCount,
+      allowValueFallback: allowValueFallback
     });
   }
 
@@ -193,7 +197,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       optionType,
       iconName,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -203,7 +208,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       optionType,
       iconName,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 

package/es/MultiSelect/MultiSelect.js

@@ -216,7 +216,8 @@ export class MultiSelectComponent extends React.Component {
       valueField,
       textField,
       prefixText,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
@@ -224,14 +225,19 @@ export class MultiSelectComponent extends React.Component {
       textField,
       prefixText,
       optionType: 'default',
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 
-  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
+  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
+    const {
+      allowValueFallback
+    } = props;
     return this.getSelectedOptions({
       selectedOptions,
-      normalizedFormatOptions
+      normalizedFormatOptions,
+      allowValueFallback
     });
   }
 

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -41,7 +41,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       valueField,
       textField,
       imageField,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatOptions({
       options,
@@ -49,7 +50,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       textField,
       imageField,
       optionType: 'avatar',
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 

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

@@ -9,4 +9,32 @@ describe('AdvancedMultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const options = [{
+    id: 1,
+    text: 'Apple'
+  }, {
+    id: 2,
+    text: 'Orange'
+  }, 'string test'];
+  test('rendering the options array with objects and string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the options array with only objects using allowValueFallback', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options,
+      allowValueFallback: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });