@zohodesk/components 1.0.0-alpha-212 → 1.0.0-alpha-216

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-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
+
+# 1.0.0-alpha-214
+
+- Avatar, Label, Tag, Dropdown, ListItem, Multiselect missing dark palette variables moved under Themes folder files
+
+# 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/AppContainer/AppContainer.js

@@ -12,7 +12,6 @@ import '@zohodesk/variables/lib/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/lib/transitionVariables.module.css';
 import '@zohodesk/variables/lib/no_transitionVariables.module.css';
-import '@zohodesk/variables/lib/animationVariables.module.css';
 import style from './AppContainer.module.css';
 export default class AppContainer extends React.Component {
   constructor(props) {

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

@@ -17,7 +17,6 @@
   --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
   --zdt_avatar_default_borderHover: #828994;
   --zdt_avatar_default_boxshadow: rgba(255, 255, 255, 0.14);
-  --zdt_avatar_white_text: var(--dot_text_white);
   --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
   --zdt_avatar_white_boxshadow: rgba(0, 0, 0, 0.11);
   --zdt_avatar_secondary_bg: #e2e4e6;
@@ -118,7 +117,6 @@
   --zdt_label_danger_text: var(--dot_text_brightOrange);
   --zdt_label_mandatory_text: #ff6b6b;
   --zdt_label_disable_text: var(--dot_inputDisable);
-  --zdt_label_dark_text: #d0d0d4;
 
   /* tag */
   --zdt_tag_default_text: #e2e4e6;
@@ -143,9 +141,6 @@
   --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_text: #d0d0d4;
-  --zdt_tag_dark_close_bg: #864654;
-  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -164,7 +159,6 @@
   --zdt_dropdown_default_text: #e2e4e6;
   --zdt_dropdown_default_border: var(--dot_border_mirror);
   --zdt_dropdown_default_bg: #a8b0bd;
-  --zdt_dropdown_darkheading_text: #a8b0bd;
   --zdt_dropdown_darkheading_bg: #383f57;
   --zdt_dropdown_darkheading_underline_bg: #828994;
   --zdt_dropdown_mirror_bg: var(--dot_bg_mirror);
@@ -193,7 +187,6 @@
   --zdt_listitem_primary_bg: var(--dot_listItemActive);
   --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
   --zdt_listitem_secondary_text: #232b38;
-  --zdt_listitem_dark_text: #e2e4e6;
 
   /* ribbon */
   --zdt_ribbon_default_text: #e2e4e6;
@@ -299,7 +292,6 @@
   --zdt_multiselect_delete_bg: var(--dot_bg_mirror);
   --zdt_multiselect_delete_hover_text: #e2e4e6;
   --zdt_multiselect_darkdelete_text: #9c9fab;
-  --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
   --zdt_multiselect_box_bg: #232b38;
   --zdt_multiselect_selectall_text: var(--zdt_cta_primary_text);
   --zdt_multiselect_message_text: #828994;

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #479dff;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #45a159;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #e94f4f;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #ff801f;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #232b38;
+    --zdt_listitem_dark_text: #e2e4e6;
     --zdt_listitem_dark_effect_bg: #262f3d;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #d79835;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
     
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #232b38;
+    --zdt_multiselect_darkdelete_hover_text: #e2e4e6;
 
     /* avatar */
     --zdt_avatar_white_border: #a8b0bd;
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: #a8b0bd;
 }

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

@@ -17,7 +17,6 @@
   --zdt_avatar_default_border: var(--zdt_cta_grey_40_border);
   --zdt_avatar_default_borderHover: var(--dot_border_slateGrey);
   --zdt_avatar_default_boxshadow: rgba(0, 0, 0, 0.11);
-  --zdt_avatar_white_text: var(--dot_text_white);
   --zdt_avatar_white_borderHover: var(--zdt_cta_grey_40_border);
   --zdt_avatar_white_boxshadow: rgba(255, 255, 255, 0.14);
   --zdt_avatar_secondary_bg: var(--dot_bg_black);
@@ -118,7 +117,6 @@
   --zdt_label_danger_text: var(--dot_text_brightOrange);
   --zdt_label_mandatory_text: var(--dot_text_brightRed);
   --zdt_label_disable_text: var(--dot_inputDisable);
-  --zdt_label_dark_text: #d0d0d4;
 
   /* tag */
   --zdt_tag_default_text: var(--dot_text_black);
@@ -143,9 +141,6 @@
   --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_text: #d0d0d4;
-  --zdt_tag_dark_close_bg: #864654;
-  --zdt_tag_dark_close_text: #de3535;
   --zdt_tag_dark_close_hover_bg: #de3535;
 
   /* textbox */
@@ -164,7 +159,6 @@
   --zdt_dropdown_default_text: var(--dot_text_black);
   --zdt_dropdown_default_border: var(--dot_border_mirror);
   --zdt_dropdown_default_bg: var(--dot_bg_shuttleGrey);
-  --zdt_dropdown_darkheading_text: var(--dot_text_white);
   --zdt_dropdown_darkheading_bg: #383f57;
   --zdt_dropdown_darkheading_underline_bg: #565e72;
   --zdt_dropdown_mirror_bg: var(--dot_bg_mirror);
@@ -193,7 +187,6 @@
   --zdt_listitem_primary_bg: var(--dot_listItemActive);
   --zdt_listitem_secondary_bg: var(--zdt_cta_primary_bg);
   --zdt_listitem_secondary_text: var(--dot_text_white);
-  --zdt_listitem_dark_text: #d0d0d4;
 
   /* ribbon */
   --zdt_ribbon_default_text: var(--dot_text_black);
@@ -299,7 +292,6 @@
   --zdt_multiselect_delete_bg: var(--dot_bg_mirror);
   --zdt_multiselect_delete_hover_text: var(--dot_text_black);
   --zdt_multiselect_darkdelete_text: #9c9fab;
-  --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
   --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);

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #383f57;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: #444a61;
     --zdt_listitem_dark_active_bg: #3b4d6d;
     --zdt_listitem_dark_tickicon: #6cbbfc;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: #42485f;
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: #4b5168;
     --zdt_multiselect_darkmsg_bg: #383f57;
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: var(--dot_border_shuttleGrey);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #1d2f33;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #2d484e;
     --zdt_listitem_dark_tickicon: #4ac064;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #332e24;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #4b4335;
     --zdt_listitem_dark_tickicon: #ff6363;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #34222d;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #4d3243;
     --zdt_listitem_dark_tickicon: #e57717;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* dropdown */
+    --zdt_dropdown_darkheading_text: var(--dot_text_white);
 }

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

@@ -14,18 +14,30 @@
 
     /* listitem */
     --zdt_listitem_dark_bg: #313323;
+    --zdt_listitem_dark_text: #d0d0d4;
     --zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
     --zdt_listitem_dark_active_bg: #494c34;
     --zdt_listitem_dark_tickicon: #e8b923;
 
     /* tag */
+    --zdt_tag_dark_text: #d0d0d4;
     --zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
     --zdt_tag_dark_hover_bg: #503348;
+    --zdt_tag_dark_close_bg: #864654;
+    --zdt_tag_dark_close_text: #de3535;
 
     /* multiselect */
     --zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
     --zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+    --zdt_multiselect_darkdelete_hover_text: var(--dot_text_white);
 
     /* avatar */
     --zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+    --zdt_avatar_white_text: var(--dot_text_white);
+
+    /* label */
+    --zdt_label_dark_text: #d0d0d4;
+
+    /* 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';
@@ -20,7 +22,7 @@ import { getUniqueId } from '../Provider/IdProvider';
 import style from './AdvancedMultiSelect.module.css';
 /**** Methods ****/
 
-import { getIsEmptyValue } from '../utils/Common.js';
+import { getIsEmptyValue, getSearchString } from '../utils/Common.js';
 import { filterSelectedOptions } from '../utils/dropDownUtils';
 /* eslint-disable react/sort-prop-types */
 
@@ -67,7 +69,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } = this.getFilterSuggestions({
       options,
       selectedOptions: dummyArray,
-      searchStr: searchStr.replace(/\s+/g, '').toLowerCase(),
+      searchStr: getSearchString(searchStr),
       needSearch: needLocalSearch
     });
     this.suggestionsOrder = suggestionIds;
@@ -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/MultiSelect.js

@@ -260,7 +260,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.getFilterSuggestions({
       options,
       selectedOptions,
-      searchStr: searchStr.replace(/\s+/g, '').toLowerCase(),
+      searchStr: getSearchString(searchStr),
       needSearch: needLocalSearch
     });
     this.suggestionsOrder = suggestionIds;

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 = {