@zohodesk/components 1.0.0-alpha-213 → 1.0.0-alpha-217

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);

package/lib/Select/docs/Select__default.docs.js

@@ -73,6 +73,40 @@ var option = [{
   text: 'Pineapple',
   id: '10'
 }];
+var customOption = [{
+  text: 'Apple',
+  id: 0,
+  listItemProps: {
+    style: {
+      'color': 'red'
+    }
+  }
+}, {
+  text: 'Banana',
+  id: '1',
+  listItemProps: {
+    style: {
+      'color': 'orange'
+    }
+  }
+}, {
+  text: 'Blackberries',
+  id: '2',
+  listItemProps: {
+    style: {
+      'color': 'blue'
+    }
+  }
+}, {
+  text: 'Guava',
+  id: '3'
+}, {
+  text: 'Grapes',
+  id: '4'
+}, {
+  text: 'Jackfruit',
+  id: '5'
+}];
 
 var Select__default = /*#__PURE__*/function (_React$Component) {
   _inherits(Select__default, _React$Component);
@@ -142,6 +176,51 @@ var Select__default = /*#__PURE__*/function (_React$Component) {
         searchBoxPlaceHolder: "Search",
         isDefaultSelectValue: false,
         isDisabled: true
+      }), /*#__PURE__*/_react["default"].createElement("div", null, "Custom Props"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        options: customOption,
+        onChange: this.handleChange,
+        selectedValue: value,
+        needSearch: true,
+        emptyMessage: "No matches found",
+        placeHolder: "PlaceHolder",
+        searchBoxPlaceHolder: "Search",
+        isDefaultSelectValue: false,
+        i18nKeys: {
+          loadingText: 'Loading',
+          emptyText: 'emptyText',
+          noMoreText: 'noMoreText',
+          searchEmptyText: 'searchEmptyText',
+          TextBoxIcon_i18n: {
+            clearText: 'Clear Data'
+          }
+        },
+        customProps: {
+          listItemProps: {
+            style: {
+              'color': 'green'
+            }
+          },
+          TextBoxProps: {
+            style: {
+              'color': 'brown'
+            }
+          },
+          DropdownSearchTextBoxProps: {
+            style: {
+              'color': 'purple'
+            }
+          }
+        }
+      }), /*#__PURE__*/_react["default"].createElement("div", null, "Disabled"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        options: option,
+        onChange: this.handleChange,
+        selectedValue: value,
+        needSearch: true,
+        emptyMessage: "No matches found",
+        placeHolder: "isDisabled",
+        searchBoxPlaceHolder: "Search",
+        isDefaultSelectValue: false,
+        isDisabled: true
       }), /*#__PURE__*/_react["default"].createElement("div", null, "Readonly"), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         options: option,
         onChange: this.handleChange,

package/lib/Tag/Tag.module.css

@@ -230,6 +230,7 @@
 }
 .dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
+  --tag_text_color: var(--zdt_tag_dark_hover_text);
 }
 .darkTagClose {
   --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);

package/lib/TextBox/TextBox.js

@@ -137,7 +137,8 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props4.htmlId,
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
-          isFocus = _this$props4.isFocus;
+          isFocus = _this$props4.isFocus,
+          customProps = _this$props4.customProps;
       var ariaLabel = a11y.ariaLabel,
           ariaAutocomplete = a11y.ariaAutocomplete,
           ariaControls = a11y.ariaControls,
@@ -204,7 +205,7 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
         value: value,
         onKeyPress: onKeyPress,
         onMouseDown: onMouseDown
-      }, options));
+      }, options, customProps));
     }
   }]);
 
@@ -228,7 +229,8 @@ Textbox.defaultProps = {
   autoComplete: true,
   borderColor: 'default',
   a11y: {},
-  isFocus: false
+  isFocus: false,
+  customProps: {}
 };
 Textbox.propTypes = (_Textbox$propTypes = {
   autofocus: _propTypes["default"].bool,
@@ -275,7 +277,7 @@ Textbox.propTypes = (_Textbox$propTypes = {
   ariaActivedescendant: _propTypes["default"].string,
   ariaReadonly: _propTypes["default"].bool,
   ariaMultiselectable: _propTypes["default"].bool
-})), _defineProperty(_Textbox$propTypes, "isFocus", _propTypes["default"].bool), _Textbox$propTypes);
+})), _defineProperty(_Textbox$propTypes, "isFocus", _propTypes["default"].bool), _defineProperty(_Textbox$propTypes, "customProps", _propTypes["default"].object), _Textbox$propTypes);
 
 if (false) {
   Textbox.docs = {

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -126,7 +126,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props2.customClass,
           iconOnHover = _this$props2.iconOnHover,
           isFocus = _this$props2.isFocus,
-          onClearMouseDown = _this$props2.onClearMouseDown;
+          onClearMouseDown = _this$props2.onClearMouseDown,
+          customProps = _this$props2.customProps;
       var isActive = this.state.isActive;
       var _customClass$customTB = customClass.customTBoxWrap,
           customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
@@ -138,6 +139,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
           customTBoxLine = _customClass$customTB3 === void 0 ? '' : _customClass$customTB3;
       var _i18nKeys$clearText = i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear' : _i18nKeys$clearText;
+      var _customProps$TextBoxP = customProps.TextBoxProps,
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -170,7 +173,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         onKeyPress: onKeyPress,
         onMouseDown: onMouseDown,
         needBorder: false,
-        customClass: customTextBox
+        customClass: customTextBox,
+        customProps: TextBoxProps
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TextBoxIconModule["default"].iconContainer, " ").concat(customTBoxIcon)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -218,7 +222,8 @@ TextBoxIcon.defaultProps = {
   i18nKeys: {},
   customClass: {},
   iconOnHover: false,
-  isFocus: false
+  isFocus: false,
+  customProps: {}
 };
 TextBoxIcon.propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
@@ -263,7 +268,10 @@ TextBoxIcon.propTypes = {
   }),
   iconOnHover: _propTypes["default"].bool,
   isFocus: _propTypes["default"].bool,
-  onClearMouseDown: _propTypes["default"].func
+  onClearMouseDown: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    TextBoxProps: _propTypes["default"].object
+  })
 };
 
 if (false) {

package/lib/utils/Common.js

@@ -453,5 +453,5 @@ function getElementSpace(elementRef) {
 
 function getSearchString() {
   var charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return charachers.toLowerCase(); //.replace(/\s+/g, '');
+  return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
 }

package/lib/utils/dropDownUtils.js

@@ -130,6 +130,10 @@ var getDisabledOptions = function getDisabledOptions(props) {
   return props.disabledOptions || dummyArray;
 };
 
+var getListItemProps = function getListItemProps(props) {
+  return props.listItemProps || '';
+};
+
 var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSuggestions() {
   return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) {
     var suggestions = [];
@@ -138,8 +142,8 @@ var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSugge
       var id = option.id,
           _option$value = option.value,
           value = _option$value === void 0 ? '' : _option$value;
-      var valueString = value.toLowerCase();
-      var searchString = searchStr.toLowerCase();
+      var valueString = (0, _Common.getSearchString)(value);
+      var searchString = (0, _Common.getSearchString)(searchStr);
       var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
 
       if (selectedOptions.indexOf(id) === -1 && isMatch) {
@@ -210,7 +214,7 @@ var extractOptionId = function extractOptionId(id) {
 exports.extractOptionId = extractOptionId;
 
 var makeFormatOptions = function makeFormatOptions() {
-  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions) {
+  return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) {
     var revampOptions = [];
     var remvampOptionIds = [];
     var normalizedAllOptions = {};
@@ -223,7 +227,8 @@ var makeFormatOptions = function makeFormatOptions() {
             impImageField = option.imageField,
             impOptionType = option.optionType,
             impIconName = option.iconName,
-            impIconSize = option.iconSize;
+            impIconSize = option.iconSize,
+            listStyle = option.listItemProps;
         var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : option;
         var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
@@ -254,6 +259,10 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.isDisabled = disabledOptions.indexOf(id) >= 0;
           }
 
+          if (listStyle || listItemProps) {
+            optionDetails.listItemProps = listStyle || listItemProps;
+          }
+
           normalizedFormatOptions[id] = optionDetails;
           normalizedAllOptions[id] = option;
           revampOptions.push(optionDetails);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-213",
+  "version": "1.0.0-alpha-217",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",