@zohodesk/components 1.4.8 → 1.4.10-exp-0

package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -18,3 +18,346 @@ exports[`Suggestions rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Suggestions rendering with limit props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="text2"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text2"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text2"
+        data-title="text2"
+        role="option"
+        style="color: red;"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text3"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text3"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text3"
+        data-title="text3"
+        role="option"
+        style="color: blue;"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text3
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text4"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text4"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text4"
+        data-title="text4"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text4
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text5"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text5"
+        data-selector-id="listItem"
+        data-test-id="text5"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text5
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text6"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text6"
+        data-selector-id="listItem"
+        data-test-id="text6"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text6
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text7"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text7"
+        data-selector-id="listItem"
+        data-test-id="text7"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text7
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text8"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text8"
+        data-selector-id="listItem"
+        data-test-id="text8"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text8
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text9"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text9"
+        data-selector-id="listItem"
+        data-test-id="text9"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text9
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text10"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text10"
+        data-selector-id="listItem"
+        data-test-id="text10"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <div
+          class="leftBox grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="titleBox shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="value basisAuto shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              text10
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/MultiSelect/constants.js

@@ -0,0 +1,6 @@
+export const MULTISELECT_I18N_KEYS = {
+  limitReachedMessage: 'Limit reached',
+  searchText: 'Searching...',
+  clearText: 'Clear all',
+  loadingText: 'Loading'
+};

package/es/MultiSelect/props/defaultProps.js

@@ -86,6 +86,7 @@ export const MultiSelect_defaultProps = {
   autoComplete: getLibraryConfig('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isAnimate: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,
@@ -167,5 +168,6 @@ export const SelectedOptions_defaultProps = {
 };
 export const Suggestions_defaultProps = {
   a11y: {},
+  isVirtualizerEnabled: false,
   needMultiLineText: false
 };

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
@@ -116,7 +119,8 @@ export const MultiSelect_propTypes = {
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
-  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  limit: PropTypes.number
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -153,7 +157,8 @@ export const SelectedOptions_propTypes = {
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
   palette: PropTypes.string,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  limit: PropTypes.number
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({
@@ -164,6 +169,8 @@ export const Suggestions_propTypes = {
   avatarPalette: PropTypes.string,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  isVirtualizerEnabled: PropTypes.bool,
+  setVirtualizerContainerRefFunction: PropTypes.func,
   getRef: PropTypes.func,
   hoverId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   hoverOption: PropTypes.number,
@@ -183,7 +190,9 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  }))
+  })),
+  limit: PropTypes.number,
+  limitReachedMessage: PropTypes.string
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -201,7 +210,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
@@ -255,7 +265,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,
@@ -269,68 +280,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/Select.js

@@ -18,7 +18,7 @@ import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
+import { dummyObj, makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetSelectedValueText as makeGetSelectedValue } from "../utils/dropDownUtils";
 import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, getKeyValue } from "../utils/Common.js";
 /**** CSS ****/
 
@@ -106,6 +106,7 @@ export class SelectComponent extends Component {
     this.handleAddNewOption = this.handleAddNewOption.bind(this);
     this.handleExposePopupHandlers = this.handleExposePopupHandlers.bind(this);
     this.handleGetAddNewOptionText = this.handleGetAddNewOptionText.bind(this);
+    this.setSuggestionsVirtualizerContainerRefFunction = this.setSuggestionsVirtualizerContainerRefFunction.bind(this);
     this.valueInputTypeString = '';
     this.valueInputSearchString = '';
     this.autoSelectSuggestions = [];
@@ -251,10 +252,10 @@ export class SelectComponent extends Component {
       valueField,
       textField,
       allowValueFallback,
-      customProps = {}
+      customProps = dummyObj
     } = props;
     let {
-      listItemProps = {}
+      listItemProps = dummyObj
     } = customProps;
     return this.formatOptions({
       options,
@@ -529,6 +530,7 @@ export class SelectComponent extends Component {
 
   suggestionContainerRef(el) {
     this.suggestionContainer = el;
+    typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
   }
 
   suggestionItemRef(el, index, id) {
@@ -676,6 +678,11 @@ export class SelectComponent extends Component {
     });
   }
 
+  setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+    this.setSuggestionsVirtualizerRef = refFunc;
+    this.suggestionContainer && refFunc(this.suggestionContainer);
+  }
+
   render() {
     let {
       needSearch,
@@ -728,6 +735,7 @@ export class SelectComponent extends Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
+      isVirtualizerEnabled,
       renderCustomToggleIndicator,
       renderCustomSearchClearComponent
     } = this.props;
@@ -932,6 +940,8 @@ export class SelectComponent extends Component {
         eleRef: this.suggestionContainerRef
       }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         activeId: selectedId,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverIndex,

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;

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

@@ -246,14 +246,22 @@ describe('Select -', () => {
     userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '2');
     expect(getAllByRole(listItemRole)).toHaveLength(1);
     expect(asFragment()).toMatchSnapshot();
-  }); // test('Should render the only options matching search value even with additional spaces before and after', () => {
-  //   const { getByRole, getAllByRole, asFragment, getByTestId } = render(<Select needSearch options={options} />);
-  //   userEvent.click(getByRole(selectInputRole));
-  //   userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '  2  ');
-  //   expect(getAllByRole(listItemRole)).toHaveLength(1);
-  //   expect(asFragment()).toMatchSnapshot();
-  // });
-
+  });
+  test('Should render the only options matching search value even with additional spaces before and after', () => {
+    const {
+      getByRole,
+      getAllByRole,
+      asFragment,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Select, {
+      needSearch: true,
+      options: options
+    }));
+    userEvent.click(getByRole(selectInputRole));
+    userEvent.type(within(getByTestId(dropboxTestId)).getByRole('textbox'), '  2  ');
+    expect(getAllByRole(listItemRole)).toHaveLength(1);
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('Should trigger given onSearch, when type on the search input', async () => {
     const mockOnSearch = jest.fn();
     const {