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

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-214",
+  "version": "1.0.0-alpha-218",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",