@pingux/astro 2.194.0 → 2.195.0-alpha.0

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -20,7 +20,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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 _context56, _context57; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context56 = ownKeys(Object(t), !0)).call(_context56, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context57 = ownKeys(Object(t))).call(_context57, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context57, _context58; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context57 = ownKeys(Object(t), !0)).call(_context57, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context58 = ownKeys(Object(t))).call(_context58, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 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"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -79,6 +79,15 @@ var withSection = [{
     key: 'Option B3'
   }]
 }];
+var longLabelItems = [{
+  id: 10,
+  name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
+  key: 'LongLabelItem'
+}, {
+  id: 11,
+  name: 'Short',
+  key: 'ShortLabelItem'
+}];
 var labelText = 'Field Label';
 var defaultProps = {
   items: items,
@@ -137,6 +146,21 @@ var getSectionsComponent = function getSectionsComponent() {
     });
   })));
 };
+var getLongLabelComponent = function getLongLabelComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref4$renderFn = _ref4.renderFn,
+    renderFn = _ref4$renderFn === void 0 ? render : _ref4$renderFn;
+  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
+    items: longLabelItems,
+    label: "Field Label",
+    defaultSelectedKeys: ['LongLabelItem', 'ShortLabelItem']
+  }, props), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key
+    }, item.name);
+  })));
+};
 var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
   var _context, _context2;
   var initialItems = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = new Array(10)).call(_context2, {
@@ -149,13 +173,12 @@ var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
       id: index
     };
   });
-  // eslint-disable-next-line no-unused-vars
   var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
     listItems = _useState2[0],
     setListItems = _useState2[1];
   var onLoadMore = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -167,11 +190,11 @@ var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
       }, _callee);
     }));
     return function onLoadMore() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var onLoadPrev = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       return _regeneratorRuntime().wrap(function _callee2$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -183,7 +206,7 @@ var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
       }, _callee2);
     }));
     return function onLoadPrev() {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
@@ -1031,11 +1054,11 @@ test('read only keys', function () {
   var firstBadge = screen.getByText(items[1].name);
   var deleteButton1 = firstBadge.nextSibling;
   expect(firstBadge).toBeInTheDocument();
-  expect(deleteButton1).toBeNull();
+  expect(deleteButton1).not.toBeInTheDocument();
   var secondBadge = screen.getByText(items[2].name);
   expect(secondBadge).toBeInTheDocument();
   var deleteButton2 = firstBadge.nextSibling;
-  expect(deleteButton2).toBeNull();
+  expect(deleteButton2).not.toBeInTheDocument();
 });
 test('passing helper text should display it and correct aria attributes on input', function () {
   var testHelperText = 'testHelperText';
@@ -1641,23 +1664,7 @@ test('default selected keys in condensed mode ', function () {
   expect(listbox).not.toBeInTheDocument();
   expect(screen.getByText('2 Selected')).toBeInTheDocument();
 });
-test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', function () {
-  var onInputChange = jest.fn();
-  getComponent({
-    mode: 'condensed',
-    defaultSelectedKeys: [items[1].key, items[2].key],
-    onInputChange: onInputChange
-  });
-  var input = screen.getByRole('combobox');
-  var value = 'Aardvark';
-  userEvent.type(input, value);
-  var listbox = screen.getByRole('listbox');
-  expect(listbox).toBeInTheDocument();
-  var options = within(listbox).getAllByRole('option');
-  expect(options.length).toBe(1);
-  expect(screen.getByText('2 Selected')).toBeInTheDocument();
-});
-test('onInputChange is called in condensed mode ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee43() {
+test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee43() {
   var onInputChange, input, value, listbox, options;
   return _regeneratorRuntime().wrap(function _callee43$(_context45) {
     while (1) switch (_context45.prev = _context45.next) {
@@ -1665,6 +1672,7 @@ test('onInputChange is called in condensed mode ', /*#__PURE__*/_asyncToGenerato
         onInputChange = jest.fn();
         getComponent({
           mode: 'condensed',
+          defaultSelectedKeys: [items[1].key, items[2].key],
           onInputChange: onInputChange
         });
         input = screen.getByRole('combobox');
@@ -1676,18 +1684,44 @@ test('onInputChange is called in condensed mode ', /*#__PURE__*/_asyncToGenerato
         expect(listbox).toBeInTheDocument();
         options = within(listbox).getAllByRole('option');
         expect(options.length).toBe(1);
-        expect(onInputChange).toBeCalledTimes(value.length);
-        expect(onInputChange).toHaveBeenCalledWith(value);
-      case 12:
+        expect(screen.getByText('2 Selected')).toBeInTheDocument();
+      case 11:
       case "end":
         return _context45.stop();
     }
   }, _callee43);
 })));
-test('opens listbox on focus and fires "onFocus', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee44() {
-  var onFocus, input, options;
+test('onInputChange is called in condensed mode ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee44() {
+  var onInputChange, input, value, listbox, options;
   return _regeneratorRuntime().wrap(function _callee44$(_context46) {
     while (1) switch (_context46.prev = _context46.next) {
+      case 0:
+        onInputChange = jest.fn();
+        getComponent({
+          mode: 'condensed',
+          onInputChange: onInputChange
+        });
+        input = screen.getByRole('combobox');
+        value = 'Aardvark';
+        _context46.next = 6;
+        return userEvent.type(input, value);
+      case 6:
+        listbox = screen.getByRole('listbox');
+        expect(listbox).toBeInTheDocument();
+        options = within(listbox).getAllByRole('option');
+        expect(options.length).toBe(1);
+        expect(onInputChange).toBeCalledTimes(value.length);
+        expect(onInputChange).toHaveBeenCalledWith(value);
+      case 12:
+      case "end":
+        return _context46.stop();
+    }
+  }, _callee44);
+})));
+test('opens listbox on focus and fires "onFocus', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee45() {
+  var onFocus, input, options;
+  return _regeneratorRuntime().wrap(function _callee45$(_context47) {
+    while (1) switch (_context47.prev = _context47.next) {
       case 0:
         onFocus = jest.fn();
         getComponent({
@@ -1695,7 +1729,7 @@ test('opens listbox on focus and fires "onFocus', /*#__PURE__*/_asyncToGenerator
           onFocus: onFocus
         });
         input = screen.getByRole('combobox');
-        _context46.next = 5;
+        _context47.next = 5;
         return userEvent.tab();
       case 5:
         expect(input).toHaveFocus();
@@ -1706,14 +1740,14 @@ test('opens listbox on focus and fires "onFocus', /*#__PURE__*/_asyncToGenerator
         expect(onFocus).toBeCalled();
       case 11:
       case "end":
-        return _context46.stop();
+        return _context47.stop();
     }
-  }, _callee44);
+  }, _callee45);
 })));
-test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee45() {
+test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee46() {
   var onBlur, input;
-  return _regeneratorRuntime().wrap(function _callee45$(_context47) {
-    while (1) switch (_context47.prev = _context47.next) {
+  return _regeneratorRuntime().wrap(function _callee46$(_context48) {
+    while (1) switch (_context48.prev = _context48.next) {
       case 0:
         onBlur = jest.fn();
         getComponent({
@@ -1721,7 +1755,7 @@ test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/_asyncToGenerator
           onBlur: onBlur
         });
         input = screen.getByRole('combobox');
-        _context47.next = 5;
+        _context48.next = 5;
         return userEvent.tab();
       case 5:
         expect(input).toHaveFocus();
@@ -1733,19 +1767,19 @@ test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/_asyncToGenerator
         expect(onBlur).toBeCalled();
       case 10:
       case "end":
-        return _context47.stop();
+        return _context48.stop();
     }
-  }, _callee45);
+  }, _callee46);
 })));
-test('list and button are keyboard accessible', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee46() {
+test('list and button are keyboard accessible', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee47() {
   var listbox, options, firstOption, secondOption, buttons, button;
-  return _regeneratorRuntime().wrap(function _callee46$(_context48) {
-    while (1) switch (_context48.prev = _context48.next) {
+  return _regeneratorRuntime().wrap(function _callee47$(_context49) {
+    while (1) switch (_context49.prev = _context49.next) {
       case 0:
         getComponent({
           mode: 'condensed'
         });
-        _context48.next = 3;
+        _context49.next = 3;
         return userEvent.tab();
       case 3:
         listbox = screen.getByRole('listbox');
@@ -1754,15 +1788,15 @@ test('list and button are keyboard accessible', /*#__PURE__*/_asyncToGenerator(/
         secondOption = options[1];
         buttons = screen.getAllByRole('button');
         button = buttons[1];
-        _context48.next = 11;
+        _context49.next = 11;
         return userEvent.tab();
       case 11:
         expect(button).toHaveFocus();
-        _context48.next = 14;
+        _context49.next = 14;
         return userEvent.tab();
       case 14:
         expect(firstOption).toHaveFocus();
-        _context48.next = 17;
+        _context49.next = 17;
         return userEvent.type(firstOption, '{arrowdown}', {
           skipClick: true
         });
@@ -1770,14 +1804,14 @@ test('list and button are keyboard accessible', /*#__PURE__*/_asyncToGenerator(/
         expect(secondOption).toHaveFocus();
       case 18:
       case "end":
-        return _context48.stop();
+        return _context49.stop();
     }
-  }, _callee46);
+  }, _callee47);
 })));
-test('popover closes on input blur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee47() {
+test('popover closes on input blur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee48() {
   var input, listbox, options, checkboxes, secondOption, value;
-  return _regeneratorRuntime().wrap(function _callee47$(_context49) {
-    while (1) switch (_context49.prev = _context49.next) {
+  return _regeneratorRuntime().wrap(function _callee48$(_context50) {
+    while (1) switch (_context50.prev = _context50.next) {
       case 0:
         getComponent({
           mode: 'condensed'
@@ -1785,7 +1819,7 @@ test('popover closes on input blur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
         expect(screen.queryByRole('option')).not.toBeInTheDocument();
         input = screen.getByRole('combobox');
-        _context49.next = 6;
+        _context50.next = 6;
         return userEvent.click(input);
       case 6:
         listbox = screen.getByRole('listbox');
@@ -1793,54 +1827,54 @@ test('popover closes on input blur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*
         checkboxes = within(listbox).getAllByRole('img');
         expect(checkboxes.length).toBe(3);
         secondOption = options[1];
-        _context49.next = 13;
+        _context50.next = 13;
         return userEvent.click(secondOption);
       case 13:
         value = 'Aardvark';
-        _context49.next = 16;
+        _context50.next = 16;
         return userEvent.type(input, value);
       case 16:
-        _context49.next = 18;
+        _context50.next = 18;
         return userEvent.click(document.body);
       case 18:
         expect(input).toHaveValue('');
         expect(listbox).not.toBeInTheDocument();
       case 20:
       case "end":
-        return _context49.stop();
+        return _context50.stop();
     }
-  }, _callee47);
+  }, _callee48);
 })));
-test('trigger button handles popover open and close in condensed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee48() {
+test('trigger button handles popover open and close in condensed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee49() {
   var input;
-  return _regeneratorRuntime().wrap(function _callee48$(_context50) {
-    while (1) switch (_context50.prev = _context50.next) {
+  return _regeneratorRuntime().wrap(function _callee49$(_context51) {
+    while (1) switch (_context51.prev = _context51.next) {
       case 0:
         getComponent({
           mode: 'condensed'
         });
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
         input = screen.getByRole('combobox');
-        _context50.next = 5;
+        _context51.next = 5;
         return userEvent.click(screen.getAllByRole('button')[0]);
       case 5:
         expect(screen.queryByRole('listbox')).toBeInTheDocument();
         expect(input).toHaveFocus();
-        _context50.next = 9;
+        _context51.next = 9;
         return userEvent.tab();
       case 9:
         fireEvent.click(screen.getAllByRole('button')[0]);
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
       case 11:
       case "end":
-        return _context50.stop();
+        return _context51.stop();
     }
-  }, _callee48);
+  }, _callee49);
 })));
-test('renders items with duplicate keys', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee49() {
+test('renders items with duplicate keys', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee50() {
   var input, options;
-  return _regeneratorRuntime().wrap(function _callee49$(_context51) {
-    while (1) switch (_context51.prev = _context51.next) {
+  return _regeneratorRuntime().wrap(function _callee50$(_context52) {
+    while (1) switch (_context52.prev = _context52.next) {
       case 0:
         getComponent({
           items: _mapInstanceProperty(items).call(items, function (item) {
@@ -1851,7 +1885,7 @@ test('renders items with duplicate keys', /*#__PURE__*/_asyncToGenerator(/*#__PU
           mode: 'condensed'
         });
         input = screen.getByRole('combobox');
-        _context51.next = 4;
+        _context52.next = 4;
         return userEvent.tab();
       case 4:
         expect(input).toHaveFocus();
@@ -1860,20 +1894,20 @@ test('renders items with duplicate keys', /*#__PURE__*/_asyncToGenerator(/*#__PU
         expect(options.length).toBe(1);
       case 8:
       case "end":
-        return _context51.stop();
+        return _context52.stop();
     }
-  }, _callee49);
+  }, _callee50);
 })));
-test('should render items with sections passed in props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee50() {
+test('should render items with sections passed in props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee51() {
   var input;
-  return _regeneratorRuntime().wrap(function _callee50$(_context52) {
-    while (1) switch (_context52.prev = _context52.next) {
+  return _regeneratorRuntime().wrap(function _callee51$(_context53) {
+    while (1) switch (_context53.prev = _context53.next) {
       case 0:
         getSectionsComponent();
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
         expect(screen.queryByRole('option')).not.toBeInTheDocument();
         input = screen.getByRole('combobox');
-        _context52.next = 6;
+        _context53.next = 6;
         return userEvent.click(input);
       case 6:
         expect(screen.getAllByRole('group')).toHaveLength(2);
@@ -1881,18 +1915,18 @@ test('should render items with sections passed in props', /*#__PURE__*/_asyncToG
         expect(screen.queryAllByRole('option')).toHaveLength(5);
       case 9:
       case "end":
-        return _context52.stop();
+        return _context53.stop();
     }
-  }, _callee50);
+  }, _callee51);
 })));
-test('should render the separators', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee51() {
+test('should render the separators', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee52() {
   var input, groups;
-  return _regeneratorRuntime().wrap(function _callee51$(_context53) {
-    while (1) switch (_context53.prev = _context53.next) {
+  return _regeneratorRuntime().wrap(function _callee52$(_context54) {
+    while (1) switch (_context54.prev = _context54.next) {
       case 0:
         getSectionsComponent();
         input = screen.getByRole('combobox');
-        _context53.next = 4;
+        _context54.next = 4;
         return userEvent.click(input);
       case 4:
         expect(screen.queryAllByRole('separator')).toHaveLength(3);
@@ -1915,14 +1949,14 @@ test('should render the separators', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*
         });
       case 10:
       case "end":
-        return _context53.stop();
+        return _context54.stop();
     }
-  }, _callee51);
+  }, _callee52);
 })));
-test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee52() {
+test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee53() {
   var input;
-  return _regeneratorRuntime().wrap(function _callee52$(_context54) {
-    while (1) switch (_context54.prev = _context54.next) {
+  return _regeneratorRuntime().wrap(function _callee53$(_context55) {
+    while (1) switch (_context55.prev = _context55.next) {
       case 0:
         getSectionsComponent({
           items: _mapInstanceProperty(withSection).call(withSection, function (item) {
@@ -1932,23 +1966,23 @@ test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*
           })
         });
         input = screen.getByRole('combobox');
-        _context54.next = 4;
+        _context55.next = 4;
         return userEvent.click(input);
       case 4:
         expect(screen.getAllByRole('group')).not.toHaveLength(2);
       case 5:
       case "end":
-        return _context54.stop();
+        return _context55.stop();
     }
-  }, _callee52);
+  }, _callee53);
 })));
-test('onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee53() {
+test('onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee54() {
   var listBox;
-  return _regeneratorRuntime().wrap(function _callee53$(_context55) {
-    while (1) switch (_context55.prev = _context55.next) {
+  return _regeneratorRuntime().wrap(function _callee54$(_context56) {
+    while (1) switch (_context56.prev = _context56.next) {
       case 0:
         render(___EmotionJSX(ComponentOnPrevLoad, null));
-        _context55.next = 3;
+        _context56.next = 3;
         return userEvent.tab();
       case 3:
         listBox = screen.getAllByRole('listbox');
@@ -1966,10 +2000,36 @@ test('onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/_asyncToGene
         expect(onLoadPrevFunc).toHaveBeenCalled();
       case 8:
       case "end":
-        return _context55.stop();
+        return _context56.stop();
     }
-  }, _callee53);
+  }, _callee54);
 })));
+test('selected badge with a long label renders a tooltip with the full text on hover', function () {
+  getLongLabelComponent();
+  var badge = screen.getByText('Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
+  expect(badge).toBeInTheDocument();
+  fireEvent.mouseMove(badge);
+  fireEvent.mouseEnter(badge);
+  var tooltip = screen.getByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+  expect(tooltip).toHaveTextContent('Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
+});
+test('selected badge with a short label does not show a tooltip on hover', function () {
+  getLongLabelComponent();
+  var badge = screen.getByText('Short');
+  expect(badge).toBeInTheDocument();
+  fireEvent.mouseMove(badge);
+  fireEvent.mouseEnter(badge);
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+test('hovering delete button does not show tooltip for long label badge', function () {
+  getLongLabelComponent();
+  var deleteButton = screen.getByLabelText('delete Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
+  expect(deleteButton).toBeInTheDocument();
+  fireEvent.mouseMove(deleteButton);
+  fireEvent.mouseEnter(deleteButton);
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
 
 // Needs to be added to each components test file
 universalComponentTests({

package/lib/styles/themes/astro/customProperties/tShirtSizes.js

@@ -6,7 +6,9 @@ export default {
   md: '25px'
 };
 export var iconWrapperSizes = {
+  xs: 12,
   sm: 18,
   md: 24,
-  lg: 48
+  lg: 48,
+  xl: 96
 };

package/lib/styles/themes/next-gen/customProperties/tShirtSizes.js

@@ -1,3 +1,4 @@
+import sizes from '../sizes';
 export default {
   'icon-50': '10px',
   xxs: '10px',
@@ -16,7 +17,9 @@ export default {
   xsm: '16px'
 };
 export var iconWrapperSizes = {
-  sm: 18,
-  md: 24,
-  lg: 48
+  xs: sizes.avatarFontSize.xs,
+  sm: sizes.avatarFontSize.sm,
+  md: sizes.avatarFontSize.md,
+  lg: sizes.avatarFontSize.lg,
+  xl: sizes.avatarFontSize.xl
 };

package/lib/styles/themes/next-gen/sizes.js

@@ -5,13 +5,6 @@ var sideNav = {
   halfWidth: "".concat(halfSidenavWidth, "px")
 };
 var fontSizes = astroTokens["default"]['font-size'];
-var avatar = {
-  sm: "".concat(astroTokens.size.avatar.sm, "px"),
-  md: '32px',
-  xmd: '44px',
-  lg: "".concat(astroTokens.size.avatar.lg, "px"),
-  xl: "".concat(astroTokens.size.avatar.xl, "px")
-};
 var avatarLogo = {
   sm: '14px',
   md: '20px',
@@ -19,7 +12,16 @@ var avatarLogo = {
   lg: '44px',
   xl: '54px'
 };
+var avatar = {
+  xs: "".concat(astroTokens.size.avatar.xs, "px"),
+  sm: "".concat(astroTokens.size.avatar.sm, "px"),
+  md: "".concat(astroTokens.size.avatar.md, "px"),
+  xmd: '44px',
+  lg: "".concat(astroTokens.size.avatar.lg, "px"),
+  xl: "".concat(astroTokens.size.avatar.xl, "px")
+};
 var avatarFontSize = {
+  xs: fontSizes.avatar.xs,
   sm: fontSizes.avatar.sm,
   md: fontSizes.avatar.md,
   xmd: '18px',

package/lib/styles/themes/next-gen/variants/iconWrapper.js

@@ -9,35 +9,52 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import sizes from '../sizes';
 var circle = {
   '&.is-circle': {
     borderRadius: '50%'
   }
 };
 var iconWrapper = {
+  xs: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.xs,
+    minWidth: sizes.avatar.xs,
+    height: sizes.avatar.xs,
+    width: sizes.avatar.xs,
+    fontSize: sizes.avatarFontSize.xs
+  }, circle),
   sm: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '32px',
-    minWidth: '32px',
-    height: '32px',
-    width: '32px',
-    p: '7px'
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.sm,
+    minWidth: sizes.avatar.sm,
+    height: sizes.avatar.sm,
+    width: sizes.avatar.sm,
+    fontSize: sizes.avatarFontSize.sm
   }, circle),
   md: _objectSpread({
-    borderRadius: '4px',
-    minHeight: '48px',
-    minWidth: '48px',
-    height: '48px',
-    width: '48px',
-    p: '12px'
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.md,
+    minWidth: sizes.avatar.md,
+    height: sizes.avatar.md,
+    width: sizes.avatar.md,
+    fontSize: sizes.avatarFontSize.md
   }, circle),
   lg: _objectSpread({
-    borderRadius: '16px',
-    minHeight: '104px',
-    minWidth: '104px',
-    height: '104px',
-    width: '104px',
-    p: '28px'
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.lg,
+    minWidth: sizes.avatar.lg,
+    height: sizes.avatar.lg,
+    width: sizes.avatar.lg,
+    fontSize: sizes.avatarFontSize.lg
+  }, circle),
+  xl: _objectSpread({
+    borderRadius: '.25rem',
+    minHeight: sizes.avatar.xl,
+    minWidth: sizes.avatar.xl,
+    height: sizes.avatar.xl,
+    width: sizes.avatar.xl,
+    fontSize: sizes.avatarFontSize.xl
   }, circle)
 };
 export default _objectSpread({}, iconWrapper);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.194.0",
+  "version": "2.195.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",