@pingux/astro 2.194.1-alpha.0 → 2.195.0-alpha.0

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

@@ -38,7 +38,7 @@ var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmi
 var _react2 = require("@emotion/react");
 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 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 ? _forEachInstanceProperty2(_context56 = ownKeys(Object(t), !0)).call(_context56, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_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 ? _forEachInstanceProperty2(_context57 = ownKeys(Object(t), !0)).call(_context57, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_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; }; }
@@ -85,6 +85,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,
@@ -143,6 +152,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 ? _testWrapper.render : _ref4$renderFn;
+  return renderFn((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
+    items: longLabelItems,
+    label: "Field Label",
+    defaultSelectedKeys: ['LongLabelItem', 'ShortLabelItem']
+  }, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key
+    }, item.name);
+  })));
+};
 var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
   var _context, _context2;
   var initialItems = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(10)).call(_context2, {
@@ -155,13 +179,12 @@ var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
       id: index
     };
   });
-  // eslint-disable-next-line no-unused-vars
   var _useState = (0, _react.useState)(initialItems),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     listItems = _useState2[0],
     setListItems = _useState2[1];
   var onLoadMore = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -173,11 +196,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 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       return _regeneratorRuntime().wrap(function _callee2$(_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
@@ -189,7 +212,7 @@ var ComponentOnPrevLoad = function ComponentOnPrevLoad(props) {
       }, _callee2);
     }));
     return function onLoadPrev() {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
@@ -1037,11 +1060,11 @@ test('read only keys', function () {
   var firstBadge = _testWrapper.screen.getByText(items[1].name);
   var deleteButton1 = firstBadge.nextSibling;
   expect(firstBadge).toBeInTheDocument();
-  expect(deleteButton1).toBeNull();
+  expect(deleteButton1).not.toBeInTheDocument();
   var secondBadge = _testWrapper.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';
@@ -1647,23 +1670,7 @@ test('default selected keys in condensed mode ', function () {
   expect(listbox).not.toBeInTheDocument();
   expect(_testWrapper.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 = _testWrapper.screen.getByRole('combobox');
-  var value = 'Aardvark';
-  _userEvent["default"].type(input, value);
-  var listbox = _testWrapper.screen.getByRole('listbox');
-  expect(listbox).toBeInTheDocument();
-  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
-  expect(options.length).toBe(1);
-  expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
-});
-test('onInputChange is called in condensed mode ', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee43() {
+test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee43() {
   var onInputChange, input, value, listbox, options;
   return _regeneratorRuntime().wrap(function _callee43$(_context45) {
     while (1) switch (_context45.prev = _context45.next) {
@@ -1671,6 +1678,7 @@ test('onInputChange is called in condensed mode ', /*#__PURE__*/(0, _asyncToGene
         onInputChange = jest.fn();
         getComponent({
           mode: 'condensed',
+          defaultSelectedKeys: [items[1].key, items[2].key],
           onInputChange: onInputChange
         });
         input = _testWrapper.screen.getByRole('combobox');
@@ -1682,18 +1690,44 @@ test('onInputChange is called in condensed mode ', /*#__PURE__*/(0, _asyncToGene
         expect(listbox).toBeInTheDocument();
         options = (0, _testWrapper.within)(listbox).getAllByRole('option');
         expect(options.length).toBe(1);
-        expect(onInputChange).toBeCalledTimes(value.length);
-        expect(onInputChange).toHaveBeenCalledWith(value);
-      case 12:
+        expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
+      case 11:
       case "end":
         return _context45.stop();
     }
   }, _callee43);
 })));
-test('opens listbox on focus and fires "onFocus', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee44() {
-  var onFocus, input, options;
+test('onInputChange is called in condensed mode ', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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 = _testWrapper.screen.getByRole('combobox');
+        value = 'Aardvark';
+        _context46.next = 6;
+        return _userEvent["default"].type(input, value);
+      case 6:
+        listbox = _testWrapper.screen.getByRole('listbox');
+        expect(listbox).toBeInTheDocument();
+        options = (0, _testWrapper.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__*/(0, _asyncToGenerator2["default"])(/*#__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({
@@ -1701,7 +1735,7 @@ test('opens listbox on focus and fires "onFocus', /*#__PURE__*/(0, _asyncToGener
           onFocus: onFocus
         });
         input = _testWrapper.screen.getByRole('combobox');
-        _context46.next = 5;
+        _context47.next = 5;
         return _userEvent["default"].tab();
       case 5:
         expect(input).toHaveFocus();
@@ -1712,14 +1746,14 @@ test('opens listbox on focus and fires "onFocus', /*#__PURE__*/(0, _asyncToGener
         expect(onFocus).toBeCalled();
       case 11:
       case "end":
-        return _context46.stop();
+        return _context47.stop();
     }
-  }, _callee44);
+  }, _callee45);
 })));
-test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee45() {
+test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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({
@@ -1727,7 +1761,7 @@ test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/(0, _asyncToGener
           onBlur: onBlur
         });
         input = _testWrapper.screen.getByRole('combobox');
-        _context47.next = 5;
+        _context48.next = 5;
         return _userEvent["default"].tab();
       case 5:
         expect(input).toHaveFocus();
@@ -1739,19 +1773,19 @@ test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/(0, _asyncToGener
         expect(onBlur).toBeCalled();
       case 10:
       case "end":
-        return _context47.stop();
+        return _context48.stop();
     }
-  }, _callee45);
+  }, _callee46);
 })));
-test('list and button are keyboard accessible', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee46() {
+test('list and button are keyboard accessible', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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["default"].tab();
       case 3:
         listbox = _testWrapper.screen.getByRole('listbox');
@@ -1760,15 +1794,15 @@ test('list and button are keyboard accessible', /*#__PURE__*/(0, _asyncToGenerat
         secondOption = options[1];
         buttons = _testWrapper.screen.getAllByRole('button');
         button = buttons[1];
-        _context48.next = 11;
+        _context49.next = 11;
         return _userEvent["default"].tab();
       case 11:
         expect(button).toHaveFocus();
-        _context48.next = 14;
+        _context49.next = 14;
         return _userEvent["default"].tab();
       case 14:
         expect(firstOption).toHaveFocus();
-        _context48.next = 17;
+        _context49.next = 17;
         return _userEvent["default"].type(firstOption, '{arrowdown}', {
           skipClick: true
         });
@@ -1776,14 +1810,14 @@ test('list and button are keyboard accessible', /*#__PURE__*/(0, _asyncToGenerat
         expect(secondOption).toHaveFocus();
       case 18:
       case "end":
-        return _context48.stop();
+        return _context49.stop();
     }
-  }, _callee46);
+  }, _callee47);
 })));
-test('popover closes on input blur', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee47() {
+test('popover closes on input blur', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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'
@@ -1791,7 +1825,7 @@ test('popover closes on input blur', /*#__PURE__*/(0, _asyncToGenerator2["defaul
         expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
         expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
         input = _testWrapper.screen.getByRole('combobox');
-        _context49.next = 6;
+        _context50.next = 6;
         return _userEvent["default"].click(input);
       case 6:
         listbox = _testWrapper.screen.getByRole('listbox');
@@ -1799,54 +1833,54 @@ test('popover closes on input blur', /*#__PURE__*/(0, _asyncToGenerator2["defaul
         checkboxes = (0, _testWrapper.within)(listbox).getAllByRole('img');
         expect(checkboxes.length).toBe(3);
         secondOption = options[1];
-        _context49.next = 13;
+        _context50.next = 13;
         return _userEvent["default"].click(secondOption);
       case 13:
         value = 'Aardvark';
-        _context49.next = 16;
+        _context50.next = 16;
         return _userEvent["default"].type(input, value);
       case 16:
-        _context49.next = 18;
+        _context50.next = 18;
         return _userEvent["default"].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__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee48() {
+test('trigger button handles popover open and close in condensed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
         input = _testWrapper.screen.getByRole('combobox');
-        _context50.next = 5;
+        _context51.next = 5;
         return _userEvent["default"].click(_testWrapper.screen.getAllByRole('button')[0]);
       case 5:
         expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
         expect(input).toHaveFocus();
-        _context50.next = 9;
+        _context51.next = 9;
         return _userEvent["default"].tab();
       case 9:
         _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('button')[0]);
         expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
       case 11:
       case "end":
-        return _context50.stop();
+        return _context51.stop();
     }
-  }, _callee48);
+  }, _callee49);
 })));
-test('renders items with duplicate keys', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee49() {
+test('renders items with duplicate keys', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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: (0, _map["default"])(items).call(items, function (item) {
@@ -1857,7 +1891,7 @@ test('renders items with duplicate keys', /*#__PURE__*/(0, _asyncToGenerator2["d
           mode: 'condensed'
         });
         input = _testWrapper.screen.getByRole('combobox');
-        _context51.next = 4;
+        _context52.next = 4;
         return _userEvent["default"].tab();
       case 4:
         expect(input).toHaveFocus();
@@ -1866,20 +1900,20 @@ test('renders items with duplicate keys', /*#__PURE__*/(0, _asyncToGenerator2["d
         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__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee50() {
+test('should render items with sections passed in props', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
         expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
         input = _testWrapper.screen.getByRole('combobox');
-        _context52.next = 6;
+        _context53.next = 6;
         return _userEvent["default"].click(input);
       case 6:
         expect(_testWrapper.screen.getAllByRole('group')).toHaveLength(2);
@@ -1887,18 +1921,18 @@ test('should render items with sections passed in props', /*#__PURE__*/(0, _asyn
         expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(5);
       case 9:
       case "end":
-        return _context52.stop();
+        return _context53.stop();
     }
-  }, _callee50);
+  }, _callee51);
 })));
-test('should render the separators', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee51() {
+test('should render the separators', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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 = _testWrapper.screen.getByRole('combobox');
-        _context53.next = 4;
+        _context54.next = 4;
         return _userEvent["default"].click(input);
       case 4:
         expect(_testWrapper.screen.queryAllByRole('separator')).toHaveLength(3);
@@ -1921,14 +1955,14 @@ test('should render the separators', /*#__PURE__*/(0, _asyncToGenerator2["defaul
         });
       case 10:
       case "end":
-        return _context53.stop();
+        return _context54.stop();
     }
-  }, _callee51);
+  }, _callee52);
 })));
-test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee52() {
+test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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: (0, _map["default"])(withSection).call(withSection, function (item) {
@@ -1938,23 +1972,23 @@ test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*
           })
         });
         input = _testWrapper.screen.getByRole('combobox');
-        _context54.next = 4;
+        _context55.next = 4;
         return _userEvent["default"].click(input);
       case 4:
         expect(_testWrapper.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__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee53() {
+test('onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__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:
         (0, _testWrapper.render)((0, _react2.jsx)(ComponentOnPrevLoad, null));
-        _context55.next = 3;
+        _context56.next = 3;
         return _userEvent["default"].tab();
       case 3:
         listBox = _testWrapper.screen.getAllByRole('listbox');
@@ -1972,10 +2006,36 @@ test('onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/(0, _asyncTo
         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 = _testWrapper.screen.getByText('Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
+  expect(badge).toBeInTheDocument();
+  _testWrapper.fireEvent.mouseMove(badge);
+  _testWrapper.fireEvent.mouseEnter(badge);
+  var tooltip = _testWrapper.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 = _testWrapper.screen.getByText('Short');
+  expect(badge).toBeInTheDocument();
+  _testWrapper.fireEvent.mouseMove(badge);
+  _testWrapper.fireEvent.mouseEnter(badge);
+  expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
+test('hovering delete button does not show tooltip for long label badge', function () {
+  getLongLabelComponent();
+  var deleteButton = _testWrapper.screen.getByLabelText('delete Lorem ipsum dolor sit amet, consectetur adipiscing elit,');
+  expect(deleteButton).toBeInTheDocument();
+  _testWrapper.fireEvent.mouseMove(deleteButton);
+  _testWrapper.fireEvent.mouseEnter(deleteButton);
+  expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+});
 
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({

package/lib/components/Badge/Badge.styles.js

@@ -54,7 +54,15 @@ var selectedItemBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
   bg: '#4462ED !important',
   py: 3,
   pr: 0,
-  my: 3
+  my: 3,
+  maxWidth: '200px',
+  '& span': {
+    mr: '5px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    flex: '1 1 0%'
+  }
 });
 var readOnlyBadge = _objectSpread(_objectSpread({}, multivaluesBadge), {}, {
   p: 2.54,

package/lib/components/MultivaluesField/BadgeLabelTooltip.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useRef } from 'react';
+import { mergeProps } from 'react-aria';
+import Clear from '@pingux/mdi-react/CloseIcon';
+import { useHover } from '@react-aria/interactions';
+import { Badge, Box, Icon, IconButton } from '../..';
+import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var BADGE_TOOLTIP_CHAR_THRESHOLD = 25;
+var BadgeLabelTooltip = function BadgeLabelTooltip(_ref) {
+  var _item$badgeProps;
+  var item = _ref.item,
+    index = _ref.index,
+    deleteItem = _ref.deleteItem,
+    closeBadgeRefs = _ref.closeBadgeRefs;
+  var isLong = item.name.length > BADGE_TOOLTIP_CHAR_THRESHOLD;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var textProps = mergeProps(((_item$badgeProps = item.badgeProps) === null || _item$badgeProps === void 0 ? void 0 : _item$badgeProps.textProps) || {}, hoverProps);
+  var badgeRef = useRef();
+  return ___EmotionJSX(Box, {
+    as: "li"
+  }, ___EmotionJSX(TooltipTrigger, {
+    direction: "top",
+    isDisabled: !isLong,
+    isOpen: isLong && isHovered,
+    targetRef: badgeRef
+  }, ___EmotionJSX(Badge, _extends({
+    ref: badgeRef,
+    key: item.key,
+    role: "presentation",
+    variant: "selectedItemBadge",
+    label: item.name,
+    slots: item.slots
+  }, item.badgeProps, {
+    textProps: textProps
+  }), ___EmotionJSX(IconButton, _extends({
+    "aria-label": "delete ".concat(item.name),
+    "data-item": item.name,
+    onPress: function onPress(e) {
+      return deleteItem(item.key, e);
+    },
+    ref: function ref(el) {
+      return closeBadgeRefs.current[index] = el;
+    } // eslint-disable-line
+    ,
+    variant: "badge.deleteButton",
+    "aria-describedby": "selectedKeysState"
+  }, item.buttonProps), ___EmotionJSX(Icon, {
+    icon: Clear,
+    size: 14,
+    title: {
+      name: 'Clear Icon'
+    }
+  }))), ___EmotionJSX(Tooltip, {
+    variant: "variants.tooltip.badgeTooltipContainer"
+  }, item.name)));
+};
+export default BadgeLabelTooltip;

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -24,13 +24,12 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
-import Clear from '@pingux/mdi-react/CloseIcon';
 import { useFilter } from '@react-aria/i18n';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Badge, Box, Icon, IconButton, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { Badge, Box, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
@@ -39,6 +38,7 @@ import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import BadgeLabelTooltip from './BadgeLabelTooltip';
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -396,34 +396,13 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   });
   var multivaluesFieldBadge = function multivaluesFieldBadge(item, index) {
-    return ___EmotionJSX(Box, {
-      as: "li",
-      key: "li ".concat(item.key)
-    }, ___EmotionJSX(Badge, _extends({
-      key: item.key,
-      role: "presentation",
-      variant: "selectedItemBadge",
-      label: item.name,
-      slots: item.slots
-    }, item.badgeProps), ___EmotionJSX(IconButton, _extends({
-      "aria-label": "delete ".concat(item.name),
-      "data-item": item.name,
-      onPress: function onPress(e) {
-        return deleteItem(item.key, e);
-      },
-      ref: function ref(el) {
-        return closeBadgeRefs.current[index] = el;
-      } // eslint-disable-line
-      ,
-      variant: "badge.deleteButton",
-      "aria-describedby": "selectedKeysState"
-    }, item.buttonProps), ___EmotionJSX(Icon, {
-      icon: Clear,
-      size: 14,
-      title: {
-        name: 'Clear Icon'
-      }
-    }))));
+    return ___EmotionJSX(BadgeLabelTooltip, {
+      key: "tooltip-".concat(item.key),
+      item: item,
+      index: index,
+      deleteItem: deleteItem,
+      closeBadgeRefs: closeBadgeRefs
+    });
   };
   var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context0 = _Array$from(selectionManager.selectedKeys)).call(_context0, function (key, i) {
     var _context1, _context10;