@zohodesk/components 1.0.0-alpha-214 → 1.0.0-alpha-218

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/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,16 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     value: function handleFormatOptions(props) {
       var options = props.options,
           valueField = props.valueField,
-          textField = props.textField;
+          textField = props.textField,
+          _props$customProps = props.customProps,
+          customProps = _props$customProps === void 0 ? {} : _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 +736,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 +756,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 +804,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 +852,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 +886,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 +911,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 +1005,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 +1043,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,