@pingux/astro 1.1.0-alpha.0 → 1.1.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.0...@pingux/astro@1.1.0-alpha.1) (2022-01-19)
+
+
+### Bug Fixes
+
+* [UIP-5026] Infinite Loading List requests page 2 instantly ([e6888cf](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e6888cfe91435fae0ab583b0ff22b2c169ba7bcd))
+
+
+
+
+
 # [1.1.0-alpha.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.1...@pingux/astro@1.1.0-alpha.0) (2022-01-19)
 
 

package/lib/cjs/components/ListView/ListView.stories.js

@@ -10,12 +10,18 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.MultipleSelection = exports.InfiniteLoadingList = exports.Default = exports["default"] = void 0;
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -87,6 +93,455 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
+var animals = [{
+  name: 'Aardvark'
+}, {
+  name: 'Albatross'
+}, {
+  name: 'Alligator'
+}, {
+  name: 'Alpaca'
+}, {
+  name: 'Ant'
+}, {
+  name: 'Anteater'
+}, {
+  name: 'Antelope'
+}, {
+  name: 'Ape'
+}, {
+  name: 'Armadillo'
+}, {
+  name: 'Donkey'
+}, {
+  name: 'Baboon'
+}, {
+  name: 'Badger'
+}, {
+  name: 'Barracuda'
+}, {
+  name: 'Bat'
+}, {
+  name: 'Bear'
+}, {
+  name: 'Beaver'
+}, {
+  name: 'Bee'
+}, {
+  name: 'Bison'
+}, {
+  name: 'Boar'
+}, {
+  name: 'Buffalo'
+}, {
+  name: 'Butterfly'
+}, {
+  name: 'Camel'
+}, {
+  name: 'Capybara'
+}, {
+  name: 'Caribou'
+}, {
+  name: 'Cassowary'
+}, {
+  name: 'Cat'
+}, {
+  name: 'Caterpillar'
+}, {
+  name: 'Cattle'
+}, {
+  name: 'Chamois'
+}, {
+  name: 'Cheetah'
+}, {
+  name: 'Chicken'
+}, {
+  name: 'Chimpanzee'
+}, {
+  name: 'Chinchilla'
+}, {
+  name: 'Chough'
+}, {
+  name: 'Clam'
+}, {
+  name: 'Cobra'
+}, {
+  name: 'Cockroach'
+}, {
+  name: 'Cod'
+}, {
+  name: 'Cormorant'
+}, {
+  name: 'Coyote'
+}, {
+  name: 'Crab'
+}, {
+  name: 'Crane'
+}, {
+  name: 'Crocodile'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Curlew'
+}, {
+  name: 'Deer'
+}, {
+  name: 'Dinosaur'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Dogfish'
+}, {
+  name: 'Dolphin'
+}, {
+  name: 'Dotterel'
+}, {
+  name: 'Dove'
+}, {
+  name: 'Dragonfly'
+}, {
+  name: 'Duck'
+}, {
+  name: 'Dugong'
+}, {
+  name: 'Dunlin'
+}, {
+  name: 'Eagle'
+}, {
+  name: 'Echidna'
+}, {
+  name: 'Eel'
+}, {
+  name: 'Eland'
+}, {
+  name: 'Elephant'
+}, {
+  name: 'Elk'
+}, {
+  name: 'Emu'
+}, {
+  name: 'Falcon'
+}, {
+  name: 'Ferret'
+}, {
+  name: 'Finch'
+}, {
+  name: 'Fish'
+}, {
+  name: 'Flamingo'
+}, {
+  name: 'Fly'
+}, {
+  name: 'Fox'
+}, {
+  name: 'Frog'
+}, {
+  name: 'Gaur'
+}, {
+  name: 'Gazelle'
+}, {
+  name: 'Gerbil'
+}, {
+  name: 'Giraffe'
+}, {
+  name: 'Gnat'
+}, {
+  name: 'Gnu'
+}, {
+  name: 'Goat'
+}, {
+  name: 'Goldfinch'
+}, {
+  name: 'Goldfish'
+}, {
+  name: 'Goose'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goshawk'
+}, {
+  name: 'Grasshopper'
+}, {
+  name: 'Grouse'
+}, {
+  name: 'Guanaco'
+}, {
+  name: 'Gull'
+}, {
+  name: 'Hamster'
+}, {
+  name: 'Hare'
+}, {
+  name: 'Hawk'
+}, {
+  name: 'Hedgehog'
+}, {
+  name: 'Heron'
+}, {
+  name: 'Herring'
+}, {
+  name: 'Hippopotamus'
+}, {
+  name: 'Hornet'
+}, {
+  name: 'Horse'
+}, {
+  name: 'Human'
+}, {
+  name: 'Hummingbird'
+}, {
+  name: 'Hyena'
+}, {
+  name: 'Ibex'
+}, {
+  name: 'Ibis'
+}, {
+  name: 'Jackal'
+}, {
+  name: 'Jaguar'
+}, {
+  name: 'Jay'
+}, {
+  name: 'Jellyfish'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Kingfisher'
+}, {
+  name: 'Koala'
+}, {
+  name: 'Kookabura'
+}, {
+  name: 'Kouprey'
+}, {
+  name: 'Kudu'
+}, {
+  name: 'Lapwing'
+}, {
+  name: 'Lark'
+}, {
+  name: 'Lemur'
+}, {
+  name: 'Leopard'
+}, {
+  name: 'Lion'
+}, {
+  name: 'Llama'
+}, {
+  name: 'Lobster'
+}, {
+  name: 'Locust'
+}, {
+  name: 'Loris'
+}, {
+  name: 'Louse'
+}, {
+  name: 'Lyrebird'
+}, {
+  name: 'Magpie'
+}, {
+  name: 'Mallard'
+}, {
+  name: 'Manatee'
+}, {
+  name: 'Mandrill'
+}, {
+  name: 'Mantis'
+}, {
+  name: 'Marten'
+}, {
+  name: 'Meerkat'
+}, {
+  name: 'Mink'
+}, {
+  name: 'Mole'
+}, {
+  name: 'Mongoose'
+}, {
+  name: 'Monkey'
+}, {
+  name: 'Moose'
+}, {
+  name: 'Mosquito'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Mule'
+}, {
+  name: 'Narwhal'
+}, {
+  name: 'Newt'
+}, {
+  name: 'Nightingale'
+}, {
+  name: 'Octopus'
+}, {
+  name: 'Okapi'
+}, {
+  name: 'Opossum'
+}, {
+  name: 'Oryx'
+}, {
+  name: 'Ostrich'
+}, {
+  name: 'Otter'
+}, {
+  name: 'Owl'
+}, {
+  name: 'Oyster'
+}, {
+  name: 'Panther'
+}, {
+  name: 'Parrot'
+}, {
+  name: 'Partridge'
+}, {
+  name: 'Peafowl'
+}, {
+  name: 'Pelican'
+}, {
+  name: 'Penguin'
+}, {
+  name: 'Pheasant'
+}, {
+  name: 'Pig'
+}, {
+  name: 'Pigeon'
+}, {
+  name: 'Pony'
+}, {
+  name: 'Porcupine'
+}, {
+  name: 'Porpoise'
+}, {
+  name: 'Quail'
+}, {
+  name: 'Quelea'
+}, {
+  name: 'Quetzal'
+}, {
+  name: 'Rabbit'
+}, {
+  name: 'Raccoon'
+}, {
+  name: 'Rail'
+}, {
+  name: 'Ram'
+}, {
+  name: 'Rat'
+}, {
+  name: 'Raven'
+}, {
+  name: 'Red deer'
+}, {
+  name: 'Red panda'
+}, {
+  name: 'Reindeer'
+}, {
+  name: 'Rhinoceros'
+}, {
+  name: 'Rook'
+}, {
+  name: 'Salamander'
+}, {
+  name: 'Salmon'
+}, {
+  name: 'Sand Dollar'
+}, {
+  name: 'Sandpiper'
+}, {
+  name: 'Sardine'
+}, {
+  name: 'Scorpion'
+}, {
+  name: 'Seahorse'
+}, {
+  name: 'Seal'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Sheep'
+}, {
+  name: 'Shrew'
+}, {
+  name: 'Skunk'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Sparrow'
+}, {
+  name: 'Spider'
+}, {
+  name: 'Spoonbill'
+}, {
+  name: 'Squid'
+}, {
+  name: 'Squirrel'
+}, {
+  name: 'Starling'
+}, {
+  name: 'Stingray'
+}, {
+  name: 'Stinkbug'
+}, {
+  name: 'Stork'
+}, {
+  name: 'Swallow'
+}, {
+  name: 'Swan'
+}, {
+  name: 'Tapir'
+}, {
+  name: 'Tarsier'
+}, {
+  name: 'Termite'
+}, {
+  name: 'Tiger'
+}, {
+  name: 'Toad'
+}, {
+  name: 'Trout'
+}, {
+  name: 'Turkey'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Viper'
+}, {
+  name: 'Vulture'
+}, {
+  name: 'Wallaby'
+}, {
+  name: 'Walrus'
+}, {
+  name: 'Wasp'
+}, {
+  name: 'Weasel'
+}, {
+  name: 'Whale'
+}, {
+  name: 'Wildcat'
+}, {
+  name: 'Wolf'
+}, {
+  name: 'Wolverine'
+}, {
+  name: 'Wombat'
+}, {
+  name: 'Woodcock'
+}, {
+  name: 'Woodpecker'
+}, {
+  name: 'Worm'
+}, {
+  name: 'Wren'
+}, {
+  name: 'Yak'
+}, {
+  name: 'Zebra'
+}];
 var props = {
   disabledKeys: ['Snake']
 };
@@ -163,61 +618,140 @@ var Default = function Default(_ref2) {
 exports.Default = Default;
 
 var InfiniteLoadingList = function InfiniteLoadingList() {
+  var getMockData = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(signal, cursor) {
+      var pageNumber;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              pageNumber = 1;
+
+              if (cursor) {
+                pageNumber = Number(cursor.substr((0, _indexOf["default"])(cursor).call(cursor, '-') + 1));
+              } // With this we will emulate load even with mocked API
+
+
+              _context.next = 4;
+              return new _promise["default"](function (resolve) {
+                return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 4:
+              return _context.abrupt("return", {
+                items: (0, _slice["default"])(animals).call(animals, (pageNumber - 1) * 10, pageNumber * 10),
+                cursor: "mock-".concat(pageNumber + 1)
+              });
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getMockData(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var fetchApiData = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(signal, cursor, filterText) {
+      var res, json;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return _promise["default"].race([// If no cursor is available, then we're loading the first page,
+              // filtering the results returned via a query string that
+              // mirrors the ComboBox input text.
+              // Otherwise, the cursor is the next URL to load,
+              // as returned from the previous page.
+              fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+                signal: signal
+              }), new _promise["default"](function (_resolve, reject) {
+                return (0, _setTimeout2["default"])(function () {
+                  return reject(new Error('timeout'));
+                }, 3000);
+              })]);
+
+            case 3:
+              res = _context2.sent;
+              _context2.next = 6;
+              return res.json();
+
+            case 6:
+              json = _context2.sent;
+              _context2.next = 9;
+              return new _promise["default"](function (resolve) {
+                return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 9:
+              return _context2.abrupt("return", {
+                items: json.results,
+                cursor: json.next
+              });
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+              return _context2.abrupt("return", getMockData());
+
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 12]]);
+    }));
+
+    return function fetchApiData(_x3, _x4, _x5) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
   var list = (0, _data.useAsyncList)({
-    load: function load(_ref3) {
-      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var signal, cursor, filterText, res, json;
-        return _regenerator["default"].wrap(function _callee$(_context) {
+    load: function load(_ref5) {
+      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var signal, cursor, filterText;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
-                signal = _ref3.signal, cursor = _ref3.cursor, filterText = _ref3.filterText;
+                signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
 
                 if (cursor) {
                   // eslint-disable-next-line
-                  cursor = cursor.replace(/^http:\/\//i, 'https://');
-                } // If no cursor is available, then we're loading the first page,
-                // filtering the results returned via a query string that
-                // mirrors the ComboBox input text.
-                // Otherwise, the cursor is the next URL to load,
-                // as returned from the previous page.
+                  cursor = cursor.replace(/^http:\/\//i, "https://");
+                } // check if we are mocking pages
 
 
-                _context.next = 4;
-                return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
-                  signal: signal
-                });
+                if (!(cursor && (0, _includes["default"])(cursor).call(cursor, 'mock'))) {
+                  _context3.next = 4;
+                  break;
+                }
+
+                return _context3.abrupt("return", getMockData(signal, cursor, filterText));
 
               case 4:
-                res = _context.sent;
-                _context.next = 7;
-                return res.json();
-
-              case 7:
-                json = _context.sent;
-                _context.next = 10;
-                return new _promise["default"](function (resolve) {
-                  return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
-                });
-
-              case 10:
-                return _context.abrupt("return", {
-                  items: json.results,
-                  cursor: json.next
-                });
-
-              case 11:
+                return _context3.abrupt("return", fetchApiData(signal, cursor, filterText));
+
+              case 5:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
           }
-        }, _callee);
+        }, _callee3);
       }))();
     }
   });
   return (0, _react2.jsx)(_Box["default"], {
     sx: {
-      maxHeight: '600px'
+      maxHeight: '400px'
     }
   }, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, actions, {
     items: list.items,
@@ -234,9 +768,16 @@ var InfiniteLoadingList = function InfiniteLoadingList() {
 };
 
 exports.InfiniteLoadingList = InfiniteLoadingList;
+InfiniteLoadingList.parameters = {
+  docs: {
+    description: {
+      story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
+    }
+  }
+};
 
-var MultipleSelection = function MultipleSelection(_ref4) {
-  var args = (0, _extends2["default"])({}, _ref4);
+var MultipleSelection = function MultipleSelection(_ref6) {
+  var args = (0, _extends2["default"])({}, _ref6);
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, args, {
     items: items,
     selectionMode: "multiple"

package/lib/components/ListView/ListView.stories.js

@@ -1,6 +1,9 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
@@ -55,6 +58,455 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
+var animals = [{
+  name: 'Aardvark'
+}, {
+  name: 'Albatross'
+}, {
+  name: 'Alligator'
+}, {
+  name: 'Alpaca'
+}, {
+  name: 'Ant'
+}, {
+  name: 'Anteater'
+}, {
+  name: 'Antelope'
+}, {
+  name: 'Ape'
+}, {
+  name: 'Armadillo'
+}, {
+  name: 'Donkey'
+}, {
+  name: 'Baboon'
+}, {
+  name: 'Badger'
+}, {
+  name: 'Barracuda'
+}, {
+  name: 'Bat'
+}, {
+  name: 'Bear'
+}, {
+  name: 'Beaver'
+}, {
+  name: 'Bee'
+}, {
+  name: 'Bison'
+}, {
+  name: 'Boar'
+}, {
+  name: 'Buffalo'
+}, {
+  name: 'Butterfly'
+}, {
+  name: 'Camel'
+}, {
+  name: 'Capybara'
+}, {
+  name: 'Caribou'
+}, {
+  name: 'Cassowary'
+}, {
+  name: 'Cat'
+}, {
+  name: 'Caterpillar'
+}, {
+  name: 'Cattle'
+}, {
+  name: 'Chamois'
+}, {
+  name: 'Cheetah'
+}, {
+  name: 'Chicken'
+}, {
+  name: 'Chimpanzee'
+}, {
+  name: 'Chinchilla'
+}, {
+  name: 'Chough'
+}, {
+  name: 'Clam'
+}, {
+  name: 'Cobra'
+}, {
+  name: 'Cockroach'
+}, {
+  name: 'Cod'
+}, {
+  name: 'Cormorant'
+}, {
+  name: 'Coyote'
+}, {
+  name: 'Crab'
+}, {
+  name: 'Crane'
+}, {
+  name: 'Crocodile'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Curlew'
+}, {
+  name: 'Deer'
+}, {
+  name: 'Dinosaur'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Dogfish'
+}, {
+  name: 'Dolphin'
+}, {
+  name: 'Dotterel'
+}, {
+  name: 'Dove'
+}, {
+  name: 'Dragonfly'
+}, {
+  name: 'Duck'
+}, {
+  name: 'Dugong'
+}, {
+  name: 'Dunlin'
+}, {
+  name: 'Eagle'
+}, {
+  name: 'Echidna'
+}, {
+  name: 'Eel'
+}, {
+  name: 'Eland'
+}, {
+  name: 'Elephant'
+}, {
+  name: 'Elk'
+}, {
+  name: 'Emu'
+}, {
+  name: 'Falcon'
+}, {
+  name: 'Ferret'
+}, {
+  name: 'Finch'
+}, {
+  name: 'Fish'
+}, {
+  name: 'Flamingo'
+}, {
+  name: 'Fly'
+}, {
+  name: 'Fox'
+}, {
+  name: 'Frog'
+}, {
+  name: 'Gaur'
+}, {
+  name: 'Gazelle'
+}, {
+  name: 'Gerbil'
+}, {
+  name: 'Giraffe'
+}, {
+  name: 'Gnat'
+}, {
+  name: 'Gnu'
+}, {
+  name: 'Goat'
+}, {
+  name: 'Goldfinch'
+}, {
+  name: 'Goldfish'
+}, {
+  name: 'Goose'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goshawk'
+}, {
+  name: 'Grasshopper'
+}, {
+  name: 'Grouse'
+}, {
+  name: 'Guanaco'
+}, {
+  name: 'Gull'
+}, {
+  name: 'Hamster'
+}, {
+  name: 'Hare'
+}, {
+  name: 'Hawk'
+}, {
+  name: 'Hedgehog'
+}, {
+  name: 'Heron'
+}, {
+  name: 'Herring'
+}, {
+  name: 'Hippopotamus'
+}, {
+  name: 'Hornet'
+}, {
+  name: 'Horse'
+}, {
+  name: 'Human'
+}, {
+  name: 'Hummingbird'
+}, {
+  name: 'Hyena'
+}, {
+  name: 'Ibex'
+}, {
+  name: 'Ibis'
+}, {
+  name: 'Jackal'
+}, {
+  name: 'Jaguar'
+}, {
+  name: 'Jay'
+}, {
+  name: 'Jellyfish'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Kingfisher'
+}, {
+  name: 'Koala'
+}, {
+  name: 'Kookabura'
+}, {
+  name: 'Kouprey'
+}, {
+  name: 'Kudu'
+}, {
+  name: 'Lapwing'
+}, {
+  name: 'Lark'
+}, {
+  name: 'Lemur'
+}, {
+  name: 'Leopard'
+}, {
+  name: 'Lion'
+}, {
+  name: 'Llama'
+}, {
+  name: 'Lobster'
+}, {
+  name: 'Locust'
+}, {
+  name: 'Loris'
+}, {
+  name: 'Louse'
+}, {
+  name: 'Lyrebird'
+}, {
+  name: 'Magpie'
+}, {
+  name: 'Mallard'
+}, {
+  name: 'Manatee'
+}, {
+  name: 'Mandrill'
+}, {
+  name: 'Mantis'
+}, {
+  name: 'Marten'
+}, {
+  name: 'Meerkat'
+}, {
+  name: 'Mink'
+}, {
+  name: 'Mole'
+}, {
+  name: 'Mongoose'
+}, {
+  name: 'Monkey'
+}, {
+  name: 'Moose'
+}, {
+  name: 'Mosquito'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Mule'
+}, {
+  name: 'Narwhal'
+}, {
+  name: 'Newt'
+}, {
+  name: 'Nightingale'
+}, {
+  name: 'Octopus'
+}, {
+  name: 'Okapi'
+}, {
+  name: 'Opossum'
+}, {
+  name: 'Oryx'
+}, {
+  name: 'Ostrich'
+}, {
+  name: 'Otter'
+}, {
+  name: 'Owl'
+}, {
+  name: 'Oyster'
+}, {
+  name: 'Panther'
+}, {
+  name: 'Parrot'
+}, {
+  name: 'Partridge'
+}, {
+  name: 'Peafowl'
+}, {
+  name: 'Pelican'
+}, {
+  name: 'Penguin'
+}, {
+  name: 'Pheasant'
+}, {
+  name: 'Pig'
+}, {
+  name: 'Pigeon'
+}, {
+  name: 'Pony'
+}, {
+  name: 'Porcupine'
+}, {
+  name: 'Porpoise'
+}, {
+  name: 'Quail'
+}, {
+  name: 'Quelea'
+}, {
+  name: 'Quetzal'
+}, {
+  name: 'Rabbit'
+}, {
+  name: 'Raccoon'
+}, {
+  name: 'Rail'
+}, {
+  name: 'Ram'
+}, {
+  name: 'Rat'
+}, {
+  name: 'Raven'
+}, {
+  name: 'Red deer'
+}, {
+  name: 'Red panda'
+}, {
+  name: 'Reindeer'
+}, {
+  name: 'Rhinoceros'
+}, {
+  name: 'Rook'
+}, {
+  name: 'Salamander'
+}, {
+  name: 'Salmon'
+}, {
+  name: 'Sand Dollar'
+}, {
+  name: 'Sandpiper'
+}, {
+  name: 'Sardine'
+}, {
+  name: 'Scorpion'
+}, {
+  name: 'Seahorse'
+}, {
+  name: 'Seal'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Sheep'
+}, {
+  name: 'Shrew'
+}, {
+  name: 'Skunk'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Sparrow'
+}, {
+  name: 'Spider'
+}, {
+  name: 'Spoonbill'
+}, {
+  name: 'Squid'
+}, {
+  name: 'Squirrel'
+}, {
+  name: 'Starling'
+}, {
+  name: 'Stingray'
+}, {
+  name: 'Stinkbug'
+}, {
+  name: 'Stork'
+}, {
+  name: 'Swallow'
+}, {
+  name: 'Swan'
+}, {
+  name: 'Tapir'
+}, {
+  name: 'Tarsier'
+}, {
+  name: 'Termite'
+}, {
+  name: 'Tiger'
+}, {
+  name: 'Toad'
+}, {
+  name: 'Trout'
+}, {
+  name: 'Turkey'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Viper'
+}, {
+  name: 'Vulture'
+}, {
+  name: 'Wallaby'
+}, {
+  name: 'Walrus'
+}, {
+  name: 'Wasp'
+}, {
+  name: 'Weasel'
+}, {
+  name: 'Whale'
+}, {
+  name: 'Wildcat'
+}, {
+  name: 'Wolf'
+}, {
+  name: 'Wolverine'
+}, {
+  name: 'Wombat'
+}, {
+  name: 'Woodcock'
+}, {
+  name: 'Woodpecker'
+}, {
+  name: 'Worm'
+}, {
+  name: 'Wren'
+}, {
+  name: 'Yak'
+}, {
+  name: 'Zebra'
+}];
 var props = {
   disabledKeys: ['Snake']
 };
@@ -129,61 +581,140 @@ export var Default = function Default(_ref2) {
   });
 };
 export var InfiniteLoadingList = function InfiniteLoadingList() {
+  var getMockData = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(signal, cursor) {
+      var pageNumber;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              pageNumber = 1;
+
+              if (cursor) {
+                pageNumber = Number(cursor.substr(_indexOfInstanceProperty(cursor).call(cursor, '-') + 1));
+              } // With this we will emulate load even with mocked API
+
+
+              _context.next = 4;
+              return new _Promise(function (resolve) {
+                return _setTimeout(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 4:
+              return _context.abrupt("return", {
+                items: _sliceInstanceProperty(animals).call(animals, (pageNumber - 1) * 10, pageNumber * 10),
+                cursor: "mock-".concat(pageNumber + 1)
+              });
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getMockData(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var fetchApiData = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(signal, cursor, filterText) {
+      var res, json;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return _Promise.race([// If no cursor is available, then we're loading the first page,
+              // filtering the results returned via a query string that
+              // mirrors the ComboBox input text.
+              // Otherwise, the cursor is the next URL to load,
+              // as returned from the previous page.
+              fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+                signal: signal
+              }), new _Promise(function (_resolve, reject) {
+                return _setTimeout(function () {
+                  return reject(new Error('timeout'));
+                }, 3000);
+              })]);
+
+            case 3:
+              res = _context2.sent;
+              _context2.next = 6;
+              return res.json();
+
+            case 6:
+              json = _context2.sent;
+              _context2.next = 9;
+              return new _Promise(function (resolve) {
+                return _setTimeout(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 9:
+              return _context2.abrupt("return", {
+                items: json.results,
+                cursor: json.next
+              });
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+              return _context2.abrupt("return", getMockData());
+
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 12]]);
+    }));
+
+    return function fetchApiData(_x3, _x4, _x5) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
   var list = useAsyncList({
-    load: function load(_ref3) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var signal, cursor, filterText, res, json;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+    load: function load(_ref5) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var signal, cursor, filterText;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
-                signal = _ref3.signal, cursor = _ref3.cursor, filterText = _ref3.filterText;
+                signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
 
                 if (cursor) {
                   // eslint-disable-next-line
-                  cursor = cursor.replace(/^http:\/\//i, 'https://');
-                } // If no cursor is available, then we're loading the first page,
-                // filtering the results returned via a query string that
-                // mirrors the ComboBox input text.
-                // Otherwise, the cursor is the next URL to load,
-                // as returned from the previous page.
+                  cursor = cursor.replace(/^http:\/\//i, "https://");
+                } // check if we are mocking pages
 
 
-                _context.next = 4;
-                return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
-                  signal: signal
-                });
+                if (!(cursor && _includesInstanceProperty(cursor).call(cursor, 'mock'))) {
+                  _context3.next = 4;
+                  break;
+                }
+
+                return _context3.abrupt("return", getMockData(signal, cursor, filterText));
 
               case 4:
-                res = _context.sent;
-                _context.next = 7;
-                return res.json();
-
-              case 7:
-                json = _context.sent;
-                _context.next = 10;
-                return new _Promise(function (resolve) {
-                  return _setTimeout(resolve, cursor ? 2000 : 3000);
-                });
-
-              case 10:
-                return _context.abrupt("return", {
-                  items: json.results,
-                  cursor: json.next
-                });
-
-              case 11:
+                return _context3.abrupt("return", fetchApiData(signal, cursor, filterText));
+
+              case 5:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
           }
-        }, _callee);
+        }, _callee3);
       }))();
     }
   });
   return ___EmotionJSX(Box, {
     sx: {
-      maxHeight: '600px'
+      maxHeight: '400px'
     }
   }, ___EmotionJSX(ListView, _extends({}, actions, {
     items: list.items,
@@ -198,8 +729,15 @@ export var InfiniteLoadingList = function InfiniteLoadingList() {
     }));
   }));
 };
-export var MultipleSelection = function MultipleSelection(_ref4) {
-  var args = _extends({}, _ref4);
+InfiniteLoadingList.parameters = {
+  docs: {
+    description: {
+      story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
+    }
+  }
+};
+export var MultipleSelection = function MultipleSelection(_ref6) {
+  var args = _extends({}, _ref6);
 
   return ___EmotionJSX(ListView, _extends({}, props, args, {
     items: items,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.0",
+  "version": "1.1.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",