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

package/README.md

@@ -32,9 +32,17 @@ 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
+- 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 +50,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/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
+        }
+      }
     });
   }
 

package/es/Select/Select.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, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -246,12 +248,17 @@ export class SelectComponent extends Component {
     let {
       options,
       valueField,
-      textField
+      textField,
+      customProps
     } = props;
+    let {
+      listItemProps = {}
+    } = customProps;
     return this.formatOptions({
       options,
       valueField,
-      textField
+      textField,
+      listItemProps
     });
   }
 
@@ -693,7 +700,8 @@ export class SelectComponent extends Component {
       i18nKeys,
       htmlId,
       children,
-      iconOnHover
+      iconOnHover,
+      customProps
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -714,6 +722,11 @@ export class SelectComponent extends Component {
     let suggestions = this.handleFilterSuggestions();
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps = {},
+      DropdownSearchTextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
@@ -756,7 +769,10 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "both"
@@ -801,7 +817,8 @@ export class SelectComponent extends Component {
       borderColor: borderColor,
       htmlId: htmlId,
       autoComplete: false,
-      isFocus: isPopupReady
+      isFocus: isPopupReady,
+      customProps: TextBoxProps
     })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
       boxPosition: position || `${defaultDropBoxPosition}Center`,
@@ -834,11 +851,14 @@ export class SelectComponent extends Component {
       onClear: this.handleClearSearch,
       dataId: `${dataId}_search`,
       i18nKeys: TextBoxIcon_i18n,
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: DropdownSearchTextBoxProps
+      }
     }))) : null, /*#__PURE__*/React.createElement(CardContent, {
       customClass: dropBoxSize ? style[dropBoxSize] : '',
       eleRef: this.suggestionContainerRef
-    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
       activeId: selectedId,
       suggestions: suggestions,
       getRef: this.suggestionItemRef,
@@ -856,7 +876,7 @@ export class SelectComponent extends Component {
         ariaParentRole: 'listbox',
         role: 'option'
       }
-    }) : /*#__PURE__*/React.createElement(EmptyState, {
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,
       searchString: searchStr,
@@ -946,7 +966,13 @@ SelectComponent.propTypes = {
   htmlId: PropTypes.string,
   children: PropTypes.node,
   onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  })
 };
 SelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -978,7 +1004,8 @@ SelectComponent.defaultProps = {
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
-  iconOnHover: false
+  iconOnHover: false,
+  customProps: {}
 };
 SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);

package/es/Select/docs/Select__default.docs.js

@@ -37,6 +37,40 @@ let option = [{
   text: 'Pineapple',
   id: '10'
 }];
+let 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'
+}];
 export default class Select__default extends React.Component {
   constructor(props) {
     super(props);
@@ -94,6 +128,51 @@ export default class Select__default extends React.Component {
       searchBoxPlaceHolder: "Search",
       isDefaultSelectValue: false,
       isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Props"), /*#__PURE__*/React.createElement(Select, {
+      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.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
     }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(Select, {
       options: option,
       onChange: this.handleChange,

package/es/TextBox/TextBox.js

@@ -92,7 +92,8 @@ export default class Textbox extends React.PureComponent {
       htmlId,
       a11y,
       customClass,
-      isFocus
+      isFocus,
+      customProps
     } = this.props;
     let {
       ariaLabel,
@@ -162,7 +163,7 @@ export default class Textbox extends React.PureComponent {
       value: value,
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown
-    }, options));
+    }, options, customProps));
   }
 
 }
@@ -182,7 +183,8 @@ Textbox.defaultProps = {
   autoComplete: true,
   borderColor: 'default',
   a11y: {},
-  isFocus: false
+  isFocus: false,
+  customProps: {}
 };
 Textbox.propTypes = {
   autofocus: PropTypes.bool,
@@ -233,7 +235,8 @@ Textbox.propTypes = {
     ariaReadonly: PropTypes.bool,
     ariaMultiselectable: PropTypes.bool
   }),
-  isFocus: PropTypes.bool
+  isFocus: PropTypes.bool,
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/TextBoxIcon/TextBoxIcon.js

@@ -79,7 +79,8 @@ export default class TextBoxIcon extends React.Component {
       customClass,
       iconOnHover,
       isFocus,
-      onClearMouseDown
+      onClearMouseDown,
+      customProps
     } = this.props;
     const {
       isActive
@@ -93,6 +94,9 @@ export default class TextBoxIcon extends React.Component {
     const {
       clearText = 'Clear'
     } = i18nKeys;
+    let {
+      TextBoxProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
@@ -125,7 +129,8 @@ export default class TextBoxIcon extends React.Component {
       onKeyPress: onKeyPress,
       onMouseDown: onMouseDown,
       needBorder: false,
-      customClass: customTextBox
+      customClass: customTextBox,
+      customProps: TextBoxProps
     }))), /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
@@ -169,7 +174,8 @@ TextBoxIcon.defaultProps = {
   i18nKeys: {},
   customClass: {},
   iconOnHover: false,
-  isFocus: false
+  isFocus: false,
+  customProps: {}
 };
 TextBoxIcon.propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
@@ -214,7 +220,10 @@ TextBoxIcon.propTypes = {
   }),
   iconOnHover: PropTypes.bool,
   isFocus: PropTypes.bool,
-  onClearMouseDown: PropTypes.func
+  onClearMouseDown: PropTypes.func,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object
+  })
 };
 
 if (false) {

package/es/utils/dropDownUtils.js

@@ -36,6 +36,8 @@ const getIsStartWithSearch = props => props.isStartsWithSearch;
 
 const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
+const getListItemProps = props => props.listItemProps || '';
+
 export const makeGetMultiSelectFilterSuggestions = () => createSelector([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch], (options, selectedOptions, searchStr, needSearch, isStartsWithSearch) => {
   const suggestions = [];
   const suggestionIds = [];
@@ -100,7 +102,7 @@ export const extractOptionId = id => {
     };
   }
 };
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -114,7 +116,8 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         imageField: impImageField,
         optionType: impOptionType,
         iconName: impIconName,
-        iconSize: impIconSize
+        iconSize: impIconSize,
+        listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : option;
@@ -146,6 +149,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.isDisabled = disabledOptions.indexOf(id) >= 0;
         }
 
+        if (listStyle || listItemProps) {
+          optionDetails.listItemProps = listStyle || listItemProps;
+        }
+
         normalizedFormatOptions[id] = optionDetails;
         normalizedAllOptions[id] = option;
         revampOptions.push(optionDetails);

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."); }
@@ -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/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/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/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/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 = [];
@@ -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-215",
+  "version": "1.0.0-alpha-216",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",