@zohodesk/components 1.0.0-temp-199.14 → 1.0.0-temp-222

package/lib/MultiSelect/Suggestions.js

@@ -21,6 +21,8 @@ var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWith
 
 var _Layout = require("../Layout");
 
+var _ListContainer = _interopRequireDefault(require("../ListItem/ListContainer"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -84,19 +86,15 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
-          customClass = _this$props.customClass,
-          needMultiLineText = _this$props.needMultiLineText;
+          secondaryField = _this$props.secondaryField;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
-      var _customClass$containe = customClass.containerClass,
-          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable,
-        className: containerClass
+        "aria-multiselectable": ariaMultiselectable
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''
@@ -120,15 +118,40 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         var commonProps = _objectSpread({
-          isDisabled: isDisabled,
-          needMultiLineText: needMultiLineText
+          isDisabled: isDisabled
         }, listItemCustomProps);
 
         if (listItemProps) {
           commonProps.customProps = {
             ListItemProps: _objectSpread({}, listItemProps)
           };
-        }
+        } // if(secondaryField) {
+        //   return (
+        //     <ListContainer
+        //       active={isActive}
+        //       iconSize={iconSize}
+        //       size={listItemSize}
+        //       palette={palette}
+        //       a11y={list_a11y}
+        //       highlight={isHighlight}
+        //       isDisabled={isDisabled}
+        //       autoHover
+        //       needTick={needTick}
+        //       needBorder={needBorder}
+        //       onClick={onClick}
+        //       onMouseEnter={onMouseEnter}
+        //       eleRef={getRef}
+        //       key={`${id}avatarListItem`}
+        //     >
+        //       <Box flexible>
+        //         <div>{value}</div>
+        //         <div>{suggestion[secondaryField]}</div>
+        //       </Box>
+        //     </ListContainer>
+        //   )
+        // }
+        // else
+
 
         if (optionType === 'avatar') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], _extends({}, commonProps, {
@@ -149,7 +172,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            secondaryValue: suggestion[secondaryField] || undefined
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -169,7 +193,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            secondaryValue: suggestion[secondaryField] || undefined
           }));
         }
 

package/lib/MultiSelect/props/defaultProps.js

@@ -46,7 +46,6 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -182,8 +181,6 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {},
-  customClass: {},
-  needMultiLineText: false
+  a11y: {}
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -65,6 +65,8 @@ var MultiSelect_propTypes = {
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
   }),
+  secondaryField: _propTypes["default"].string,
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
   isAnimate: _propTypes["default"].bool,
   isBoxPaddingNeed: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
@@ -129,8 +131,7 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool
@@ -196,6 +197,7 @@ var Suggestions_propTypes = {
   palette: _propTypes["default"].string,
   selectedOptions: _propTypes["default"].array,
   htmlId: _propTypes["default"].string,
+  secondaryField: _propTypes["default"].string,
   suggestions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
@@ -203,11 +205,7 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  })),
-  customClass: _propTypes["default"].shape({
-    containerClass: _propTypes["default"].string
-  }),
-  needMultiLineText: _propTypes["default"].bool
+  }))
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
@@ -278,9 +276,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
-  SuggestionsProps: _propTypes["default"].object
-})), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -312,6 +308,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
   needEffect: _propTypes["default"].bool,
+  secondaryField: _propTypes["default"].string,
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
   animationStyle: _propTypes["default"].string,
   defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),

package/lib/Select/GroupSelect.js

@@ -670,8 +670,6 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isLoading = _this$props9.isLoading,
           dataSelectorId = _this$props9.dataSelectorId,
           customProps = _this$props9.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -848,7 +846,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             activeId: selectedId,
             suggestions: options,
             getRef: _this7.suggestionItemRef,
@@ -864,7 +862,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }, SuggestionsProps)));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/Select/SelectWithAvatar.js

@@ -51,8 +51,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } }
@@ -217,10 +215,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          getTargetRef = _this$props.getTargetRef,
-          customProps = _this$props.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -359,7 +354,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
           dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
@@ -376,7 +371,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -440,9 +440,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -575,7 +573,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
             key: options[idKey],
             value: options[valueKey],
             size: "medium",
@@ -599,7 +597,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          }, ListItemProps));
+          });
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -112,8 +112,7 @@ var SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {

package/lib/Select/props/propTypes.js

@@ -195,8 +195,7 @@ var GroupSelect_propTypes = {
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   allowValueFallback: _propTypes["default"].bool
 };
@@ -261,10 +260,7 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    SuggestionsProps: _propTypes["default"].object
-  })
+  dataSelectorId: _propTypes["default"].string
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -328,8 +324,7 @@ var SelectWithIcon_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/common/common.module.css

@@ -260,6 +260,12 @@
   justify-content: space-between;
 }
 
+.justifyFStart {
+  -webkit-box-pack: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+}
+
 .justifyFend {
   -webkit-box-pack: flex-end;
   -ms-flex-pack: flex-end;
@@ -493,7 +499,6 @@
   display: -webkit-box;
   overflow: hidden;
 }
-
 .lineClamp {
   composes: wbreak clamp;
   -webkit-line-clamp: var(--line-clamp,3);

package/lib/utils/dropDownUtils.js

@@ -142,25 +142,35 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var getSearchFields = function getSearchFields(props) {
+  return props.searchFields || ['value'];
+};
+
+var isExistInSearch = function isExistInSearch() {
+  var searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var option = arguments.length > 2 ? arguments[2] : undefined;
+  var matchedFields = searchFields.filter(function (element) {
+    return (0, _Common.getSearchString)(option[element]).indexOf(searchStr) !== -1;
+  });
+  return matchedFields.length !== 0;
+};
+
 var getAllowValueFallback = function getAllowValueFallback(props) {
   return props.allowValueFallback !== false;
 };
 
 var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSuggestions() {
-  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) {
+  return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions, getSearchFields], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions, searchFields) {
     var suggestions = [];
     var suggestionIds = [];
     options.forEach(function (option) {
-      var id = option.id,
-          _option$value = option.value,
-          value = _option$value === void 0 ? '' : _option$value;
-      var valueString = (0, _Common.getSearchString)(value);
       var searchString = (0, _Common.getSearchString)(searchStr);
-      var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : valueString.indexOf(searchString) !== -1 : true;
+      var isMatch = needSearch ? isStartsWithSearch ? valueString.startsWith(searchString) : isExistInSearch(searchFields, searchString, option) : true;
 
-      if (selectedOptions.indexOf(id) === -1 && isMatch || keepSelectedOptions) {
+      if (selectedOptions.indexOf(option.id) === -1 && isMatch || keepSelectedOptions) {
         suggestions.push(option);
-        suggestionIds.push(id);
+        suggestionIds.push(option.id);
       }
     });
     return {
@@ -255,11 +265,12 @@ var makeFormatOptions = function makeFormatOptions() {
 
         if (remvampOptionIds.indexOf(id) === -1 && !(0, _Common.getIsEmptyValue)(id) && !(0, _Common.getIsEmptyValue)(value)) {
           remvampOptionIds.push(id);
-          var optionDetails = {
+
+          var optionDetails = _objectSpread(_objectSpread({}, option), {}, {
             id: id,
             value: value,
             optionType: impOptionType || optionType
-          };
+          });
 
           if (imageField) {
             optionDetails.photoURL = photoURL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-199.14",
+  "version": "1.0.0-temp-222",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review",
+    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.3.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.72",
+    "@zohodesk/icons": "1.0.73",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.72",
+    "@zohodesk/icons": "1.0.73",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",