@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/es/MultiSelect/props/propTypes.js

@@ -31,17 +31,20 @@ export const MultiSelect_propTypes = {
   disableAction: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string.isRequired,
+  isVirtualizerEnabled: PropTypes.bool,
   getContainerRef: PropTypes.func,
   getNextOptions: PropTypes.func,
   getPublicMethods: PropTypes.func,
   getRef: PropTypes.func,
   getTargetRef: PropTypes.func,
   i18nKeys: PropTypes.shape({
+    searchText: PropTypes.string,
     clearText: PropTypes.string,
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
     noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
+    searchEmptyText: PropTypes.string,
+    limitReachedMessage: PropTypes.string
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
@@ -117,7 +120,7 @@ export const MultiSelect_propTypes = {
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  limit: PropTypes.number
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -155,10 +158,7 @@ export const SelectedOptions_propTypes = {
   size: PropTypes.oneOf(['medium', 'xmedium']),
   palette: PropTypes.string,
   dataId: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  renderCustomSelectedValue: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  limit: PropTypes.number
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({
@@ -169,6 +169,9 @@ export const Suggestions_propTypes = {
   avatarPalette: PropTypes.string,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  isVirtualizerEnabled: PropTypes.bool,
+  setVirtualizerContainerRefFunction: PropTypes.func,
+  getVirtualizerPublicMethods: PropTypes.func,
   getRef: PropTypes.func,
   hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   hoverOption: PropTypes.number,
@@ -189,7 +192,8 @@ export const Suggestions_propTypes = {
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
   })),
-  renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  limit: PropTypes.number,
+  limitReachedMessage: PropTypes.string
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -207,7 +211,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
     noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
+    searchEmptyText: PropTypes.string,
+    limitReachedMessage: PropTypes.string
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
@@ -261,7 +266,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   children: PropTypes.node,
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
-  allowValueFallback: PropTypes.bool
+  allowValueFallback: PropTypes.bool,
+  limit: PropTypes.number
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,
@@ -275,68 +281,20 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
   selectedOptionsLimit: PropTypes.number,
   getSelectedOptionDetails: PropTypes.func,
-  emptyMessage: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  searchEmptyMessage: PropTypes.string,
-  placeHolder: PropTypes.string,
-  selectAllText: PropTypes.string,
-  textField: PropTypes.string,
-  valueField: PropTypes.string,
   imageField: PropTypes.string,
   iconName: PropTypes.string,
   prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  needEffect: PropTypes.bool,
   secondaryField: PropTypes.string,
-  animationStyle: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  isAnimate: PropTypes.bool,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  variant: PropTypes.string,
   dataIdClearIcon: PropTypes.string,
   dataIdLoading: PropTypes.string,
   dataIdMultiSelectComp: PropTypes.string,
   dataIdSelectAllEle: PropTypes.string,
-
-  /**** Popup Props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
   listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  needBorder: PropTypes.bool,
-  htmlId: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string,
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: PropTypes.bool,
-  isSearchClearOnSelect: PropTypes.bool,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customClass: PropTypes.object,
-  isFocus: PropTypes.bool
+  customClass: PropTypes.object
 };

package/es/Select/GroupSelect.js

@@ -622,7 +622,8 @@ export class GroupSelectComponent extends PureComponent {
     let ariaErrorId = this.getNextAriaId();
     let {
       TextBoxIconProps = {},
-      TextBoxProps = {}
+      TextBoxProps = {},
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -791,7 +792,8 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...SuggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.js

@@ -16,11 +16,10 @@ import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import InputFieldLine from "../shared/InputFieldLine/InputFieldLine.js";
 /**** Methods ****/
 
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
-import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue, DUMMY_OBJECT } from "../utils/Common.js";
+import { dummyObj, makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
+import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } from "../utils/Common.js";
 /**** CSS ****/
 
 import style from "./Select.module.css";
@@ -72,7 +71,6 @@ export class SelectComponent extends Component {
 
     this.state = {
       selected,
-      selectedValueDetails,
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       hoverIndex,
@@ -108,6 +106,8 @@ export class SelectComponent extends Component {
     this.handleAddNewOption = this.handleAddNewOption.bind(this);
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
+    this.getVirtualizerPublicMethods = this.getVirtualizerPublicMethods.bind(this);
+    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
     this.valueInputTypeString = '';
     this.valueInputSearchString = '';
     this.autoSelectSuggestions = [];
@@ -169,18 +169,13 @@ export class SelectComponent extends Component {
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       selected,
-      selectedValueDetails,
       hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
       selectedId,
       selectedValueIndex: hoverIndex
     });
   }
 
-  componentDidUpdate(prevProps) {
-    let {
-      suggestionContainer,
-      optionsOrder
-    } = this;
+  componentDidUpdate(prevProps, prevState) {
     let {
       hoverIndex,
       searchStr,
@@ -193,15 +188,31 @@ export class SelectComponent extends Component {
       needSearch,
       onSearch,
       isPopupOpen,
-      isSearchClearOnClose
+      isSearchClearOnClose,
+      isVirtualizerEnabled
     } = this.props;
-    let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-    let selSuggestion = this[`suggestion_${hoverId}`];
-    isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+
+    if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+      let position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
+      this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
+    } else {
+      let {
+        suggestionContainer,
+        optionsOrder
+      } = this;
+      let hoverId = getIsEmptyValue(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+      let selSuggestion = this[`suggestion_${hoverId}`];
+      isPopupOpen && scrollTo(suggestionContainer, selSuggestion);
+    }
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
+        }
+
         setTimeout(() => {
           this.searchInput && this.searchInput.focus({
             preventScroll: true
@@ -254,15 +265,19 @@ export class SelectComponent extends Component {
       valueField,
       textField,
       allowValueFallback,
-      customProps = {}
+      customProps = dummyObj,
+      searchFields,
+      secondaryField
     } = props;
     let {
-      listItemProps = {}
+      listItemProps = dummyObj
     } = customProps;
     return this.formatOptions({
       options,
       valueField,
       textField,
+      secondaryField,
+      searchFields,
       listItemProps,
       allowValueFallback
     });
@@ -432,6 +447,7 @@ export class SelectComponent extends Component {
   handleFilterSuggestions() {
     let {
       needLocalSearch,
+      searchFields,
       excludeOptions = dummyArray // needSearch
 
     } = this.props;
@@ -451,6 +467,7 @@ export class SelectComponent extends Component {
       options,
       selectedOptions: excludeOptions,
       searchStr,
+      searchFields,
       needSearch: needLocalSearch
     });
     this.optionsOrder = suggestionIds;
@@ -532,6 +549,7 @@ export class SelectComponent extends Component {
 
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
+    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
   }
 
   suggestionItemRef(el, index, id) {
@@ -679,6 +697,15 @@ export class SelectComponent extends Component {
     });
   }
 
+  getVirtualizerPublicMethods(methods) {
+    this.virtualizerMethods = methods;
+  }
+
+  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+    this.setSuggestionsVirtualizerRef = refFunc;
+    this.suggestionContainer && refFunc(this.suggestionContainer);
+  }
+
   render() {
     let {
       needSearch,
@@ -731,9 +758,9 @@ export class SelectComponent extends Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
+      isVirtualizerEnabled,
       renderCustomToggleIndicator,
-      renderCustomSearchClearComponent,
-      renderCustomSelectedValue
+      renderCustomSearchClearComponent
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -746,7 +773,6 @@ export class SelectComponent extends Component {
     let {
       hoverIndex,
       selected,
-      selectedValueDetails,
       searchStr,
       isFetchingOptions,
       selectedId,
@@ -771,31 +797,7 @@ export class SelectComponent extends Component {
       ref: getTargetRef,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
-    }, renderCustomSelectedValue ? /*#__PURE__*/React.createElement(InputFieldLine, {
-      isActive: isPopupReady,
-      border: needBorder ? 'bottom' : 'none',
-      size: size,
-      borderColor: borderColor,
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      hasPadding: true
-    }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
-      isDisabled,
-      isPopupOpen,
-      isReadOnly,
-      isActive: isPopupReady,
-      size,
-      option: selectedValueDetails[selectedId] || {},
-      selectedId,
-      placeHolder,
-      htmlId,
-      maxLength,
-      ref: this.valueInputRef,
-      onFocus: this.handleSelectFocus,
-      onKeyDown: this.handleKeyDown,
-      onKeyPress: this.handleValueInputChange,
-      ariaControlsId: setAriaId
-    }) : renderCustomSelectedValue) : needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
+    }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
         role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
@@ -960,7 +962,11 @@ export class SelectComponent extends Component {
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+        key: searchStr.trim(),
         activeId: selectedId,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverIndex,

package/es/Select/SelectWithAvatar.js

@@ -41,6 +41,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
+      secondaryField,
       allowValueFallback
     } = props;
     return this.formatOptions({
@@ -48,6 +49,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
+      secondaryField,
       optionType: 'avatar',
       allowValueFallback
     });
@@ -165,6 +167,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
+      customProps,
       getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
@@ -187,6 +190,11 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = this.normalizedFormatOptions[selectedId] || {};
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
+    let {
+      TextBoxProps,
+      DropdownSearchTextBoxProps,
+      SuggestionsProps
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -246,7 +254,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       isClickable: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false
+      autoComplete: false,
+      ...TextBoxProps
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -295,7 +304,8 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaControls: setAriaId,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false
+        autoComplete: false,
+        ...DropdownSearchTextBoxProps
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -323,7 +333,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
+        },
+        ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -193,7 +193,7 @@ class SelectWithIcon extends Component {
     } = this.props;
 
     if (options.length) {
-      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
+      datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim()));
     }
 
     return datas;
@@ -328,6 +328,7 @@ class SelectWithIcon extends Component {
       targetOffset,
       isRestrictScroll,
       valueKey,
+      secondaryValueKey,
       idKey,
       needListBorder,
       needTick,
@@ -367,7 +368,8 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      ListItemProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -510,6 +512,7 @@ class SelectWithIcon extends Component {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, {
           key: options[idKey],
           value: options[valueKey],
+          secondaryValue: options[secondaryValueKey],
           size: "medium",
           onClick: this.handleChange,
           id: options[idKey],
@@ -530,7 +533,8 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          }
+          },
+          ...ListItemProps
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/__tests__/Select.spec.js

@@ -1150,14 +1150,4 @@ describe('Select dataId snapshot - ', () => {
     userEvent.click(getByRole(selectInputRole));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should render with renderCustomSelectedValue', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Select, {
-      options: options,
-      selectedValue: "Option 2",
-      renderCustomSelectedValue: () => /*#__PURE__*/React.createElement("div", null, " Select Custom Option 2")
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -14,10 +14,10 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-        data-id="GroupSelect_textBox"
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="GroupSelect_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -80,6 +80,9 @@ exports[`GroupSelect rendering the defult props 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>