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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/ListItem/ListItemWithAvatar.js

@@ -121,7 +121,10 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           needAvatarTitle = _this$props4.needAvatarTitle,
           avatarPalette = _this$props4.avatarPalette,
           a11y = _this$props4.a11y,
-          customClass = _this$props4.customClass;
+          customClass = _this$props4.customClass,
+          customProps = _this$props4.customProps;
+      var _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customAv = customClass.customAvatar,
@@ -157,7 +160,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         tagName: "li",
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         "data-title": isDisabled ? disableTitle : null
-      }, options), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options, ListItemProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].leftAvatar
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
@@ -212,7 +215,8 @@ ListItemWithAvatar.defaultProps = {
   needBorder: true,
   needAvatarTitle: true,
   a11y: {},
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 ListItemWithAvatar.propTypes = (_ListItemWithAvatar$p = {
   active: _propTypes["default"].bool,
@@ -226,6 +230,8 @@ ListItemWithAvatar.propTypes = (_ListItemWithAvatar$p = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
+})), _defineProperty(_ListItemWithAvatar$p, "customProps", _propTypes["default"].shape({
+  ListItemProps: _propTypes["default"].object
 })), _ListItemWithAvatar$p);
 
 if (false) {

package/lib/ListItem/ListItemWithIcon.js

@@ -110,7 +110,10 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           isDisabled = _this$props4.isDisabled,
           disableTitle = _this$props4.disableTitle,
           a11y = _this$props4.a11y,
-          customClass = _this$props4.customClass;
+          customClass = _this$props4.customClass,
+          customProps = _this$props4.customProps;
+      var _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       var role = a11y.role,
           ariaSelected = a11y.ariaSelected,
           _a11y$ariaHidden = a11y.ariaHidden,
@@ -139,7 +142,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         eleRef: this.getRef,
         tagName: "li",
         "data-title": isDisabled ? disableTitle : null
-      }, options), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options, ListItemProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
         className: _ListItemModule["default"].iconBox,
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
@@ -182,7 +185,8 @@ ListItemWithIcon.defaultProps = {
   value: 'List',
   needBorder: true,
   a11y: {},
-  customClass: ''
+  customClass: '',
+  customProps: {}
 };
 ListItemWithIcon.propTypes = {
   active: _propTypes["default"].bool,
@@ -210,7 +214,10 @@ ListItemWithIcon.propTypes = {
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
   }),
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    ListItemProps: _propTypes["default"].object
+  })
 };
 
 if (false) {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -47,6 +47,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -131,7 +133,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
         selectedOptions: dummyArray,
-        searchStr: searchStr.replace(/\s+/g, '').toLowerCase(),
+        searchStr: (0, _Common.getSearchString)(searchStr),
         needSearch: needLocalSearch
       }),
           suggestions = _this$getFilterSugges.suggestions,
@@ -408,7 +410,12 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           a11y = _this$props5.a11y,
           borderColor = _this$props5.borderColor,
           isBoxPaddingNeed = _this$props5.isBoxPaddingNeed,
-          getFooter = _this$props5.getFooter;
+          getFooter = _this$props5.getFooter,
+          customProps = _this$props5.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
+          _customProps$DropBoxP = customProps.DropBoxProps,
+          DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -492,7 +499,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-delete",
         size: "15"
-      })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+      })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], _extends({
         animationStyle: animationStyle,
         boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
         getRef: getContainerRef,
@@ -507,7 +514,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           role: 'listbox',
           ariaMultiselectable: true
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      }, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         customClass: _AdvancedMultiSelectModule["default"].box,
         onScroll: this.handleScroll
       }, /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
@@ -519,7 +526,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       })), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
         customClass: dropBoxSize ? _AdvancedMultiSelectModule["default"][dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         suggestions: suggestions,
         selectedOptions: allselectedOptionIds,
         getRef: this.suggestionItemRef,
@@ -531,7 +538,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
@@ -623,7 +630,11 @@ AdvancedMultiSelectComponent.propTypes = {
   isBoxPaddingNeed: _propTypes["default"].bool,
   isSearchClearOnSelect: _propTypes["default"].bool,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  getFooter: _propTypes["default"].func
+  getFooter: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    SuggestionsProps: _propTypes["default"].object,
+    DropBoxProps: _propTypes["default"].object
+  })
 };
 AdvancedMultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -650,7 +661,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   a11y: {},
   borderColor: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  customProps: {}
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 var AdvancedMultiSelect = (0, _Popup["default"])(AdvancedMultiSelectComponent);

package/lib/MultiSelect/MultiSelect.js

@@ -335,7 +335,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var _this$getFilterSugges = this.getFilterSuggestions({
         options: options,
         selectedOptions: selectedOptions,
-        searchStr: searchStr.replace(/\s+/g, '').toLowerCase(),
+        searchStr: (0, _Common.getSearchString)(searchStr),
         needSearch: needLocalSearch
       }),
           suggestions = _this$getFilterSugges.suggestions,

package/lib/MultiSelect/Suggestions.js

@@ -23,6 +23,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -94,7 +100,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             icon = suggestion.icon,
             optionType = suggestion.optionType,
             iconSize = suggestion.iconSize,
-            isDisabled = suggestion.isDisabled;
+            isDisabled = suggestion.isDisabled,
+            listItemProps = suggestion.listItemProps;
         var isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
         var isHighlight = hoverOption === index || id === hoverId ? true : false;
         var list_a11y = Object.assign({}, a11y, {
@@ -104,6 +111,12 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           isDisabled: isDisabled
         };
 
+        if (listItemProps) {
+          commonProps.customProps = {
+            'ListItemProps': _objectSpread({}, listItemProps)
+          };
+        }
+
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], _extends({}, commonProps, {
             autoHover: false,
@@ -197,7 +210,8 @@ Suggestions.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     photoURL: _propTypes["default"].string,
     logo: _propTypes["default"].string,
-    optionType: _propTypes["default"].string
+    optionType: _propTypes["default"].string,
+    listItemProps: _propTypes["default"].object
   }))
 };
 Suggestions.defaultProps = {

package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js

@@ -51,10 +51,20 @@ var AdvancedMultiSelect__default = /*#__PURE__*/function (_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'
@@ -132,7 +142,12 @@ var AdvancedMultiSelect__default = /*#__PURE__*/function (_Component) {
           noMoreText: 'No More Options .',
           searchEmptyText: 'No Matches Found .'
         },
-        getFooter: this.getFooter
+        getFooter: this.getFooter,
+        customProps: {
+          SuggestionsProps: {
+            needBorder: false
+          }
+        }
       });
     }
   }]);

package/lib/Select/GroupSelect.js

@@ -283,7 +283,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           allOptionIds = _this$state2.allOptionIds;
 
       if (needSearch && searchStr && searchStr.trim().length) {
-        searchStr = searchStr.toLowerCase().replace(/\s+/g, '');
+        searchStr = (0, _Common.getSearchString)(searchStr);
 
         var _this$getFilterSugges = this.getFilterSuggestions({
           revampedGroups: revampedGroups,
@@ -320,8 +320,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       var _this$state$searchStr = this.state.searchStr,
           searchStr = _this$state$searchStr === void 0 ? '' : _this$state$searchStr;
       var onSearch = this.props.onSearch;
-      var searchStrRegex = searchStr.toLowerCase().replace(/\s+/g, '');
-      var valueStrRegex = value.toLowerCase().replace(/\s+/g, '');
+      var searchStrRegex = (0, _Common.getSearchString)(searchStr);
+      var valueStrRegex = (0, _Common.getSearchString)(value);
       var isSearch = searchStrRegex !== valueStrRegex ? true : false;
       this.setState({
         searchStr: value,

package/lib/Select/Select.js

@@ -43,6 +43,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -292,11 +294,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     value: function handleFormatOptions(props) {
       var options = props.options,
           valueField = props.valueField,
-          textField = props.textField;
+          textField = props.textField,
+          customProps = props.customProps;
+      var _customProps$listItem = customProps.listItemProps,
+          listItemProps = _customProps$listItem === void 0 ? {} : _customProps$listItem;
       return this.formatOptions({
         options: options,
         valueField: valueField,
-        textField: textField
+        textField: textField,
+        listItemProps: listItemProps
       });
     }
   }, {
@@ -729,7 +735,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props11.i18nKeys,
           htmlId = _this$props11.htmlId,
           children = _this$props11.children,
-          iconOnHover = _this$props11.iconOnHover;
+          iconOnHover = _this$props11.iconOnHover,
+          customProps = _this$props11.customProps;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -748,6 +755,12 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+      var _customProps$TextBoxP = customProps.TextBoxProps,
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
+          DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-title": isDisabled ? title : ''
@@ -790,7 +803,10 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         borderColor: borderColor,
         htmlId: htmlId,
         isFocus: isPopupReady,
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: TextBoxProps
+        }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "both"
@@ -835,7 +851,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         borderColor: borderColor,
         htmlId: htmlId,
         autoComplete: false,
-        isFocus: isPopupReady
+        isFocus: isPopupReady,
+        customProps: TextBoxProps
       })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
         animationStyle: animationStyle,
         boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
@@ -868,11 +885,14 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onClear: this.handleClearSearch,
         dataId: "".concat(dataId, "_search"),
         i18nKeys: TextBoxIcon_i18n,
-        autoComplete: false
+        autoComplete: false,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        }
       }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
         customClass: dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
@@ -890,7 +910,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           ariaParentRole: 'listbox',
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,
@@ -984,7 +1004,13 @@ SelectComponent.propTypes = {
   htmlId: _propTypes["default"].string,
   children: _propTypes["default"].node,
   onFocus: _propTypes["default"].func,
-  iconOnHover: _propTypes["default"].bool
+  iconOnHover: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    TextBoxProps: _propTypes["default"].object,
+    DropdownSearchTextBoxProps: _propTypes["default"].object,
+    listItemProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object
+  })
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1016,7 +1042,8 @@ SelectComponent.defaultProps = {
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  customProps: {}
 };
 SelectComponent.displayName = 'Select';
 var Select = (0, _Popup["default"])(SelectComponent);