@pingux/astro 1.0.0-alpha.8 → 1.1.0-alpha.1

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

@@ -81,18 +81,19 @@ var collectionTypes = {
 exports.collectionTypes = collectionTypes;
 
 function useListLayout(state) {
+  var ROW_HEIGHT = 81;
   var collator = (0, _i18n.useCollator)({
     usage: 'search',
     sensitivity: 'base'
   });
   var layout = (0, _react.useMemo)(function () {
     return new _layout.ListLayout({
-      estimatedRowHeight: 81,
+      estimatedRowHeight: ROW_HEIGHT,
       estimatedHeadingHeight: 26,
       paddingRight: 4,
       paddingLeft: 4,
-      loaderHeight: 81,
-      placeholderHeight: 81,
+      loaderHeight: ROW_HEIGHT,
+      placeholderHeight: ROW_HEIGHT,
       collator: collator
     });
   }, [collator]);

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/cjs/components/ListViewItem/ListViewItem.js

@@ -32,8 +32,6 @@ var _ListViewContext = require("../ListView/ListViewContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Separator = _interopRequireDefault(require("../Separator"));
-
 var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
@@ -90,7 +88,8 @@ var ListViewItem = function ListViewItem(props) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isHovered,
     isSelected: isSelected,
-    isFocused: isDisabled ? false : isFocusVisible
+    isFocused: isDisabled ? false : isFocusVisible,
+    hasSeparator: hasSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -111,9 +110,7 @@ var ListViewItem = function ListViewItem(props) {
     isSelected: isSelected,
     className: classNames,
     "data-id": dataId
-  }, listItemProps), item.rendered)), hasSeparator && (0, _react2.jsx)(_Separator["default"], {
-    m: "0px"
-  }));
+  }, listItemProps), item.rendered)));
 };
 
 ListViewItem.propTypes = {