@zohodesk/components 1.4.7 → 1.4.9

package/es/MultiSelect/props/propTypes.js

@@ -37,11 +37,13 @@ export const MultiSelect_propTypes = {
   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 +118,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 +156,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({
@@ -183,7 +187,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 +207,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 +262,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 +277,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/Popup/Popup.js

@@ -161,7 +161,11 @@ const Popup = function (Component) {
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
       this.rootElement = Registry.getRootElement();
-      this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
+      this.popupObserver = new ResizeObserver(this.handlePopupResize);
+      this.cancelRaf = this.cancelRaf.bind(this);
+      this.cancelPendingAnimationFrames = this.cancelPendingAnimationFrames.bind(this);
+      this.setPositionRafId = null;
+      this.resizePositionRafId = null; //dropBoxSize
 
       this.size = null;
       this.isTargetElementVisible = false;
@@ -181,17 +185,18 @@ const Popup = function (Component) {
       groupPopups.push(this);
       Registry.popups[group] = groupPopups;
 
-      if (Object.keys(Registry.popups).length === 1 && groupPopups.length === 1) {
-        this.updateListeners(true, CLICK_EVENTS, document);
-        document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
+      if (Object.keys(Registry.popups).length === 1 && groupPopups.length === 1 && Registry.listenerPopupRef === undefined) {
+        Registry.listenerPopupRef = this;
+        Registry.listenerPopupRef.updateListeners(true, CLICK_EVENTS, document);
+        document.addEventListener('keyup', Registry.listenerPopupRef.documentKeyupHandler, false); // document.addEventListener('scroll', Registry.listenerPopupRef.handleScroll, true);
 
-        window.addEventListener('resize', this.handleResize);
-        document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
-        document.addEventListener('focus', this.handleDocumentFocus, true);
+        window.addEventListener('resize', Registry.listenerPopupRef.handleResize);
+        document.addEventListener('mousedown', Registry.listenerPopupRef.handleDocumentMouseDown, true);
+        document.addEventListener('focus', Registry.listenerPopupRef.handleDocumentFocus, true);
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const {
         isPopupOpen
       } = this.state;
@@ -256,6 +261,20 @@ const Popup = function (Component) {
       }
     }
 
+    cancelRaf(refName) {
+      const id = this[refName];
+
+      if (id) {
+        cancelAnimationFrame(id);
+        this[refName] = null;
+      }
+    }
+
+    cancelPendingAnimationFrames() {
+      this.cancelRaf('setPositionRafId');
+      this.cancelRaf('resizePositionRafId');
+    }
+
     componentWillUnmount() {
       const group = this.getGroup();
       Registry.popups = Object.keys(Registry.popups).reduce((res, groupName) => {
@@ -284,14 +303,17 @@ const Popup = function (Component) {
         this.popupObserver.disconnect();
       }
 
-      if (noPopups) {
-        this.updateListeners(false, CLICK_EVENTS, document);
-        document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
+      if (noPopups && Registry.listenerPopupRef !== undefined) {
+        Registry.listenerPopupRef.updateListeners(false, CLICK_EVENTS, document);
+        document.removeEventListener('keyup', Registry.listenerPopupRef.documentKeyupHandler); // document.removeEventListener('scroll', Registry.listenerPopupRef.handleScroll);
 
-        window.removeEventListener('resize', this.handleResize);
-        document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
-        document.removeEventListener('focus', this.handleDocumentFocus, true);
+        window.removeEventListener('resize', Registry.listenerPopupRef.handleResize);
+        document.removeEventListener('mousedown', Registry.listenerPopupRef.handleDocumentMouseDown, true);
+        document.removeEventListener('focus', Registry.listenerPopupRef.handleDocumentFocus, true);
+        Registry.listenerPopupRef = undefined;
       }
+
+      this.cancelPendingAnimationFrames();
     }
 
     handleAddingScrollBlock() {
@@ -814,7 +836,8 @@ const Popup = function (Component) {
       }
 
       const setPosition = () => {
-        requestAnimationFrame(() => {
+        this.cancelRaf('setPositionRafId');
+        this.setPositionRafId = requestAnimationFrame(() => {
           const {
             placeHolderElement,
             dropElement
@@ -823,7 +846,7 @@ const Popup = function (Component) {
             position,
             isPopupReady
           } = this.state;
-          const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
+          const scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
           const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
             needArrow,
             isAbsolute,
@@ -852,6 +875,8 @@ const Popup = function (Component) {
               this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
             }
           }
+
+          this.setPositionRafId = null;
         });
       };
 
@@ -883,7 +908,8 @@ const Popup = function (Component) {
 
             if (placeHolderElement && dropElement) {
               const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
-              requestAnimationFrame(() => {
+              this.cancelRaf('resizePositionRafId');
+              this.resizePositionRafId = requestAnimationFrame(() => {
                 const needArrow = this.getNeedArrow(popup);
                 const isAbsolute = this.getIsAbsolutePopup(popup);
                 const customOrder = this.getCustomPositionOrder(popup);
@@ -940,6 +966,8 @@ const Popup = function (Component) {
                 //   });
                 // }
 
+
+                this.resizePositionRafId = null;
               });
             }
           }

package/es/Popup/Registry.js

@@ -2,6 +2,7 @@ import { getLibraryConfig } from "../Provider/Config.js";
 const Registry = {
   lastOpenedGroup: [],
   popups: {},
+  listenerPopupRef: undefined,
   scrollBlockedListenerPopupRef: undefined,
   scrollableListenerPopupRef: undefined,
 

package/es/Select/Select.js

@@ -119,7 +119,7 @@ export class SelectComponent extends Component {
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let {
       selectedValue,
       isDefaultSelectValue,

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

@@ -246,7 +246,14 @@ 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 trigger given onSearch, when type on the search input', async () => {
     const mockOnSearch = jest.fn();
     const {

package/es/utils/dropDownUtils.js

@@ -7,6 +7,8 @@ export const getOptions = props => props.options || dummyArray;
 
 const getOptionsOrder = props => props.optionsOrder || dummyArray;
 
+const getLimit = props => props.limit || 0;
+
 const getSelectedOptionsSel = props => props.selectedOptions || dummyArray;
 
 const getSearchStr = props => props.searchStr || '';
@@ -206,10 +208,10 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
     optionsOrder: remvampOptionIds
   };
 });
-export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) => {
-  const output = [];
-  const revampSelectedOptions = [];
-  const normalizedSelectedOptions = {};
+export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback, getLimit], (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback, limit) => {
+  let output = [];
+  let revampSelectedOptions = [];
+  let normalizedSelectedOptions = {};
   selectedOptionsLength = !getIsEmptyValue(selectedOptionsLength) ? selectedOptionsLength : selectedOptions.length;
 
   for (let i = 0; i < selectedOptionsLength; i++) {
@@ -234,6 +236,12 @@ export const makeGetMultiSelectSelectedOptions = () => createSelector([getSelect
     }
   }
 
+  if (limit && limit > 0) {
+    output = output.slice(0, limit);
+    revampSelectedOptions = revampSelectedOptions.slice(0, limit);
+    normalizedSelectedOptions = Object.fromEntries(Object.entries(normalizedSelectedOptions).slice(0, limit));
+  }
+
   return {
     formatSelectedOptions: output,
     normalizedSelectedOptions,
@@ -423,7 +431,8 @@ export const filterSelectedOptions = function () {
   let {
     selectedOptions = dummyArray,
     propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray
+    disabledOptions = dummyArray,
+    limit
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
@@ -445,8 +454,18 @@ export const filterSelectedOptions = function () {
 
     return true;
   });
+  const totalSelectedOptions = [...oldValidSelectedOptions, ...newlyAddedOptions];
+
+  if (limit && limit > 0) {
+    if (totalSelectedOptions.length > limit) {
+      return {
+        newSelectedOptions: totalSelectedOptions.slice(0, limit)
+      };
+    }
+  }
+
   return {
-    newSelectedOptions: [...oldValidSelectedOptions, ...newlyAddedOptions]
+    newSelectedOptions: totalSelectedOptions
   };
 };
 export const makeGetIsShowClearIcon = () => createSelector([getSelectedOptionsSel, getDisabledOptions], (selectedOptions, disabledOptions) => {

package/es/v1/Popup/Popup.js

@@ -120,7 +120,7 @@ const Popup = function (Component) {
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const {
         isPopupOpen
       } = this.state;

package/es/v1/Select/Select.js

@@ -119,7 +119,7 @@ export class SelectComponent extends Component {
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let {
       selectedValue,
       isDefaultSelectValue,

package/lib/Accordion/Accordion.js

@@ -69,8 +69,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
       });
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
         this.setState({
           selectedItem: nextProps.selectedItem

package/lib/Card/Card.js

@@ -184,8 +184,8 @@ var Card = /*#__PURE__*/function (_Component3) {
   }
 
   _createClass(Card, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.from !== nextProps.from) {
         this.from = nextProps.from;
       }