@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-231

package/README.md

@@ -2,6 +2,23 @@
 
 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`.
+
+# 1.4.6
+
+- **Popup** -  Added fixed popup scroll block behavior support to iframe elements (same-origin only).
+
 # 1.4.5
 
 - **Portal**
@@ -10,7 +27,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 - **Popup**
   - Fixed the auto-repositioning issue during fixed popup resize and improved the position calculation logic.
-  - Added fixed popup scroll block behavior support to iframe elements (same-origin only).
 
 - **Modal**
   - Refactored to use the new `Portal` component for rendering, resolving unwanted rendering issues.

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -219,9 +219,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='blue'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -219,9 +219,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
+	--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
+	--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='blue'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(56,63,87);

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(29,47,51);

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(51,46,36);

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(52,34,45);

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(49,51,35);

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -219,9 +219,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
+	--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
+	--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);

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/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,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

@@ -196,7 +196,7 @@ const Popup = function (Component) {
       }
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const {
         isPopupOpen
       } = this.state;
@@ -556,10 +556,10 @@ const Popup = function (Component) {
 
       if (entry.isIntersecting === true) {
         this.isTargetElementVisible = true;
-        dropElement && dropElement.setAttribute('data-visible', 'visible');
+        dropElement.setAttribute('data-visible', 'visible');
       } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
         this.isTargetElementVisible = false;
-        dropElement && dropElement.setAttribute('data-visible', 'hidden');
+        dropElement.setAttribute('data-visible', 'hidden');
       }
     }
 

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

@@ -247,6 +247,21 @@ describe('Select -', () => {
     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( /*#__PURE__*/React.createElement(Select, {
+      needSearch: true,
+      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 {