@zohodesk/components 1.4.6 → 1.4.8

package/README.md

@@ -2,11 +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.6
+# 1.4.8
+
+- Added UNSAFE_ prefix to deprecated lifecycle methods: componentWillMount, componentWillReceiveProps, and componentWillUpdate.
 
 - **Popup**
-  - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
+  - 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`.
+
+# 1.4.6
 
+- **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

@@ -96,11 +96,13 @@ export default class Card extends Component {
     this.to = from + 3 * limit;
     this.isFetching = false;
     this.lastScrollTop = 0;
-    this.onScroll = this.onScroll.bind(this); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    this.onScroll = this.onScroll.bind(this);
+    this.setScrollRef = this.setScrollRef.bind(this);
+    this.childEleRef = null; //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.from !== nextProps.from) {
       this.from = nextProps.from;
     }
@@ -127,25 +129,36 @@ export default class Card extends Component {
       scrollAt,
       noNeedUpScroll,
       // isScrollShadow,
-      isPercentageScroll
+      isPercentageScroll,
+      scrollDirection
     } = this.props;
+    const scrollLimitHeight = scrollHeight - scrollAt;
+    const currentVisibleBottom = scrollTop + offsetHeight;
 
     if (scrollTop > this.lastScrollTop) {
-      this.scrollDirection = 'down';
+      this.scrollingDirection = 'down';
     } else {
-      this.scrollDirection = 'up';
+      this.scrollingDirection = 'up';
     }
 
     this.lastScrollTop = scrollTop;
 
     if (fetchData && !this.isFetching) {
-      if (this.scrollDirection === 'down' && !noMoreData) {
-        const scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-        const prefetch = isPercentageScroll ? scrollingPercentage >= getLibraryConfig('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+      const fetchDirection = scrollDirection === 'bottomToTop' ? 'up' : 'down';
+
+      if (this.scrollingDirection === fetchDirection && !noMoreData) {
+        let prefetch = false;
+
+        if (isPercentageScroll) {
+          const scrollingPercentage = scrollDirection === 'bottomToTop' ? (scrollHeight - scrollTop) / scrollLimitHeight * 100 : currentVisibleBottom / scrollLimitHeight * 100;
+          prefetch = scrollingPercentage >= getLibraryConfig('scrollFetchLimit');
+        } else {
+          prefetch = scrollDirection === 'bottomToTop' ? scrollTop <= scrollAt : scrollLimitHeight <= currentVisibleBottom;
+        }
 
         if (prefetch) {
           this.isFetching = true;
-          fetchData(this.from + this.limit, this.limit + this.to, this.scrollDirection).then(() => {
+          fetchData(this.from + this.limit, this.limit + this.to, this.scrollingDirection).then(() => {
             this.to = this.limit + this.to;
             this.isFetching = false;
           }, () => {
@@ -153,9 +166,11 @@ export default class Card extends Component {
           });
         }
       } else {
-        if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+        const prefetch = scrollDirection === 'bottomToTop' ? scrollLimitHeight <= currentVisibleBottom : 0 >= scrollTop - scrollAt;
+
+        if (prefetch && this.from !== 0 && !noNeedUpScroll) {
           this.isFetching = true;
-          fetchData(this.from - this.limit, this.to - this.limit, this.scrollDirection).then(() => {
+          fetchData(this.from - this.limit, this.to - this.limit, this.scrollingDirection).then(() => {
             this.to = this.to - this.limit;
             this.isFetching = false;
           }, () => {
@@ -166,9 +181,12 @@ export default class Card extends Component {
     }
 
     if (fetchData && !noNeedUpScroll) {
-      if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+      const topFetch = scrollDirection === 'bottomToTop' ? !noMoreData : !noNeedUpScroll && this.from !== 0;
+      const bottomFetch = scrollDirection === 'bottomToTop' ? !noNeedUpScroll && this.from !== 0 : !noMoreData;
+
+      if (scrollTop === 0 && topFetch) {
         scrollContainerObj.scrollTop = scrollTop + offsetHeight / 3;
-      } else if (scrollHeight === scrollTop + offsetHeight && !noMoreData) {
+      } else if (scrollHeight === currentVisibleBottom && bottomFetch) {
         scrollContainerObj.scrollTop = scrollTop - offsetHeight / 2;
       }
     } // if (isScrollShadow) {
@@ -187,6 +205,21 @@ export default class Card extends Component {
   // }
 
 
+  setScrollRef(el) {
+    const {
+      scrollAt,
+      scrollDirection
+    } = this.props;
+
+    if (el && scrollDirection === 'bottomToTop') {
+      requestAnimationFrame(() => {
+        el.scrollTop = el.scrollHeight + Number(scrollAt);
+      });
+    }
+
+    this.childEleRef && this.childEleRef(el);
+  }
+
   render() {
     let {
       onClick,
@@ -220,6 +253,7 @@ export default class Card extends Component {
           isScroll
         });
       } else if (child.type === CardContent || this.props.childTypes && child.type === this.props.childTypes.cardContent) {
+        this.childEleRef = child.props.eleRef;
         return /*#__PURE__*/React.createElement(Box, {
           id: htmlId,
           role: role,
@@ -227,7 +261,7 @@ export default class Card extends Component {
           scroll: child.props.scroll,
           preventParentScroll: child.props.preventParentScroll,
           onScroll: this.onScroll,
-          eleRef: child.props.eleRef,
+          eleRef: this.setScrollRef,
           isScrollAttribute: child.props.isScrollAttribute,
           dataId: child.props.dataId,
           shrink: child.props.shrink,

package/es/Card/__tests__/Card.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import Card from "../Card";
+import { render, fireEvent, within, waitFor } from '@testing-library/react';
+import Card, { CardContent } from "../Card";
 describe('Card', () => {
   test('rendering the defult props', () => {
     const {
@@ -8,4 +8,83 @@ describe('Card', () => {
     } = render( /*#__PURE__*/React.createElement(Card, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', async () => {
+    const mockGetNextOptions = jest.fn(() => {
+      return new Promise(resolve => {
+        resolve();
+      });
+    });
+    const {
+      getByTestId,
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      from: 0,
+      limit: 10,
+      fetchData: mockGetNextOptions
+    }, /*#__PURE__*/React.createElement(CardContent, {
+      dataId: "scrollToBottomCardContent"
+    }, /*#__PURE__*/React.createElement("div", null, "Hello Zam"))));
+    const cardContent = getByTestId('scrollToBottomCardContent');
+    Object.defineProperty(cardContent, 'scrollHeight', {
+      value: 1000,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'clientHeight', {
+      value: 600,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'offsetHeight', {
+      value: 600,
+      writable: true
+    });
+    fireEvent.scroll(cardContent, {
+      target: {
+        scrollTop: 401
+      }
+    });
+    await waitFor(() => {
+      expect(asFragment()).toMatchSnapshot();
+      expect(mockGetNextOptions).toHaveBeenCalledWith(10, 40, 'down');
+    });
+  });
+  test('should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop', async () => {
+    const mockGetNextOptions = jest.fn(() => {
+      return new Promise(resolve => {
+        resolve();
+      });
+    });
+    const {
+      getByTestId,
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Card, {
+      from: 0,
+      limit: 10,
+      scrollDirection: "bottomToTop",
+      fetchData: mockGetNextOptions
+    }, /*#__PURE__*/React.createElement(CardContent, {
+      dataId: "scrollToTopCardContent"
+    }, /*#__PURE__*/React.createElement("div", null, "Hello Zam"))));
+    const cardContent = getByTestId('scrollToTopCardContent');
+    Object.defineProperty(cardContent, 'scrollHeight', {
+      value: 1000,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'clientHeight', {
+      value: 600,
+      writable: true
+    });
+    Object.defineProperty(cardContent, 'offsetHeight', {
+      value: 600,
+      writable: true
+    });
+    fireEvent.scroll(cardContent, {
+      target: {
+        scrollTop: 0
+      }
+    });
+    await waitFor(() => {
+      expect(asFragment()).toMatchSnapshot();
+      expect(mockGetNextOptions).toHaveBeenCalledWith(10, 40, 'up');
+    });
+  });
 });

package/es/Card/__tests__/__snapshots__/Card.spec.js.snap

@@ -10,3 +10,47 @@ exports[`Card rendering the defult props 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`Card should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="scrollToBottomCardContent"
+      data-selector-id="cardContent"
+      data-test-id="scrollToBottomCardContent"
+    >
+      <div>
+        Hello Zam
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Card should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop 1`] = `
+<DocumentFragment>
+  <div
+    class="flex cover coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="grow basis shrinkOff scrolly"
+      data-id="scrollToTopCardContent"
+      data-selector-id="cardContent"
+      data-test-id="scrollToTopCardContent"
+    >
+      <div>
+        Hello Zam
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/Card/props/defaultProps.js

@@ -4,7 +4,8 @@ export const Card_defaultProps = {
   onClick: null,
   scrollAt: '10',
   a11y: {},
-  isPercentageScroll: false
+  isPercentageScroll: false,
+  scrollDirection: 'topToBottom'
 };
 export const CardHeader_defaultProps = {
   dataId: 'CardHeader',

package/es/Card/props/propTypes.js

@@ -38,7 +38,8 @@ export const Card_propTypes = {
     role: PropTypes.string
   }),
   isPercentageScroll: PropTypes.bool,
-  eleRef: PropTypes.func
+  eleRef: PropTypes.func,
+  scrollDirection: PropTypes.oneOf(['topToBottom', 'bottomToTop'])
 };
 export const CardFooter_propTypes = {
   children: PropTypes.node,

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+    /*css:theme-validation:ignore*/
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -207,6 +212,7 @@
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    /*css:theme-validation:ignore*/
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -419,6 +425,7 @@
 .closeBar {
     /*  Variable:Ignore  */
     height: 6px;
+    /*css:theme-validation:ignore*/
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

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/common/basic.module.css

@@ -1,5 +1,3 @@
-@charset 'utf-8';
-
 @font-face {
   font-family: Regular;
   src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');

package/es/components_layer.module.css

@@ -0,0 +1 @@
+@layer dot-components, dot-components.theme, dot-components.core, dot-components.reset, dot-components.base, dot-components.animation, dot-components.transition, dot-components.utility, dot-components.layout, dot-components.semantic, dot-components.atom, dot-components.molecule, dot-components.organism, dot-components.page, dot-components.effect;

package/es/css.js

@@ -1,9 +1,9 @@
 import "./common/reset.module.css";
 import "./common/basic.module.css";
-import '@zohodesk/variables/es/colorVariables.module.css';
-import '@zohodesk/variables/es/sizeVariables.module.css';
-import '@zohodesk/variables/es/fontFamilyVariables.module.css';
-import '@zohodesk/icons/es/Icon/Icon.module.css';
+import '@zohodesk/variables/lib/colorVariables.module.css';
+import '@zohodesk/variables/lib/sizeVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/icons/lib/Icon/Icon.module.css';
 import "./common/animation.module.css";
 import "./common/transition.module.css";
 import "./common/common.module.css";

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