@pingux/astro 2.121.0-alpha.0 → 2.121.0-alpha.2

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

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.animals = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
+exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
@@ -38,12 +38,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
+var _ClockTimeEightOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/ClockTimeEightOutlineIcon"));
+var _CogIcon = _interopRequireDefault(require("@pingux/mdi-react/CogIcon"));
 var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
 var _addonActions = require("@storybook/addon-actions");
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _2 = require("../..");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _animals = _interopRequireDefault(require("../../utils/devUtils/constants/animals"));
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _chartData = require("../ListViewItem/controls/chart/chartData");
 var _ListView = _interopRequireDefault(require("./ListView.mdx"));
@@ -79,466 +82,30 @@ var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
   id: '1',
-  hasSeparator: false
+  icon: _CogIcon["default"],
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'blue'
+  }
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',
-  id: '2'
+  id: '2',
+  icon: _ClockTimeEightOutlineIcon["default"],
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'green'
+  }
 }, {
   key: 'Snake',
   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'
+  id: '3',
+  icon: _FormSelectIcon["default"],
+  iconWrapperProps: {
+    size: 'sm',
+    color: 'indigo'
+  }
 }];
-exports.animals = animals;
 var props = {
   disabledKeys: ['Snake']
 };
@@ -593,11 +160,12 @@ var Default = function Default(_ref) {
     }, (0, _react2.jsx)(_2.ListViewItem, {
       data: {
         text: item.name,
-        icon: _FormSelectIcon["default"]
+        icon: item.icon
       },
       iconProps: {
         color: 'text.secondary'
-      }
+      },
+      iconWrapperProps: item.iconWrapperProps
     }, (0, _react2.jsx)(Controls, null)));
   });
 };
@@ -646,7 +214,8 @@ var ControlledExpandableItems = function ControlledExpandableItems(_ref3) {
   return (0, _react2.jsx)(_2.Box, null, (0, _react2.jsx)(_2.Button, {
     onPress: function onPress() {
       expandAllKeys();
-    }
+    },
+    mb: "lg"
   }, "Expand all"), (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, props, args, {
     items: items,
     expandedKeys: expandedKeys,
@@ -684,7 +253,7 @@ var InfiniteLoadingList = function InfiniteLoadingList(args) {
             });
           case 5:
             return _context.abrupt("return", {
-              items: (0, _slice["default"])(animals).call(animals, (pageNumber - 1) * 10, pageNumber * 10),
+              items: (0, _slice["default"])(_animals["default"]).call(_animals["default"], (pageNumber - 1) * 10, pageNumber * 10),
               cursor: "mock-".concat(pageNumber + 1)
             });
           case 6:

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

@@ -78,6 +78,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
       ml: 'auto'
     },
     icon: isExpanded ? MenuUp : MenuDown,
+    variant: "listViewItem.expandIcon",
     title: {
       name: "".concat(key, " expand icon button")
     }

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

@@ -88,7 +88,9 @@ var ListViewItem = function ListViewItem(props) {
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
       hasInsetSeparator: hasInsetSeparator,
-      isPressed: isPressed
+      isPressed: isPressed,
+      isFirstItem: item.index === 0,
+      isLastItem: item.index === state.collection.size - 1
     }),
     classNames = _useStatusClasses.classNames;
 
@@ -124,6 +126,7 @@ var ListViewItem = function ListViewItem(props) {
 };
 ListViewItem.propTypes = {
   item: _propTypes["default"].shape({
+    index: _propTypes["default"].number,
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,
     props: _propTypes["default"].shape({

package/lib/cjs/{styles/themes/next-gen/stories/NextGenListView.chromatic.stories.js → components/ListView/stories/ListView.chromatic.stories.js}

@@ -7,11 +7,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _ = require("../../../..");
+var _ = require("../../..");
 var _ListViewNextGenComponent = require("./ListViewNextGenComponent");
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Chromatic Only Onyx ListView'
+  title: 'Onyx ListView'
 };
 exports["default"] = _default;
 var Default = function Default() {