@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

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

@@ -23,7 +23,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.ControlledExpandableItems = void 0;
+exports["default"] = exports.WithExpandableItems = exports.WithCharts = exports.OnyxDefaultEmptyState = exports.OnLoadPrev = exports.InfiniteLoadingList = exports.Default = exports.CustomRenderEmptyState = exports.ControlledExpandableItems = exports.AstroEmptyList = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 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"));
@@ -32,11 +37,6 @@ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-j
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
@@ -50,11 +50,13 @@ var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/s
 var _2 = require("../..");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _animals = _interopRequireDefault(require("../../utils/devUtils/constants/animals"));
+var _images = require("../../utils/devUtils/constants/images");
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _chartData = require("../ListViewItem/controls/chart/chartData");
 var _ListView = _interopRequireDefault(require("./ListView.mdx"));
 var _listViewAttributes = require("./listViewAttributes");
 var _react2 = require("@emotion/react");
+var _context;
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
@@ -66,7 +68,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context12 = ownKeys(Object(t), !0)).call(_context12, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context13 = ownKeys(Object(t))).call(_context13, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context13, _context14; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context13 = ownKeys(Object(t), !0)).call(_context13, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context14 = ownKeys(Object(t))).call(_context14, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports["default"] = {
   title: 'Components/ListView',
   component: _2.ListView,
@@ -90,7 +92,7 @@ var _default = exports["default"] = {
 var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
-  id: '1',
+  id: '11111111111',
   icon: _CogIcon["default"],
   iconWrapperProps: {
     size: 'sm',
@@ -99,7 +101,7 @@ var items = [{
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',
-  id: '2',
+  id: '1111111',
   icon: _ClockTimeEightOutlineIcon["default"],
   iconWrapperProps: {
     size: 'sm',
@@ -115,6 +117,16 @@ var items = [{
     color: 'indigo'
   }
 }];
+var defaultStoryItems = (0, _concat["default"])(_context = []).call(_context, items, [{
+  key: 'Panda',
+  name: 'Panda',
+  id: '4',
+  image: {
+    src: _images.userImage,
+    alt: 'avatar',
+    'aria-label': 'avatar'
+  }
+}]);
 var props = {
   disabledKeys: ['Snake']
 };
@@ -145,7 +157,7 @@ var ExampleContent = function ExampleContent(contentProps) {
       alignItems: 'center'
     },
     gap: "lg"
-  }, (0, _react2.jsx)(_2.IconWrapper, {
+  }, icon && (0, _react2.jsx)(_2.IconWrapper, {
     icon: icon,
     size: "sm",
     title: {
@@ -176,19 +188,17 @@ var Controls = function Controls() {
 var Default = exports.Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return (0, _react2.jsx)(_2.ListView, (0, _extends2["default"])({}, props, args, {
-    items: items
+    items: defaultStoryItems
   }), function (item) {
     return (0, _react2.jsx)(_2.Item, {
       key: item.name
     }, (0, _react2.jsx)(_2.ListViewItem, {
       data: {
         text: item.name,
-        icon: item.icon
-      },
-      iconProps: {
-        color: 'text.secondary'
+        icon: item.icon,
+        image: item.image
       },
-      iconWrapperProps: item.iconWrapperProps
+      colorId: item.id
     }, (0, _react2.jsx)(Controls, null)));
   });
 };
@@ -257,8 +267,8 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
   var getMockData = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(signal, cursor) {
       var pageNumber;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regeneratorRuntime().wrap(function _callee$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             pageNumber = 1;
             if (cursor) {
@@ -266,21 +276,21 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
             }
             // With this we will emulate load even with mocked API, except for Chromatic runs
             if (args.useMockData) {
-              _context.next = 5;
+              _context2.next = 5;
               break;
             }
-            _context.next = 5;
+            _context2.next = 5;
             return new _promise["default"](function (resolve) {
               return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
             });
           case 5:
-            return _context.abrupt("return", {
+            return _context2.abrupt("return", {
               items: (0, _slice["default"])(_animals["default"]).call(_animals["default"], (pageNumber - 1) * 10, pageNumber * 10),
               cursor: "mock-".concat(pageNumber + 1)
             });
           case 6:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
       }, _callee);
     }));
@@ -291,17 +301,17 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
   var fetchApiData = /*#__PURE__*/function () {
     var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(signal, cursor, filterText) {
       var res, json;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             if (!args.useMockData) {
-              _context2.next = 2;
+              _context3.next = 2;
               break;
             }
-            return _context2.abrupt("return", getMockData(null, null));
+            return _context3.abrupt("return", getMockData(null, null));
           case 2:
-            _context2.prev = 2;
-            _context2.next = 5;
+            _context3.prev = 2;
+            _context3.next = 5;
             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
@@ -316,27 +326,27 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
               }, 8000);
             })]);
           case 5:
-            res = _context2.sent;
-            _context2.next = 8;
+            res = _context3.sent;
+            _context3.next = 8;
             return res.json();
           case 8:
-            json = _context2.sent;
-            _context2.next = 11;
+            json = _context3.sent;
+            _context3.next = 11;
             return new _promise["default"](function (resolve) {
               return (0, _setTimeout2["default"])(resolve, cursor ? 8000 : 8000);
             });
           case 11:
-            return _context2.abrupt("return", {
+            return _context3.abrupt("return", {
               items: json.results,
               cursor: json.next
             });
           case 14:
-            _context2.prev = 14;
-            _context2.t0 = _context2["catch"](2);
-            return _context2.abrupt("return", getMockData(null, null));
+            _context3.prev = 14;
+            _context3.t0 = _context3["catch"](2);
+            return _context3.abrupt("return", getMockData(null, null));
           case 17:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
       }, _callee2, null, [[2, 14]]);
     }));
@@ -348,8 +358,8 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
     load: function load(_ref6) {
       return (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         var signal, cursor, filterText;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regeneratorRuntime().wrap(function _callee3$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               signal = _ref6.signal, cursor = _ref6.cursor, filterText = _ref6.filterText;
               if (cursor) {
@@ -359,15 +369,15 @@ var InfiniteLoadingList = exports.InfiniteLoadingList = function InfiniteLoading
 
               // check if we are mocking pages
               if (!(cursor && (0, _includes["default"])(cursor).call(cursor, 'mock'))) {
-                _context3.next = 4;
+                _context4.next = 4;
                 break;
               }
-              return _context3.abrupt("return", getMockData(signal, cursor));
+              return _context4.abrupt("return", getMockData(signal, cursor));
             case 4:
-              return _context3.abrupt("return", fetchApiData(signal, cursor, filterText));
+              return _context4.abrupt("return", fetchApiData(signal, cursor, filterText));
             case 5:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }, _callee3);
       }))();
@@ -460,11 +470,11 @@ WithCharts.parameters = {
   }
 };
 var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
-  var _context4, _context5;
-  var initialItems = (0, _map["default"])(_context4 = (0, _fill["default"])(_context5 = new Array(10)).call(_context5, {
+  var _context5, _context6;
+  var initialItems = (0, _map["default"])(_context5 = (0, _fill["default"])(_context6 = new Array(10)).call(_context6, {
     key: 'string',
     name: 'string'
-  })).call(_context4, function (_, index) {
+  })).call(_context5, function (_, index) {
     return {
       name: "name: ".concat(index),
       key: "name: ".concat(index),
@@ -489,21 +499,21 @@ var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
     setLoadingState = _useState0[1];
   var onLoadMore = /*#__PURE__*/function () {
     var _ref8 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-      var _context6, _context7, _context8;
+      var _context7, _context8, _context9;
       var newItems;
-      return _regeneratorRuntime().wrap(function _callee4$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+      return _regeneratorRuntime().wrap(function _callee4$(_context0) {
+        while (1) switch (_context0.prev = _context0.next) {
           case 0:
             setLoadingState(_loadingStates["default"].LOADING_MORE);
-            _context9.next = 3;
+            _context0.next = 3;
             return new _promise["default"](function (resolve) {
               return (0, _setTimeout2["default"])(resolve, 3000);
             });
           case 3:
-            newItems = (0, _map["default"])(_context6 = (0, _fill["default"])(_context7 = new Array(10)).call(_context7, {
+            newItems = (0, _map["default"])(_context7 = (0, _fill["default"])(_context8 = new Array(10)).call(_context8, {
               key: 'string',
               name: 'string'
-            })).call(_context6, function (_, index) {
+            })).call(_context7, function (_, index) {
               return {
                 name: "name: ".concat(maxNum + index),
                 key: "name: ".concat(maxNum + index),
@@ -511,11 +521,11 @@ var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
               };
             });
             setMaxNum(maxNum + 10);
-            setListItems((0, _concat["default"])(_context8 = []).call(_context8, listItems, newItems));
+            setListItems((0, _concat["default"])(_context9 = []).call(_context9, listItems, newItems));
             setLoadingState(_loadingStates["default"].IDLE);
           case 7:
           case "end":
-            return _context9.stop();
+            return _context0.stop();
         }
       }, _callee4);
     }));
@@ -525,21 +535,21 @@ var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
   }();
   var onLoadPrev = /*#__PURE__*/function () {
     var _ref9 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      var _context0, _context1, _context10;
+      var _context1, _context10, _context11;
       var newItems;
-      return _regeneratorRuntime().wrap(function _callee5$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
+      return _regeneratorRuntime().wrap(function _callee5$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
             setLoadingState(_loadingStates["default"].LOADING_MORE_PREPEND);
-            _context11.next = 3;
+            _context12.next = 3;
             return new _promise["default"](function (resolve) {
               return (0, _setTimeout2["default"])(resolve, 3000);
             });
           case 3:
-            newItems = (0, _map["default"])(_context0 = (0, _fill["default"])(_context1 = new Array(10)).call(_context1, {
+            newItems = (0, _map["default"])(_context1 = (0, _fill["default"])(_context10 = new Array(10)).call(_context10, {
               key: 'string',
               name: 'string'
-            })).call(_context0, function (_, index) {
+            })).call(_context1, function (_, index) {
               return {
                 name: "name: ".concat(minNum - (index + 1)),
                 key: "name: ".concat(minNum - (index + 1)),
@@ -547,11 +557,11 @@ var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
               };
             });
             setMinNum(minNum - 10);
-            setListItems((0, _concat["default"])(_context10 = []).call(_context10, newItems, listItems));
+            setListItems((0, _concat["default"])(_context11 = []).call(_context11, newItems, listItems));
             setLoadingState(_loadingStates["default"].IDLE);
           case 7:
           case "end":
-            return _context11.stop();
+            return _context12.stop();
         }
       }, _callee5);
     }));
@@ -581,4 +591,42 @@ var OnLoadPrev = exports.OnLoadPrev = function OnLoadPrev() {
       }
     }, (0, _react2.jsx)(Controls, null)));
   }));
+};
+var OnyxDefaultEmptyState = exports.OnyxDefaultEmptyState = function OnyxDefaultEmptyState() {
+  return (0, _react2.jsx)(_2.Box, {
+    height: "300px"
+  }, (0, _react2.jsx)(_2.ListView, {
+    items: [],
+    "aria-label": "Empty Onyx ListView"
+  }));
+};
+var AstroEmptyList = exports.AstroEmptyList = function AstroEmptyList() {
+  return (0, _react2.jsx)(_2.Box, {
+    height: "300px"
+  }, (0, _react2.jsx)(_2.ListView, {
+    items: [],
+    "aria-label": "Empty Astro ListView"
+  }));
+};
+var CustomRenderEmptyState = exports.CustomRenderEmptyState = function CustomRenderEmptyState() {
+  return (0, _react2.jsx)(_2.Box, {
+    height: "300px"
+  }, (0, _react2.jsx)(_2.ListView, {
+    items: [],
+    "aria-label": "ListView with a custom empty state",
+    renderEmptyState: function renderEmptyState() {
+      return (0, _react2.jsx)(_2.EmptyState, {
+        heading: "No results",
+        description: "Try adjusting your search."
+      }, (0, _react2.jsx)(_2.Button, {
+        variant: "primary",
+        sx: {
+          mt: 'md'
+        },
+        onPress: function onPress() {
+          return (0, _actions.action)('Add Item pressed')();
+        }
+      }, "Add Item"));
+    }
+  }));
 };

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

@@ -32,6 +32,8 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _lodash = _interopRequireDefault(require("lodash"));
+var _nextGenDarkMode = _interopRequireDefault(require("../../styles/themeOverrides/nextGenDarkMode"));
+var _nextGen = _interopRequireDefault(require("../../styles/themes/next-gen"));
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
@@ -444,6 +446,84 @@ test('renders neither loader nor item if the component is given no items nor a l
   expect(_testWrapper.screen.queryByRole('progressbar')).not.toBeInTheDocument();
   expect(_testWrapper.screen.queryByRole('gridcell')).not.toBeInTheDocument();
 });
+test.each([['Onyx', _nextGen["default"]], ['Onyx dark', _nextGenDarkMode["default"]]])('empty ListView renders the default EmptyState in the %s theme', function (_themeName, providerTheme) {
+  getComponentEmpty({}, {
+    renderFn: function renderFn(ui) {
+      return (0, _testWrapper.render)(ui, {
+        providerTheme: providerTheme
+      });
+    }
+  });
+  expect(_testWrapper.screen.getByText('No items exist')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('button')).not.toBeInTheDocument();
+});
+test('empty ListView renders nothing in the Astro theme', function () {
+  getComponentEmpty();
+  expect(_testWrapper.screen.queryByText('No items exist')).not.toBeInTheDocument();
+});
+test('empty ListView renders the custom renderEmptyState in the Astro theme', function () {
+  getComponentEmpty({
+    renderEmptyState: function renderEmptyState() {
+      return (0, _react2.jsx)("div", {
+        "data-testid": "custom-empty"
+      }, "No items");
+    }
+  });
+  expect(_testWrapper.screen.getByTestId('custom-empty')).toBeInTheDocument();
+});
+test.each([['Onyx', _nextGen["default"]], ['Onyx dark', _nextGenDarkMode["default"]]])('renderEmptyState takes priority over the default EmptyState in the %s theme', function (_themeName, providerTheme) {
+  getComponentEmpty({
+    renderEmptyState: function renderEmptyState() {
+      return (0, _react2.jsx)("div", {
+        "data-testid": "custom-empty"
+      }, "No items");
+    }
+  }, {
+    renderFn: function renderFn(ui) {
+      return (0, _testWrapper.render)(ui, {
+        providerTheme: providerTheme
+      });
+    }
+  });
+  expect(_testWrapper.screen.getByTestId('custom-empty')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText('No items exist')).not.toBeInTheDocument();
+});
+test('populated ListView renders its items in the Onyx theme', function () {
+  getComponent({}, {
+    renderFn: function renderFn(ui) {
+      return (0, _testWrapper.render)(ui, {
+        providerTheme: _nextGen["default"]
+      });
+    }
+  });
+  var options = _testWrapper.screen.getAllByRole('gridcell');
+  expect(options).toHaveLength(items.length);
+  expect(options[0]).toHaveAttribute('data-id', items[0].name);
+});
+test('loading ListView does not render the default EmptyState in the Onyx theme', function () {
+  getComponentEmpty({
+    loadingState: _loadingStates["default"].LOADING
+  }, {
+    renderFn: function renderFn(ui) {
+      return (0, _testWrapper.render)(ui, {
+        providerTheme: _nextGen["default"]
+      });
+    }
+  });
+  expect(_testWrapper.screen.getByRole('alert')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText('No items exist')).not.toBeInTheDocument();
+});
+test('loading ListView does not render renderEmptyState', function () {
+  getComponentEmpty({
+    loadingState: _loadingStates["default"].LOADING,
+    renderEmptyState: function renderEmptyState() {
+      return (0, _react2.jsx)("div", {
+        "data-testid": "custom-empty"
+      }, "No items");
+    }
+  });
+  expect(_testWrapper.screen.queryByTestId('custom-empty')).not.toBeInTheDocument();
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var options = _testWrapper.screen.getAllByRole('gridcell');

package/lib/cjs/components/ListView/ListViewTypes.d.ts

@@ -9,4 +9,9 @@ export interface ExampleItemProps {
     hasSeparator?: boolean;
     icon?: React.ElementType;
     iconWrapperProps?: IconWrapperProps;
+    image?: {
+        src: string;
+        alt: string;
+        'aria-label': string;
+    };
 }

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

@@ -1,9 +1,15 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -11,6 +17,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.LIST_ITEM_ICON = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _interactions = require("@react-aria/interactions");
@@ -19,8 +26,10 @@ var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _listViewItemAttributes = require("./listViewItemAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "data", "iconProps", "iconWrapperProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
+var _excluded = ["children", "className", "data", "iconProps", "iconWrapperProps", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots", "colorId"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LIST_ITEM_ICON = exports.LIST_ITEM_ICON = '-list-item-icon';
 var displayName = 'ListViewItem';
 var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -37,6 +46,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onHoverEnd = _ref.onHoverEnd,
     onHoverStart = _ref.onHoverStart,
     slots = _ref.slots,
+    colorId = _ref.colorId,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var icon = data.icon,
     image = data.image,
@@ -69,8 +79,12 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, LIST_ITEM_ICON)
     },
     isCircle: true,
-    colorId: others.id
-  }, iconWrapperProps)) : (0, _react2.jsx)(_.Box, {
+    colorId: colorId || others.id
+  }, iconWrapperProps, {
+    iconProps: _objectSpread(_objectSpread({
+      size: 'sm'
+    }, iconProps), iconWrapperProps === null || iconWrapperProps === void 0 ? void 0 : iconWrapperProps.iconProps)
+  })) : (0, _react2.jsx)(_.Box, {
     width: "25px",
     variant: "listViewItem.iconContainer"
   }, (0, _react2.jsx)(_.Icon, (0, _extends2["default"])({
@@ -81,13 +95,20 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context2 = "".concat(text)).call(_context2, LIST_ITEM_ICON)
     }
   }, iconProps))));
-  var renderImage = !icon && image && (0, _react2.jsx)(_.Box, {
+  var renderImage = !icon && image && (isOnyx ? (0, _react2.jsx)(_.Box, {
+    variant: "listViewItem.imageContainer"
+  }, (0, _react2.jsx)(_.Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label'],
+    variant: "images.avatar"
+  })) : (0, _react2.jsx)(_.Box, {
     width: "35px"
   }, (0, _react2.jsx)(_.Image, {
     src: image.src,
     alt: image.alt,
     "aria-label": image['aria-label']
-  }));
+  })));
   var renderData = (0, _react2.jsx)(_.Box, {
     isRow: true,
     alignItems: "center"

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

@@ -65,10 +65,7 @@ var Default = exports.Default = function Default() {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall'
     },
-    iconWrapperProps: {
-      size: 'sm',
-      color: 'blue'
-    }
+    colorId: "11111111111"
   }));
 };
 Default.parameters = {
@@ -100,7 +97,7 @@ var WithImage = exports.WithImage = function WithImage() {
   return (0, _react2.jsx)(Wrapper, null, (0, _react2.jsx)(_.ListViewItem, {
     data: {
       image: {
-        src: _images.userImagePanelHeader,
+        src: _images.userImage,
         alt: 'avatar',
         'aria-label': 'avatar'
       },

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

@@ -110,6 +110,12 @@ var iconWrapper = {
 var imageWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
   ml: 'sm'
 });
+var imageContainer = {
+  width: '35px',
+  flexShrink: 0,
+  display: 'flex',
+  justifyContent: 'center'
+};
 var leftOfDataWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
   ml: 0
 });
@@ -159,6 +165,7 @@ var _default = exports["default"] = {
   container: container,
   controls: controls,
   iconWrapper: iconWrapper,
+  imageContainer: imageContainer,
   imageWrapper: imageWrapper,
   leftOfDataWrapper: leftOfDataWrapper,
   linkedViewContainer: linkedViewContainer,