@zohodesk/components 1.0.0-temp-199.10 → 1.0.0-temp-199.12

package/README.md

@@ -32,6 +32,24 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 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.
+
+# 1.2.60
+
+- **Textarea** -  Handled the default height and width appropriately based on the rows and cols props.
+
+# 1.2.59
+
+- **Textarea** - `rows, cols, customAttributes` prop supported
+
 # 1.2.58
 
 - **DropBoxElement** - `.arrow` style override issue fixed

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/ListItem/ListContainer.js

@@ -31,7 +31,8 @@ const ListContainer = props => {
     onClick,
     onMouseEnter,
     onMouseOver,
-    eleRef
+    eleRef,
+    align
   } = props;
   const responsiveFunc = useCallback(_ref => {
     let {
@@ -77,7 +78,7 @@ const ListContainer = props => {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: "vertical",
+    align: align,
     alignBox: "row",
     className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,

package/es/ListItem/ListItem.js

@@ -100,7 +100,8 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customListItem}`,
+      align: needMultiLineText ? 'baseline' : 'vertical',
       dataId: dataIdString,
       dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
@@ -122,7 +123,7 @@ export default class ListItem extends React.Component {
       adjust: true,
       className: style.children
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-      className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon} ${needMultiLineText ? style.tickIconCenter : ''}`,
+      className: `${style.tickIcon} ${tickIconPalette} ${needMultiLineText ? style.tickIconCenter : ''} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,
       dataSelectorId: `${dataSelectorId}_tickIcon`

package/es/ListItem/ListItem.module.css

@@ -73,7 +73,7 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  composes: listItemClamp from '~@zohodesk/components/es/common/common.module.css';
+  composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -203,15 +203,12 @@
   padding-bottom: var(--zd_size10) ;
 }
 .autoHeight {
-  height: auto ;
+  --listitem_height: auto;
 }
 .tickIconCenter {
   top: 50% ;
   transform: translateY(-50%);
 }
-.txtAlignBaseLine {
-  align-items: baseline;
-}
-.alignSelfTop {
-  align-self: start;
+.alignItemBaseline {
+  align-self: baseline;
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -118,7 +118,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: `${needMultiLineText ? style.alignSelfTop : ''} ${style.leftAvatar}`
+      className: `${needMultiLineText ? style.alignItemBaseline : ''} ${style.leftAvatar}`
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",

package/es/ListItem/ListItemWithIcon.js

@@ -95,7 +95,8 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${needMultiLineText ? style.autoHeight : ''} ${needMultiLineText && iconClass && !iconName ? style.txtAlignBaseLine : ''} ${customClass}`,
+      customClass: `${needMultiLineText ? style.autoHeight : ''} ${customClass}`,
+      align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
       dataId: dataIdString,
       dataSelectorId: dataSelectorId,
       isLink: isLink,

package/es/ListItem/props/defaultProps.js

@@ -12,7 +12,8 @@ export const ListContainerDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listContainer',
-  needMultiLineText: false
+  needMultiLineText: false,
+  align: 'vertical'
 };
 export const ListItemDefaultProps = {
   active: false,

package/es/ListItem/props/propTypes.js

@@ -27,7 +27,8 @@ export const ListContainer_Props = {
   }),
   customClass: PropTypes.string,
   customProps: PropTypes.object,
-  eleRef: PropTypes.func
+  eleRef: PropTypes.func,
+  align: PropTypes.string
 };
 export const ListItem_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -880,7 +880,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       customProps
     } = this.props;
     const {
-      suggestionsProps
+      SuggestionsProps = {}
     } = customProps;
     let {
       clearText = 'Clear all'
@@ -1062,7 +1062,7 @@ class AdvancedGroupMultiSelect extends React.Component {
             role: 'option'
           },
           dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          ...SuggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/MultiSelect/MultiSelect.js

@@ -1015,7 +1015,7 @@ export class MultiSelectComponent extends React.Component {
       customProps
     } = this.props;
     const {
-      suggestionsProps = {}
+      SuggestionsProps = {}
     } = customProps;
     const {
       selectedOptions,
@@ -1107,7 +1107,7 @@ export class MultiSelectComponent extends React.Component {
       a11y: {
         role: 'option'
       },
-      ...suggestionsProps
+      ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -36,7 +36,7 @@ export default class Suggestions extends React.PureComponent {
       ariaMultiselectable
     } = a11y;
     const {
-      containerClass
+      containerClass = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
@@ -69,6 +69,7 @@ export default class Suggestions extends React.PureComponent {
       });
       const commonProps = {
         isDisabled,
+        needMultiLineText,
         ...listItemCustomProps
       };
 
@@ -98,8 +99,7 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -119,8 +119,7 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         });
       }
 
@@ -139,8 +138,7 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y,
-        needMultiLineText: needMultiLineText
+        a11y: list_a11y
       });
     })));
   }

package/es/MultiSelect/props/defaultProps.js

@@ -164,8 +164,6 @@ export const SelectedOptions_defaultProps = {
 };
 export const Suggestions_defaultProps = {
   a11y: {},
-  customClass: {
-    containerClass: ''
-  },
+  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -111,7 +111,7 @@ export const MultiSelect_propTypes = {
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
-    suggestionsProps: PropTypes.object
+    SuggestionsProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };
@@ -254,7 +254,9 @@ export const AdvancedGroupMultiSelect_propTypes = {
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
-  customProps: PropTypes.object
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object
+  })
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/RippleEffect/RippleEffect.module.css

@@ -90,3 +90,19 @@
 .notAllowed {
   cursor: not-allowed;
 }
+.secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
+/* .hoverEffect:focus.secondary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_secondary_border);
+}
+.hoverEffect:hover.secondary.bgHover
+/* .hoverEffect:focus.secondary.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_secondary_bg);
+}
+.secondary.active {
+  background-color: var(--zdt_rippleeffect_secondary_active_bg);
+}
+.secondary.active.border {
+  border-color: var(--zdt_rippleeffect_secondary_active_border);
+}

package/es/RippleEffect/props/propTypes.js

@@ -6,7 +6,7 @@ export const propTypes = {
   isDisabled: PropTypes.bool,
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  palette: PropTypes.oneOf(['default', 'secondary', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
   cssClassPropOfChild: PropTypes.string,
   isCopyTextEnabled: PropTypes.bool
 };

package/es/Select/GroupSelect.js

@@ -592,7 +592,7 @@ export class GroupSelectComponent extends PureComponent {
       customProps
     } = this.props;
     const {
-      suggestionsProps = {}
+      SuggestionsProps = {}
     } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -793,7 +793,7 @@ export class GroupSelectComponent extends PureComponent {
             role: 'option'
           },
           dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          ...SuggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/SelectWithAvatar.js

@@ -167,7 +167,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       customProps
     } = this.props;
     const {
-      suggestionsProps = {}
+      SuggestionsProps = {}
     } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -326,7 +326,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaParentRole: 'listbox',
           role: 'option'
         },
-        ...suggestionsProps
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -368,7 +368,7 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      listItemProps = {}
+      ListItemProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -532,7 +532,7 @@ class SelectWithIcon extends Component {
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
           },
-          ...listItemProps
+          ...ListItemProps
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,