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

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/lib/styles/variants/buttons.js

@@ -82,6 +82,10 @@ var iconButton = {
   }
 };
 
+var square = _objectSpread(_objectSpread({}, iconButton), {}, {
+  borderRadius: '2px'
+});
+
 var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   position: 'absolute',
   top: 14,
@@ -219,6 +223,10 @@ var inverted = _objectSpread(_objectSpread({}, iconButton), {}, {
   }
 });
 
+var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
+  borderRadius: '2px'
+});
+
 var applicationPortal = _objectSpread(_objectSpread({}, iconButton), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -510,6 +518,8 @@ export default {
   modalCloseButton: modalCloseButton,
   applicationPortalPinned: applicationPortalPinned,
   applicationPortal: applicationPortal,
+  square: square,
+  invertedSquare: invertedSquare,
   tooltipChip: tooltipChip,
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline

package/package.json

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