@zohodesk/components 1.4.6 → 1.4.7

package/README.md

@@ -2,11 +2,15 @@
 
 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).
-
+  - - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
 
 # 1.4.5
 

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);

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/lib/Card/Card.js

@@ -175,7 +175,9 @@ var Card = /*#__PURE__*/function (_Component3) {
     _this2.to = from + 3 * limit;
     _this2.isFetching = false;
     _this2.lastScrollTop = 0;
-    _this2.onScroll = _this2.onScroll.bind(_assertThisInitialized(_this2)); //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
+    _this2.onScroll = _this2.onScroll.bind(_assertThisInitialized(_this2));
+    _this2.setScrollRef = _this2.setScrollRef.bind(_assertThisInitialized(_this2));
+    _this2.childEleRef = null; //this.onSetScroll = debounce(this.setScroll.bind(this, true), 10, true);
     //this.onClearScroll = debounce(this.setScroll.bind(this, false), 500);
 
     return _this2;
@@ -204,24 +206,35 @@ var Card = /*#__PURE__*/function (_Component3) {
           noMoreData = _this$props3.noMoreData,
           scrollAt = _this$props3.scrollAt,
           noNeedUpScroll = _this$props3.noNeedUpScroll,
-          isPercentageScroll = _this$props3.isPercentageScroll;
+          isPercentageScroll = _this$props3.isPercentageScroll,
+          scrollDirection = _this$props3.scrollDirection;
+      var scrollLimitHeight = scrollHeight - scrollAt;
+      var 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) {
-          var scrollingPercentage = (scrollTop + offsetHeight) / (scrollHeight - scrollAt) * 100;
-          var prefetch = isPercentageScroll ? scrollingPercentage >= (0, _Config.getLibraryConfig)('scrollFetchLimit') : scrollHeight - scrollAt <= scrollTop + offsetHeight;
+        var fetchDirection = scrollDirection === 'bottomToTop' ? 'up' : 'down';
+
+        if (this.scrollingDirection === fetchDirection && !noMoreData) {
+          var prefetch = false;
+
+          if (isPercentageScroll) {
+            var scrollingPercentage = scrollDirection === 'bottomToTop' ? (scrollHeight - scrollTop) / scrollLimitHeight * 100 : currentVisibleBottom / scrollLimitHeight * 100;
+            prefetch = scrollingPercentage >= (0, _Config.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(function () {
+            fetchData(this.from + this.limit, this.limit + this.to, this.scrollingDirection).then(function () {
               _this3.to = _this3.limit + _this3.to;
               _this3.isFetching = false;
             }, function () {
@@ -229,9 +242,11 @@ var Card = /*#__PURE__*/function (_Component3) {
             });
           }
         } else {
-          if (0 >= scrollTop - scrollAt && this.from !== 0 && !noNeedUpScroll) {
+          var _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(function () {
+            fetchData(this.from - this.limit, this.to - this.limit, this.scrollingDirection).then(function () {
               _this3.to = _this3.to - _this3.limit;
               _this3.isFetching = false;
             }, function () {
@@ -242,9 +257,12 @@ var Card = /*#__PURE__*/function (_Component3) {
       }
 
       if (fetchData && !noNeedUpScroll) {
-        if (this.from !== 0 && scrollTop === 0 && !noNeedUpScroll) {
+        var topFetch = scrollDirection === 'bottomToTop' ? !noMoreData : !noNeedUpScroll && this.from !== 0;
+        var 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) {
@@ -262,21 +280,36 @@ var Card = /*#__PURE__*/function (_Component3) {
     //   }
     // }
 
+  }, {
+    key: "setScrollRef",
+    value: function setScrollRef(el) {
+      var _this$props4 = this.props,
+          scrollAt = _this$props4.scrollAt,
+          scrollDirection = _this$props4.scrollDirection;
+
+      if (el && scrollDirection === 'bottomToTop') {
+        requestAnimationFrame(function () {
+          el.scrollTop = el.scrollHeight + Number(scrollAt);
+        });
+      }
+
+      this.childEleRef && this.childEleRef(el);
+    }
   }, {
     key: "render",
     value: function render() {
       var _this4 = this;
 
-      var _this$props4 = this.props,
-          onClick = _this$props4.onClick,
-          children = _this$props4.children,
-          isScrollAttribute = _this$props4.isScrollAttribute,
-          dataId = _this$props4.dataId,
-          eleRef = _this$props4.eleRef,
-          _this$props4$customCl = _this$props4.customClass,
-          customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl,
-          htmlId = _this$props4.htmlId,
-          a11y = _this$props4.a11y;
+      var _this$props5 = this.props,
+          onClick = _this$props5.onClick,
+          children = _this$props5.children,
+          isScrollAttribute = _this$props5.isScrollAttribute,
+          dataId = _this$props5.dataId,
+          eleRef = _this$props5.eleRef,
+          _this$props5$customCl = _this$props5.customClass,
+          customClass = _this$props5$customCl === void 0 ? '' : _this$props5$customCl,
+          htmlId = _this$props5.htmlId,
+          a11y = _this$props5.a11y;
       var isScroll = this.state.isScroll;
       var role = a11y.role;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -295,6 +328,7 @@ var Card = /*#__PURE__*/function (_Component3) {
             isScroll: isScroll
           });
         } else if (child.type === CardContent || _this4.props.childTypes && child.type === _this4.props.childTypes.cardContent) {
+          _this4.childEleRef = child.props.eleRef;
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
             id: htmlId,
             role: role,
@@ -302,7 +336,7 @@ var Card = /*#__PURE__*/function (_Component3) {
             scroll: child.props.scroll,
             preventParentScroll: child.props.preventParentScroll,
             onScroll: _this4.onScroll,
-            eleRef: child.props.eleRef,
+            eleRef: _this4.setScrollRef,
             isScrollAttribute: child.props.isScrollAttribute,
             dataId: child.props.dataId,
             shrink: child.props.shrink,
@@ -344,11 +378,11 @@ var CardFooter = /*#__PURE__*/function (_Component4) {
   _createClass(CardFooter, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          children = _this$props5.children,
-          dataId = _this$props5.dataId,
-          customClass = _this$props5.customClass,
-          dataSelectorId = _this$props5.dataSelectorId;
+      var _this$props6 = this.props,
+          children = _this$props6.children,
+          dataId = _this$props6.dataId,
+          customClass = _this$props6.customClass,
+          dataSelectorId = _this$props6.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(customClass),
         dataId: dataId,