@zohodesk/components 1.4.5 → 1.4.7

package/README.md

@@ -2,6 +2,16 @@
 
 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.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
 
 - **Portal**

package/es/AppContainer/AppContainer.js

@@ -8,7 +8,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/variables/assets/sizeVariables.module.css';
 import '@zohodesk/variables/assets/fontsizeVariables.module.css';
-import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import "../common/a11y.module.css";

package/es/Card/Card.js

@@ -96,7 +96,9 @@ 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);
   }
 
@@ -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);