@zohodesk/components 1.0.0-alpha-215 → 1.0.0-alpha-219

package/README.md

@@ -32,9 +32,28 @@ In this Package we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-219
+
+- ContextOptimizer => ShallowEqal function issue solved
+# 1.0.0-alpha-218
+
+- Select => Custom props undefined issue solved
+
+# 1.0.0-alpha-217
+
+- TextBox, Multiselect, Tag missing dark palette variables moved under Themes folder file
+
+# 1.0.0-alpha-216
+
+- Select component -> customProps added -> TextBoxProps ,DropdownSearchTextBoxProps, listItemProps added
+- Suggestions component -> customProps added -> listItemProps
+- TextBox component -> customProps added
+- TextBoxIcon component -> customProps added -> TextBoxProps
+
 # 1.0.0-alpha-215
 
-- Select Search Regex  Changed to Lowercase
+- Select Search Regex Changed to Lowercase
+
 # 1.0.0-alpha-214
 
 - Avatar, Label, Tag, Dropdown, ListItem, Multiselect missing dark palette variables moved under Themes folder files
@@ -42,9 +61,10 @@ In this Package we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-213
 
 - AnimationVariable File import removed
+
 # 1.0.0-alpha-212
 
-- Stencils =>  Converted to Pure Component
+- Stencils => Converted to Pure Component
 
 # 1.0.0-alpha-211
 

package/es/Appearance/dark/mode/darkMode.module.css

@@ -153,7 +153,6 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: #a8b0bd;
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: #e2e4e6;
@@ -295,7 +294,6 @@
   --zdt_multiselect_box_bg: #232b38;
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: #828994;
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -382,14 +380,14 @@
   --zdt_tabs_alpha_box_shadow: var(--zd_shadow_dark10);
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: #e2e4e6;
- 
+
   /* custom scroll */
   --zdt_customscroll_default_bg: rgba(225, 225, 225, 0.06);
   --zdt_customscroll_thump_bg: rgba(225, 225, 225, 0.12);
-  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_thump_hover_bg: rgba(168, 176, 189, 0.3);
-  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.14);
   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

package/es/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7c1c;
     --zdt_cta_alpha_border: #45a159;
     --zdt_cta_alpha_hover_border: #0e7c1c;
-    --zdt_cta_alpha_bg: #2A433F;
+    --zdt_cta_alpha_bg: #2a433f;
     --zdt_cta_beta_border: #45a159;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

package/es/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #a81111;
     --zdt_cta_alpha_border: #e94f4f;
     --zdt_cta_alpha_hover_border: #a81111;
-    --zdt_cta_alpha_bg: #372F3A;
+    --zdt_cta_alpha_bg: #372f3a;
     --zdt_cta_beta_border: #e94f4f;
     --zdt_cta_grey_10_bg: #262f3d;
     --zdt_cta_grey_10_border: #262f3d;

package/es/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: #a8b0bd;
 }

package/es/Appearance/default/mode/defaultMode.module.css

@@ -141,6 +141,8 @@
   --zdt_tag_pure_border: var(--zd_border_smoke91);
   --zdt_tag_pure_hover_bg: var(--zd_bg_smoke6);
   --zdt_tag_pure_hover_border: var(--zd_border_dark6);
+  --zdt_tag_dark_close_bg: #864654;
+  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -153,7 +155,6 @@
   --zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
   --zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
   --zdt_textbox_secondary_text: var(--dot_text_shuttleGrey);
-  --zdt_textbox_light_text: var(--dot_text_white);
 
   /* dropdown */
   --zdt_dropdown_default_text: var(--dot_text_black);
@@ -295,7 +296,6 @@
   --zdt_multiselect_box_bg: var(--dot_bg_white);
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: var(--dot_text_slateGrey);
-  --zdt_multiselect_darkmsg_text: #d0d0d4;
 
   /* advanced multiselect */
   --zdt_advancedmultiselect_default_border: var(--dot_inputLine);
@@ -383,13 +383,13 @@
   --zdt_tabs_delta_border: var(--zdt_cta_primary_border);
   --zdt_tabs_highlight_border: var(--dot_border_black);
 
-   /* custom scroll */
-   --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
-   --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
-   --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
-   --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
-   --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
-   --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
-   --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
-   --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
+  /* custom scroll */
+  --zdt_customscroll_default_bg: rgba(0, 0, 0, 0.02);
+  --zdt_customscroll_thump_bg: rgba(0, 0, 0, 0.12);
+  --zdt_customscroll_thump_hover_bg: rgba(0, 0, 0, 0.16);
+  --zdt_customscroll_border: rgba(44, 51, 77, 0.1);
+  --zdt_customscroll_thump_dark_bg: rgba(225, 225, 225, 0.15);
+  --zdt_customscroll_thump_dark_hover_bg: rgba(225, 225, 225, 0.17);
+  --zdt_customscroll_dark_border: rgba(225, 225, 225, 0.12);
+  --zdt_customscroll_dark_bg: rgba(225, 225, 225, 0.06);
 }

package/es/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #383f57;
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/es/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #0e7526;
     --zdt_cta_alpha_border: #26a942;
     --zdt_cta_alpha_hover_border: #0e7526;
-    --zdt_cta_alpha_bg: #D4EED9;
+    --zdt_cta_alpha_bg: #d4eed9;
     --zdt_cta_beta_border: #26a942;
     --zdt_cta_grey_10_bg: #f6faf9;
     --zdt_cta_grey_10_border: #f6faf9;

package/es/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/es/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #b25900;
     --zdt_cta_alpha_border: #e57717;
     --zdt_cta_alpha_hover_border: #b25900;
-    --zdt_cta_alpha_bg: #FAE4D1;
+    --zdt_cta_alpha_bg: #fae4d1;
     --zdt_cta_beta_border: #e57717;
     --zdt_cta_grey_10_bg: #f9f7f6;
     --zdt_cta_grey_10_border: #f9f7f6;

package/es/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/es/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -18,7 +18,7 @@
     --zdt_cta_alpha_hover_text: #ab1a18;
     --zdt_cta_alpha_border: #de3535;
     --zdt_cta_alpha_hover_border: #ab1a18;
-    --zdt_cta_alpha_bg: #F8D7D7;
+    --zdt_cta_alpha_bg: #f8d7d7;
     --zdt_cta_beta_border: #de3535;
     --zdt_cta_grey_10_bg: #f9f6f7;
     --zdt_cta_grey_10_border: #f9f6f7;

package/es/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/es/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -22,6 +22,7 @@
     /* tag */
     --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+    --zdt_tag_dark_hover_text: #d0d0d4;
     --zdt_tag_dark_hover_bg: #503348;
     --zdt_tag_dark_close_bg: #864654;
     --zdt_tag_dark_close_text: #de3535;
@@ -29,6 +30,7 @@
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkmsg_text: #d0d0d4;
     --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
@@ -38,6 +40,9 @@
     /* label */
     --zdt_label_dark_text: #d0d0d4;
 
+    /* textbox */
+    --zdt_textbox_light_text: var(--dot_text_white);
+
     /* dropdown */
     --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -72,8 +72,12 @@ export default class ListItemWithAvatar extends React.PureComponent {
       needAvatarTitle,
       avatarPalette,
       a11y,
-      customClass
+      customClass,
+      customProps
     } = this.props;
+    let {
+      ListItemProps = {}
+    } = customProps;
     let {
       customListItem = '',
       customAvatar = '',
@@ -109,7 +113,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       tagName: "li",
       dataId: `${dataIdString}_ListItemWithAvatar`,
       "data-title": isDisabled ? disableTitle : null
-    }, options), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
+    }, options, ListItemProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
@@ -160,7 +164,8 @@ ListItemWithAvatar.defaultProps = {
   needBorder: true,
   needAvatarTitle: true,
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithAvatar.propTypes = {
   active: PropTypes.bool,
@@ -196,6 +201,9 @@ ListItemWithAvatar.propTypes = {
     customListItem: PropTypes.string,
     customAvatar: PropTypes.string,
     customAvatarTeam: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ListItemProps: PropTypes.object
   })
 };
 

package/es/ListItem/ListItemWithIcon.js

@@ -65,8 +65,12 @@ export default class ListItemWithIcon extends React.Component {
       isDisabled,
       disableTitle,
       a11y,
-      customClass
+      customClass,
+      customProps
     } = this.props;
+    let {
+      ListItemProps = {}
+    } = customProps;
     let {
       role,
       ariaSelected,
@@ -96,7 +100,7 @@ export default class ListItemWithIcon extends React.Component {
       eleRef: this.getRef,
       tagName: "li",
       "data-title": isDisabled ? disableTitle : null
-    }, options), iconName && /*#__PURE__*/React.createElement(Box, {
+    }, options, ListItemProps), iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       className: style.iconBox,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
@@ -135,7 +139,8 @@ ListItemWithIcon.defaultProps = {
   value: 'List',
   needBorder: true,
   a11y: {},
-  customClass: ''
+  customClass: '',
+  customProps: {}
 };
 ListItemWithIcon.propTypes = {
   active: PropTypes.bool,
@@ -163,7 +168,10 @@ ListItemWithIcon.propTypes = {
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
   }),
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    ListItemProps: PropTypes.object
+  })
 };
 
 if (false) {

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -346,8 +348,13 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       a11y,
       borderColor,
       isBoxPaddingNeed,
-      getFooter
+      getFooter,
+      customProps
     } = this.props;
+    let {
+      SuggestionsProps = {},
+      DropBoxProps = {}
+    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -433,7 +440,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
       animationStyle: animationStyle,
       boxPosition: position || `${defaultDropBoxPosition}Center`,
       getRef: getContainerRef,
@@ -448,7 +455,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         role: 'listbox',
         ariaMultiselectable: true
       }
-    }, /*#__PURE__*/React.createElement(Card, {
+    }, DropBoxProps), /*#__PURE__*/React.createElement(Card, {
       customClass: style.box,
       onScroll: this.handleScroll
     }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
@@ -460,7 +467,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     })), /*#__PURE__*/React.createElement(CardContent, {
       customClass: dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       suggestions: suggestions,
       selectedOptions: allselectedOptionIds,
       getRef: this.suggestionItemRef,
@@ -472,7 +479,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       a11y: {
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,
@@ -560,7 +567,11 @@ AdvancedMultiSelectComponent.propTypes = {
   isBoxPaddingNeed: PropTypes.bool,
   isSearchClearOnSelect: PropTypes.bool,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func
+  getFooter: PropTypes.func,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  })
 };
 AdvancedMultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -587,7 +598,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   a11y: {},
   borderColor: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  customProps: {}
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);

package/es/MultiSelect/Suggestions.js

@@ -51,7 +51,8 @@ export default class Suggestions extends React.PureComponent {
         icon,
         optionType,
         iconSize,
-        isDisabled
+        isDisabled,
+        listItemProps
       } = suggestion;
       const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
@@ -62,6 +63,13 @@ export default class Suggestions extends React.PureComponent {
         isDisabled
       };
 
+      if (listItemProps) {
+        commonProps.customProps = {
+          'ListItemProps': { ...listItemProps
+          }
+        };
+      }
+
       if (optionType === 'avatar') {
         return /*#__PURE__*/React.createElement(ListItemWithAvatar, _extends({}, commonProps, {
           autoHover: false,
@@ -151,7 +159,8 @@ Suggestions.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     photoURL: PropTypes.string,
     logo: PropTypes.string,
-    optionType: PropTypes.string
+    optionType: PropTypes.string,
+    listItemProps: PropTypes.object
   }))
 };
 Suggestions.defaultProps = {

package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js

@@ -9,10 +9,20 @@ export default class AdvancedMultiSelect__default extends Component {
     this.state = {
       options: [{
         id: 2,
-        text: 'text2'
+        text: 'text2',
+        listItemProps: {
+          style: {
+            color: 'red'
+          }
+        }
       }, {
         id: 3,
-        text: 'text3'
+        text: 'text3',
+        listItemProps: {
+          style: {
+            color: 'blue'
+          }
+        }
       }, {
         id: 4,
         text: 'text4'
@@ -85,7 +95,12 @@ export default class AdvancedMultiSelect__default extends Component {
         noMoreText: 'No More Options .',
         searchEmptyText: 'No Matches Found .'
       },
-      getFooter: this.getFooter
+      getFooter: this.getFooter,
+      customProps: {
+        SuggestionsProps: {
+          needBorder: false
+        }
+      }
     });
   }