@zohodesk/components 1.4.6 → 1.4.8

package/lib/Card/Card.js

@@ -175,15 +175,17 @@ 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;
   }
 
   _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;
       }
@@ -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,

package/lib/Card/__tests__/Card.spec.js

@@ -1,13 +1,25 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Card = _interopRequireDefault(require("../Card"));
+var _Card = _interopRequireWildcard(require("../Card"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 describe('Card', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null)),
@@ -15,4 +27,109 @@ describe('Card', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('should trigger fetch, when scroll to the bottom of the card while isRecentOnBottom = false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var mockGetNextOptions, _render2, getByTestId, asFragment, cardContent;
+
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            mockGetNextOptions = jest.fn(function () {
+              return new Promise(function (resolve) {
+                resolve();
+              });
+            });
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+              from: 0,
+              limit: 10,
+              fetchData: mockGetNextOptions
+            }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+              dataId: "scrollToBottomCardContent"
+            }, /*#__PURE__*/_react["default"].createElement("div", null, "Hello Zam")))), getByTestId = _render2.getByTestId, asFragment = _render2.asFragment;
+            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
+            });
+
+            _react2.fireEvent.scroll(cardContent, {
+              target: {
+                scrollTop: 401
+              }
+            });
+
+            _context.next = 9;
+            return (0, _react2.waitFor)(function () {
+              expect(asFragment()).toMatchSnapshot();
+              expect(mockGetNextOptions).toHaveBeenCalledWith(10, 40, 'down');
+            });
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('should trigger fetch, when scroll to the top of the card while scrollDirection = bottomToTop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var mockGetNextOptions, _render3, getByTestId, asFragment, cardContent;
+
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            mockGetNextOptions = jest.fn(function () {
+              return new Promise(function (resolve) {
+                resolve();
+              });
+            });
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+              from: 0,
+              limit: 10,
+              scrollDirection: "bottomToTop",
+              fetchData: mockGetNextOptions
+            }, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+              dataId: "scrollToTopCardContent"
+            }, /*#__PURE__*/_react["default"].createElement("div", null, "Hello Zam")))), getByTestId = _render3.getByTestId, asFragment = _render3.asFragment;
+            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
+            });
+
+            _react2.fireEvent.scroll(cardContent, {
+              target: {
+                scrollTop: 0
+              }
+            });
+
+            _context2.next = 9;
+            return (0, _react2.waitFor)(function () {
+              expect(asFragment()).toMatchSnapshot();
+              expect(mockGetNextOptions).toHaveBeenCalledWith(10, 40, 'up');
+            });
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

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

@@ -10,7 +10,8 @@ var Card_defaultProps = {
   onClick: null,
   scrollAt: '10',
   a11y: {},
-  isPercentageScroll: false
+  isPercentageScroll: false,
+  scrollDirection: 'topToBottom'
 };
 exports.Card_defaultProps = Card_defaultProps;
 var CardHeader_defaultProps = {

package/lib/Card/props/propTypes.js

@@ -50,7 +50,8 @@ var Card_propTypes = {
     role: _propTypes["default"].string
   }),
   isPercentageScroll: _propTypes["default"].bool,
-  eleRef: _propTypes["default"].func
+  eleRef: _propTypes["default"].func,
+  scrollDirection: _propTypes["default"].oneOf(['topToBottom', 'bottomToTop'])
 };
 exports.Card_propTypes = Card_propTypes;
 var CardFooter_propTypes = {

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

@@ -4,13 +4,13 @@ require("./common/reset.module.css");
 
 require("./common/basic.module.css");
 
-require("@zohodesk/variables/es/colorVariables.module.css");
+require("@zohodesk/variables/lib/colorVariables.module.css");
 
-require("@zohodesk/variables/es/sizeVariables.module.css");
+require("@zohodesk/variables/lib/sizeVariables.module.css");
 
-require("@zohodesk/variables/es/fontFamilyVariables.module.css");
+require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 
-require("@zohodesk/icons/es/Icon/Icon.module.css");
+require("@zohodesk/icons/lib/Icon/Icon.module.css");
 
 require("./common/animation.module.css");