@zohodesk/components 1.4.7 → 1.4.8

package/README.md

@@ -2,15 +2,22 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.8
+
+- Added UNSAFE_ prefix to deprecated lifecycle methods: componentWillMount, componentWillReceiveProps, and componentWillUpdate.
+
+- **Popup**
+  - Handled potential memory leaks by `event listeners`.
+  - Added unmount handling for `requestAnimationFrame` to ensure proper cleanup.
+
+
 # 1.4.7
 
-- **Card**
-  - Added support for reverse infinite scroll with `isRecentOnBottom`.
+- **Card** - Added support for reverse infinite scroll with `isRecentOnBottom`.
 
 # 1.4.6
 
-- **Popup**
-  - - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
+- **Popup** -  Added fixed popup scroll block behavior support to iframe elements (same-origin only).
 
 # 1.4.5
 

package/es/Accordion/Accordion.js

@@ -25,7 +25,7 @@ export default class Accordion extends React.Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
       this.setState({
         selectedItem: nextProps.selectedItem

package/es/Card/Card.js

@@ -102,7 +102,7 @@ export default class Card extends Component {
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.from !== nextProps.from) {
       this.from = nextProps.from;
     }

package/es/MultiSelect/MultiSelect.js

@@ -89,7 +89,7 @@ export class MultiSelectComponent extends React.Component {
     //   suggestionContainer.addEventListener('scroll', this.handleScroll);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {
       selectedOptions,
       options,

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/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;
       }

package/lib/MultiSelect/MultiSelect.js

@@ -172,8 +172,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       //   suggestionContainer.addEventListener('scroll', this.handleScroll);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var _this2 = this;
 
       var selectedOptions = nextProps.selectedOptions,

package/lib/Popup/Popup.js

@@ -236,7 +236,11 @@ var Popup = function Popup(Component) {
       _this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
       _this.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.rootElement = _Registry["default"].getRootElement();
-      _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
+      _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize);
+      _this.cancelRaf = _this.cancelRaf.bind(_assertThisInitialized(_this));
+      _this.cancelPendingAnimationFrames = _this.cancelPendingAnimationFrames.bind(_assertThisInitialized(_this));
+      _this.setPositionRafId = null;
+      _this.resizePositionRafId = null; //dropBoxSize
 
       _this.size = null;
       _this.isTargetElementVisible = false;
@@ -262,18 +266,21 @@ var Popup = function Popup(Component) {
         groupPopups.push(this);
         _Registry["default"].popups[group] = groupPopups;
 
-        if (Object.keys(_Registry["default"].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["default"].popups).length === 1 && groupPopups.length === 1 && _Registry["default"].listenerPopupRef === undefined) {
+          _Registry["default"].listenerPopupRef = this;
 
-          window.addEventListener('resize', this.handleResize);
-          document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
-          document.addEventListener('focus', this.handleDocumentFocus, true);
+          _Registry["default"].listenerPopupRef.updateListeners(true, CLICK_EVENTS, document);
+
+          document.addEventListener('keyup', _Registry["default"].listenerPopupRef.documentKeyupHandler, false); // document.addEventListener('scroll', Registry.listenerPopupRef.handleScroll, true);
+
+          window.addEventListener('resize', _Registry["default"].listenerPopupRef.handleResize);
+          document.addEventListener('mousedown', _Registry["default"].listenerPopupRef.handleDocumentMouseDown, true);
+          document.addEventListener('focus', _Registry["default"].listenerPopupRef.handleDocumentFocus, true);
         }
       }
     }, {
-      key: "componentWillReceiveProps",
-      value: function componentWillReceiveProps(nextProps) {
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
         var isPopupOpen = this.state.isPopupOpen;
 
         if (typeof nextProps.isPopupOpen !== 'undefined' && nextProps.isPopupOpen !== isPopupOpen) {
@@ -337,6 +344,22 @@ var Popup = function Popup(Component) {
           this.handleIframeEventListeners(shouldAdd, CLICK_EVENTS);
         }
       }
+    }, {
+      key: "cancelRaf",
+      value: function cancelRaf(refName) {
+        var id = this[refName];
+
+        if (id) {
+          cancelAnimationFrame(id);
+          this[refName] = null;
+        }
+      }
+    }, {
+      key: "cancelPendingAnimationFrames",
+      value: function cancelPendingAnimationFrames() {
+        this.cancelRaf('setPositionRafId');
+        this.cancelRaf('resizePositionRafId');
+      }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
@@ -371,14 +394,18 @@ var Popup = function Popup(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["default"].listenerPopupRef !== undefined) {
+          _Registry["default"].listenerPopupRef.updateListeners(false, CLICK_EVENTS, document);
 
-          window.removeEventListener('resize', this.handleResize);
-          document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
-          document.removeEventListener('focus', this.handleDocumentFocus, true);
+          document.removeEventListener('keyup', _Registry["default"].listenerPopupRef.documentKeyupHandler); // document.removeEventListener('scroll', Registry.listenerPopupRef.handleScroll);
+
+          window.removeEventListener('resize', _Registry["default"].listenerPopupRef.handleResize);
+          document.removeEventListener('mousedown', _Registry["default"].listenerPopupRef.handleDocumentMouseDown, true);
+          document.removeEventListener('focus', _Registry["default"].listenerPopupRef.handleDocumentFocus, true);
+          _Registry["default"].listenerPopupRef = undefined;
         }
+
+        this.cancelPendingAnimationFrames();
       }
     }, {
       key: "handleAddingScrollBlock",
@@ -906,13 +933,15 @@ var Popup = function Popup(Component) {
         }
 
         var setPosition = function setPosition() {
-          requestAnimationFrame(function () {
+          _this6.cancelRaf('setPositionRafId');
+
+          _this6.setPositionRafId = requestAnimationFrame(function () {
             var placeHolderElement = _this6.placeHolderElement,
                 dropElement = _this6.dropElement;
             var _this6$state = _this6.state,
                 position = _this6$state.position,
                 isPopupReady = _this6$state.isPopupReady;
-            var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
+            var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
 
             var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
               needArrow: needArrow,
@@ -942,6 +971,8 @@ var Popup = function Popup(Component) {
                 _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
             }
+
+            _this6.setPositionRafId = null;
           });
         };
 
@@ -974,7 +1005,10 @@ var Popup = function Popup(Component) {
 
               if (placeHolderElement && dropElement) {
                 var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
-                requestAnimationFrame(function () {
+
+                _this7.cancelRaf('resizePositionRafId');
+
+                _this7.resizePositionRafId = requestAnimationFrame(function () {
                   var needArrow = _this7.getNeedArrow(popup);
 
                   var isAbsolute = _this7.getIsAbsolutePopup(popup);
@@ -1045,6 +1079,8 @@ var Popup = function Popup(Component) {
                   //   });
                   // }
 
+
+                  _this7.resizePositionRafId = null;
                 });
               }
             }

package/lib/Popup/Registry.js

@@ -10,6 +10,7 @@ var _Config = require("../Provider/Config.js");
 var Registry = {
   lastOpenedGroup: [],
   popups: {},
+  listenerPopupRef: undefined,
   scrollBlockedListenerPopupRef: undefined,
   scrollableListenerPopupRef: undefined,
   getOpenedPopups: function getOpenedPopups() {

package/lib/Select/Select.js

@@ -184,8 +184,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       //   suggestionContainer.addEventListener('scroll', this.handleScroll);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var selectedValue = nextProps.selectedValue,
           isDefaultSelectValue = nextProps.isDefaultSelectValue,
           valueField = nextProps.valueField,

package/lib/Select/__tests__/Select.spec.js

@@ -294,7 +294,14 @@ describe('Select -', function () {
 
     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', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var mockOnSearch, _render15, getByRole, getByTestId;
 

package/lib/v1/Popup/Popup.js

@@ -186,8 +186,8 @@ var Popup = function Popup(Component) {
         }
       }
     }, {
-      key: "componentWillReceiveProps",
-      value: function componentWillReceiveProps(nextProps) {
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
         var isPopupOpen = this.state.isPopupOpen;
 
         if (typeof nextProps.isPopupOpen !== 'undefined' && nextProps.isPopupOpen !== isPopupOpen) {

package/lib/v1/Select/Select.js

@@ -185,8 +185,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       //   suggestionContainer.addEventListener('scroll', this.handleScroll);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       var selectedValue = nextProps.selectedValue,
           isDefaultSelectValue = nextProps.isDefaultSelectValue,
           valueField = nextProps.valueField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -18,9 +18,10 @@
   ],
   "scripts": {
     "build:docs": "react-cli build:docs",
-    "lint": "react-cli lint",
+    "_lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
+    "lint": "npx eslint ./src",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
     "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
     "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
@@ -47,7 +48,7 @@
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "npm run init && react-cli sstest",
     "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
-    "download": "react-cli clean ./node_modules ./package-lock.json && npm install",
+    "download": "react-cli clean ./node_modules ./package-lock.json && npm install && cd ../ && npm run download",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
     "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
@@ -73,7 +74,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
-    "@zohodesk-private/css-variable-migrator": "^1.0.8",
+    "@zohodesk-private/css-variable-migrator": "1.0.9",
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.6",