@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

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

@@ -1,2259 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
-import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
-import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
-import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
-import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
-import _Symbol$asyncIterator from "@babel/runtime-corejs3/core-js-stable/symbol/async-iterator";
-import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
-import _Symbol$iterator from "@babel/runtime-corejs3/core-js-stable/symbol/iterator";
-import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-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 _context63, _context64; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context63 = ownKeys(Object(t), !0)).call(_context63, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context64 = ownKeys(Object(t))).call(_context64, 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; }; }
-function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
-function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || _Promise); }
-function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof _Symbol && _Symbol$asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof _Symbol ? _Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = _Object$create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: _bindInstanceProperty(d).call(d, e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = _Object$getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(c); function f(e) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = _Object$create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-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; }
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import React, { useState } from 'react';
-import userEvent from '@testing-library/user-event';
-import { Button, DatePicker, Item, Modal, MultivaluesField, OverlayProvider, Section } from '../../index';
-import statuses from '../../utils/devUtils/constants/statuses';
-import { act, fireEvent, getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
-import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var items = [{
-  id: 1,
-  name: 'Aardvark',
-  key: 'Aardvark'
-}, {
-  id: 2,
-  name: 'Kangaroo',
-  key: 'Kangaroo'
-}, {
-  id: 3,
-  name: 'Snake',
-  key: 'Snake'
-}];
-var withSection = [{
-  name: 'Animals',
-  key: 'Animals',
-  children: [{
-    name: 'Option A1',
-    key: 'Option A1'
-  }, {
-    name: 'Option A2',
-    key: 'Option A2'
-  }]
-}, {
-  name: 'People',
-  key: 'People',
-  children: [{
-    name: 'Option B1',
-    key: 'Option B1'
-  }, {
-    name: 'Option B2',
-    key: 'Option B2'
-  }, {
-    name: 'Option B3',
-    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,
-  label: labelText
-};
-var defaultSectionProps = {
-  items: withSection,
-  label: labelText
-};
-var onLoadMoreFunc = jest.fn();
-var onLoadPrevFunc = jest.fn();
-var placeholder = 'Select Animals';
-var selectedOptionText = 'Animals Selected';
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$renderFn = _ref.renderFn,
-    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
-  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  })));
-};
-var getComponentInForm = function getComponentInForm(onFormSubmit) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-    _ref2$renderFn = _ref2.renderFn,
-    renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
-  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX("form", {
-    onSubmit: onFormSubmit
-  }, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }))));
-};
-var getSectionsComponent = function getSectionsComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$renderFn = _ref3.renderFn,
-    renderFn = _ref3$renderFn === void 0 ? render : _ref3$renderFn;
-  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultSectionProps, props, {
-    mode: "condensed"
-  }), function (section) {
-    return ___EmotionJSX(Section, {
-      key: section.key,
-      items: section.children,
-      title: section.name
-    }, function (item) {
-      return ___EmotionJSX(Item, {
-        key: item.name
-      }, item.name);
-    });
-  })));
-};
-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, {
-    key: 'string',
-    name: 'string'
-  })).call(_context, function (_item, index) {
-    return {
-      name: "name: ".concat(index),
-      key: "name: ".concat(index),
-      id: index
-    };
-  });
-  var _useState = useState(initialItems),
-    _useState2 = _slicedToArray(_useState, 2),
-    listItems = _useState2[0],
-    setListItems = _useState2[1];
-  var onLoadMore = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            onLoadMoreFunc();
-          case 1:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee);
-    }));
-    return function onLoadMore() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  var onLoadPrev = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      return _regeneratorRuntime().wrap(function _callee2$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            onLoadPrevFunc();
-          case 1:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee2);
-    }));
-    return function onLoadPrev() {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({
-    items: listItems,
-    label: "Field Label",
-    onLoadMore: onLoadMore,
-    onLoadPrev: onLoadPrev
-  }, props), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      "data-id": item.name,
-      "aria-label": item.name
-    }, item.name);
-  }));
-};
-beforeAll(function () {
-  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
-    return 1000;
-  });
-  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
-    return 1000;
-  });
-  window.HTMLElement.prototype.scrollIntoView = jest.fn();
-  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
-    return 1024;
-  });
-  jest.useFakeTimers();
-});
-afterEach(function () {
-  jest.clearAllMocks();
-});
-afterAll(function () {
-  jest.restoreAllMocks();
-});
-test('renders MultivaluesField component', function () {
-  getComponent();
-  var input = screen.getByRole('combobox');
-  var label = screen.getByText(defaultProps.label);
-  expect(input).toBeInTheDocument();
-  expect(label).toBeInTheDocument();
-});
-test('opens listbox on focus and fires "onFocus', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-  var onFocus, input, options;
-  return _regeneratorRuntime().wrap(function _callee3$(_context5) {
-    while (1) switch (_context5.prev = _context5.next) {
-      case 0:
-        onFocus = jest.fn();
-        getComponent({
-          onFocus: onFocus
-        });
-        input = screen.getByRole('combobox');
-        _context5.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.getByRole('listbox')).toBeInTheDocument();
-        options = screen.getAllByRole('option');
-        expect(options.length).toBe(items.length);
-        expect(options[0]).toHaveTextContent(items[0].name);
-        expect(onFocus).toBeCalled();
-      case 11:
-      case "end":
-        return _context5.stop();
-    }
-  }, _callee3);
-})));
-test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-  var onBlur, input;
-  return _regeneratorRuntime().wrap(function _callee4$(_context6) {
-    while (1) switch (_context6.prev = _context6.next) {
-      case 0:
-        onBlur = jest.fn();
-        getComponent({
-          onBlur: onBlur
-        });
-        input = screen.getByRole('combobox');
-        _context6.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        _context6.next = 9;
-        return act(function () {
-          input.blur();
-        });
-      case 9:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(onBlur).toBeCalled();
-      case 11:
-      case "end":
-        return _context6.stop();
-    }
-  }, _callee4);
-})));
-it('should not close the dropdown if focus moves within the input wrapper or listbox', function () {
-  getComponent();
-  var input = screen.getByRole('combobox');
-  fireEvent.focus(input);
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).toBeInTheDocument();
-  fireEvent.blur(input, {
-    relatedTarget: input
-  });
-  expect(listbox).toBeInTheDocument();
-  fireEvent.blur(input, {
-    relatedTarget: listbox
-  });
-  expect(listbox).toBeInTheDocument();
-});
-it('should close the dropdown if focus moves outside the input wrapper and listbox', function () {
-  getComponent();
-  var input = screen.getByRole('combobox');
-  fireEvent.focus(input);
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).toBeInTheDocument();
-  fireEvent.blur(input, {
-    relatedTarget: document.body
-  });
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-});
-test('opening and closing listbox fires "onOpenChange"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-  var onOpenChange, input;
-  return _regeneratorRuntime().wrap(function _callee5$(_context7) {
-    while (1) switch (_context7.prev = _context7.next) {
-      case 0:
-        onOpenChange = jest.fn();
-        getComponent({
-          onOpenChange: onOpenChange
-        });
-        input = screen.getByRole('combobox');
-        _context7.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        _context7.next = 10;
-        return act(function () {
-          input.blur();
-        });
-      case 10:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-      case 12:
-      case "end":
-        return _context7.stop();
-    }
-  }, _callee5);
-})));
-test('multiple selection is enabled, option disappears after selection', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-  var input, listbox, options, firstOption, secondOption;
-  return _regeneratorRuntime().wrap(function _callee6$(_context8) {
-    while (1) switch (_context8.prev = _context8.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context8.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        listbox = screen.getByRole('listbox');
-        expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        _context8.next = 11;
-        return userEvent.click(firstOption);
-      case 11:
-        expect(firstOption).not.toBeInTheDocument();
-        secondOption = options[1];
-        _context8.next = 15;
-        return userEvent.click(secondOption);
-      case 15:
-        expect(secondOption).not.toBeInTheDocument();
-      case 16:
-      case "end":
-        return _context8.stop();
-    }
-  }, _callee6);
-})));
-test('updates aria attributes on option focus', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
-  var input, listbox;
-  return _regeneratorRuntime().wrap(function _callee7$(_context9) {
-    while (1) switch (_context9.prev = _context9.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context9.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        fireEvent.keyDown(input, {
-          key: 'ArrowDown'
-        });
-        listbox = screen.getByRole('listbox');
-        expect(input).toHaveAttribute('aria-expanded', 'true');
-        expect(input).toHaveAttribute('aria-controls', listbox.id);
-      case 9:
-      case "end":
-        return _context9.stop();
-    }
-  }, _callee7);
-})));
-test('updates aria attributes on popover closing after options were focused', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-  var input, listbox;
-  return _regeneratorRuntime().wrap(function _callee8$(_context0) {
-    while (1) switch (_context0.prev = _context0.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context0.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        fireEvent.keyDown(input, {
-          key: 'ArrowDown'
-        });
-        listbox = screen.getByRole('listbox');
-        expect(input).toHaveAttribute('aria-expanded', 'true');
-        expect(input).toHaveAttribute('aria-controls', listbox.id);
-        _context0.next = 11;
-        return userEvent.click(document.body);
-      case 11:
-        expect(input).toHaveAttribute('aria-activedescendant', '');
-        expect(input).toHaveAttribute('aria-expanded', 'false');
-      case 13:
-      case "end":
-        return _context0.stop();
-    }
-  }, _callee8);
-})));
-test('clicking an option renders badge with option name', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
-  var input, options, firstOption, badge, badgeContainer;
-  return _regeneratorRuntime().wrap(function _callee9$(_context1) {
-    while (1) switch (_context1.prev = _context1.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context1.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        options = screen.getAllByRole('option');
-        firstOption = options[0];
-        _context1.next = 9;
-        return userEvent.click(firstOption);
-      case 9:
-        expect(firstOption).not.toBeInTheDocument();
-        badge = screen.getByText(items[0].name);
-        expect(badge).toBeInTheDocument();
-        badgeContainer = badge.parentElement;
-        expect(badgeContainer).toHaveAttribute('role', 'presentation');
-      case 14:
-      case "end":
-        return _context1.stop();
-    }
-  }, _callee9);
-})));
-test('after clicking an option, and then clicking the text input, the listbox remains open', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
-  var input, options, firstOption;
-  return _regeneratorRuntime().wrap(function _callee0$(_context10) {
-    while (1) switch (_context10.prev = _context10.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context10.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        options = screen.getAllByRole('option');
-        firstOption = options[0];
-        _context10.next = 9;
-        return userEvent.click(firstOption);
-      case 9:
-        expect(firstOption).not.toBeInTheDocument();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        _context10.next = 13;
-        return userEvent.click(input);
-      case 13:
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-      case 14:
-      case "end":
-        return _context10.stop();
-    }
-  }, _callee0);
-})));
-test('no badges are rendered, if nothing is selected', function () {
-  getComponent({
-    isReadOnly: false
-  });
-  expect(screen.queryByRole('presentation')).not.toBeInTheDocument(0);
-});
-test('after clicking an option, and then typing a custom input, the listbox remains open and filters the options', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
-  var input, options, firstOption, value, listbox, filteredOptions;
-  return _regeneratorRuntime().wrap(function _callee1$(_context11) {
-    while (1) switch (_context11.prev = _context11.next) {
-      case 0:
-        getComponent({
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        _context11.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        options = screen.getAllByRole('option');
-        firstOption = options[0];
-        _context11.next = 9;
-        return userEvent.click(firstOption);
-      case 9:
-        expect(firstOption).not.toBeInTheDocument();
-        _context11.next = 12;
-        return userEvent.clear(input);
-      case 12:
-        value = 'ka';
-        _context11.next = 15;
-        return userEvent.type(input, value);
-      case 15:
-        listbox = screen.queryByRole('listbox');
-        expect(listbox).toBeInTheDocument();
-        filteredOptions = within(listbox).getAllByRole('option');
-        expect(filteredOptions.length).toBe(1);
-      case 19:
-      case "end":
-        return _context11.stop();
-    }
-  }, _callee1);
-})));
-test('clicking on delete button deletes selection, and re-adds option to list', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-  var input, options, firstOption, badge, deleteButton, updatedOptions;
-  return _regeneratorRuntime().wrap(function _callee10$(_context12) {
-    while (1) switch (_context12.prev = _context12.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context12.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        options = screen.getAllByRole('option');
-        firstOption = options[0];
-        _context12.next = 9;
-        return userEvent.click(firstOption);
-      case 9:
-        expect(firstOption).not.toBeInTheDocument();
-        badge = screen.getByText(items[0].name);
-        expect(badge).toBeInTheDocument();
-        deleteButton = badge.nextSibling;
-        _context12.next = 15;
-        return userEvent.click(deleteButton);
-      case 15:
-        expect(badge).not.toBeInTheDocument();
-        _context12.next = 18;
-        return act(function () {
-          input.blur();
-        });
-      case 18:
-        _context12.next = 20;
-        return act(function () {
-          input.focus();
-        });
-      case 20:
-        updatedOptions = screen.getAllByRole('option');
-        expect(updatedOptions[0]).toBeInTheDocument();
-        expect(updatedOptions[0]).toHaveTextContent(items[0].name);
-      case 23:
-      case "end":
-        return _context12.stop();
-    }
-  }, _callee10);
-})));
-test('clicking an option fires "onSelectionChange"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
-  var onSelectionChange, input, listbox, options, firstOption, secondOption;
-  return _regeneratorRuntime().wrap(function _callee11$(_context13) {
-    while (1) switch (_context13.prev = _context13.next) {
-      case 0:
-        onSelectionChange = jest.fn();
-        getComponent({
-          onSelectionChange: onSelectionChange
-        });
-        input = screen.getByRole('combobox');
-        _context13.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        _context13.next = 11;
-        return userEvent.click(firstOption);
-      case 11:
-        expect(firstOption).not.toBeInTheDocument();
-        secondOption = options[1];
-        _context13.next = 15;
-        return userEvent.click(secondOption);
-      case 15:
-        expect(secondOption).not.toBeInTheDocument();
-        expect(onSelectionChange).toBeCalledTimes(2);
-        expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
-        expect(onSelectionChange.mock.calls[1][0].has(items[1].name)).toBeTruthy();
-      case 19:
-      case "end":
-        return _context13.stop();
-    }
-  }, _callee11);
-})));
-test('changing the input value opens listbox, filters options, and fires "onInputChange"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
-  var onInputChange, input, value, listbox, options;
-  return _regeneratorRuntime().wrap(function _callee12$(_context14) {
-    while (1) switch (_context14.prev = _context14.next) {
-      case 0:
-        onInputChange = jest.fn();
-        getComponent({
-          onInputChange: onInputChange,
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        value = 'aa';
-        _context14.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 _context14.stop();
-    }
-  }, _callee12);
-})));
-test('in non-restrictive mode, a badge gets added if there is input, onBlur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
-  var input, value, badge, badgeContainer;
-  return _regeneratorRuntime().wrap(function _callee13$(_context15) {
-    while (1) switch (_context15.prev = _context15.next) {
-      case 0:
-        getComponent({
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        value = 'custom';
-        _context15.next = 5;
-        return userEvent.type(input, value);
-      case 5:
-        _context15.next = 7;
-        return userEvent.tab();
-      case 7:
-        badge = screen.queryByText(value);
-        expect(badge).toBeInTheDocument();
-        badgeContainer = badge.parentElement;
-        expect(badgeContainer).toHaveAttribute('role', 'presentation');
-        expect(input.value).toBe('');
-      case 12:
-      case "end":
-        return _context15.stop();
-    }
-  }, _callee13);
-})));
-test('in non-restrictive mode, a badge gets added if there is only one matching filtered option, onBlur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee14() {
-  var input, listbox, options, firstOption, value, badge, badgeContainer;
-  return _regeneratorRuntime().wrap(function _callee14$(_context16) {
-    while (1) switch (_context16.prev = _context16.next) {
-      case 0:
-        getComponent({
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        _context16.next = 4;
-        return userEvent.tab();
-      case 4:
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        value = 'Aardvark';
-        _context16.next = 10;
-        return userEvent.type(input, value);
-      case 10:
-        _context16.next = 12;
-        return userEvent.tab();
-      case 12:
-        badge = screen.queryByText(value);
-        expect(badge).toBeInTheDocument();
-        badgeContainer = badge.parentElement;
-        expect(badgeContainer).toHaveAttribute('role', 'presentation');
-        expect(firstOption).not.toBeInTheDocument();
-      case 17:
-      case "end":
-        return _context16.stop();
-    }
-  }, _callee14);
-})));
-test('dropdown with options reappears after entering a custom input', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
-  var input, value1, value2, listbox, options2;
-  return _regeneratorRuntime().wrap(function _callee15$(_context17) {
-    while (1) switch (_context17.prev = _context17.next) {
-      case 0:
-        getComponent({
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        value1 = 'longstring';
-        _context17.next = 5;
-        return userEvent.type(input, value1);
-      case 5:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        value2 = '';
-        _context17.next = 9;
-        return userEvent.clear(input);
-      case 9:
-        _context17.next = 11;
-        return userEvent.type(input, value2);
-      case 11:
-        listbox = screen.getByRole('listbox');
-        options2 = within(listbox).getAllByRole('option');
-        expect(options2.length).toBe(items.length);
-      case 14:
-      case "end":
-        return _context17.stop();
-    }
-  }, _callee15);
-})));
-test('changing the input value and hitting enter by default do nothing', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
-  var input, value;
-  return _regeneratorRuntime().wrap(function _callee16$(_context18) {
-    while (1) switch (_context18.prev = _context18.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'custom';
-        _context18.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        _context18.next = 8;
-        return userEvent.type(input, '{enter}');
-      case 8:
-        expect(input).toHaveValue('');
-      case 9:
-      case "end":
-        return _context18.stop();
-    }
-  }, _callee16);
-})));
-test('changing the input value and hitting enter creates new value in non-restrictive mode', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
-  var input, value, badge, badgeContainer;
-  return _regeneratorRuntime().wrap(function _callee17$(_context19) {
-    while (1) switch (_context19.prev = _context19.next) {
-      case 0:
-        getComponent({
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'custom';
-        _context19.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        expect(input).toHaveValue(value);
-        _context19.next = 9;
-        return userEvent.type(input, '{enter}');
-      case 9:
-        expect(input).toHaveValue('');
-        badge = screen.queryByText(value);
-        expect(badge).toBeInTheDocument();
-        badgeContainer = badge.parentElement;
-        expect(badgeContainer).toHaveAttribute('role', 'presentation');
-      case 14:
-      case "end":
-        return _context19.stop();
-    }
-  }, _callee17);
-})));
-test('pressing enter, when the input values is an empty string does not add an option, in non-restrictive mode', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
-  var onSelectionChange, input;
-  return _regeneratorRuntime().wrap(function _callee18$(_context20) {
-    while (1) switch (_context20.prev = _context20.next) {
-      case 0:
-        onSelectionChange = jest.fn();
-        getComponent({
-          mode: 'non-restrictive',
-          onSelectionChange: onSelectionChange
-        });
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        _context20.next = 6;
-        return userEvent.type(input, '{enter}');
-      case 6:
-        expect(input).toHaveValue('');
-        expect(onSelectionChange).toBeCalledTimes(0);
-      case 8:
-      case "end":
-        return _context20.stop();
-    }
-  }, _callee18);
-})));
-test('in non-restrictive mode "onSelectionChange" returns entered keys', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
-  var onSelectionChange, input, value, badge;
-  return _regeneratorRuntime().wrap(function _callee19$(_context21) {
-    while (1) switch (_context21.prev = _context21.next) {
-      case 0:
-        onSelectionChange = jest.fn();
-        getComponent({
-          mode: 'non-restrictive',
-          onSelectionChange: onSelectionChange
-        });
-        input = screen.getByRole('combobox');
-        value = 'custom';
-        _context21.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        _context21.next = 8;
-        return userEvent.type(input, '{enter}');
-      case 8:
-        badge = screen.queryByText(value);
-        expect(badge).toBeInTheDocument();
-        expect(onSelectionChange).toBeCalledTimes(1);
-        expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
-      case 12:
-      case "end":
-        return _context21.stop();
-    }
-  }, _callee19);
-})));
-test('in non-restrictive mode the same value cannot be applied twice', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
-  var onSelectionChange, input, value, badge;
-  return _regeneratorRuntime().wrap(function _callee20$(_context22) {
-    while (1) switch (_context22.prev = _context22.next) {
-      case 0:
-        onSelectionChange = jest.fn();
-        getComponent({
-          mode: 'non-restrictive',
-          onSelectionChange: onSelectionChange
-        });
-        input = screen.getByRole('combobox');
-        value = 'custom';
-        _context22.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        _context22.next = 8;
-        return userEvent.type(input, '{enter}');
-      case 8:
-        badge = screen.queryByText(value);
-        expect(badge).toBeInTheDocument();
-        expect(input).toHaveValue('');
-        _context22.next = 13;
-        return userEvent.type(input, value);
-      case 13:
-        _context22.next = 15;
-        return userEvent.type(input, '{enter}');
-      case 15:
-        expect(input).toHaveValue(value);
-        expect(onSelectionChange).toBeCalledTimes(1);
-      case 17:
-      case "end":
-        return _context22.stop();
-    }
-  }, _callee20);
-})));
-test('in non-restrictive mode the value that was already selected using the list cannot be applied', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
-  var onSelectionChange, input, listbox, options, firstOption;
-  return _regeneratorRuntime().wrap(function _callee21$(_context23) {
-    while (1) switch (_context23.prev = _context23.next) {
-      case 0:
-        onSelectionChange = jest.fn();
-        getComponent({
-          mode: 'non-restrictive',
-          onSelectionChange: onSelectionChange
-        });
-        input = screen.getByRole('combobox');
-        _context23.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        _context23.next = 11;
-        return userEvent.click(firstOption);
-      case 11:
-        expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
-        onSelectionChange.mockClear();
-        _context23.next = 15;
-        return userEvent.type(input, items[0].name);
-      case 15:
-        _context23.next = 17;
-        return userEvent.type(input, '{enter}');
-      case 17:
-        expect(input).toHaveValue(items[0].name);
-        expect(onSelectionChange).not.toBeCalled();
-      case 19:
-      case "end":
-        return _context23.stop();
-    }
-  }, _callee21);
-})));
-test('options can be focused via keyboard', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
-  var input, listbox, options;
-  return _regeneratorRuntime().wrap(function _callee22$(_context24) {
-    while (1) switch (_context24.prev = _context24.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context24.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        listbox = screen.getByRole('listbox');
-        expect(listbox).toBeInTheDocument();
-        options = within(listbox).getAllByRole('option');
-        _context24.next = 10;
-        return userEvent.type(listbox, '{arrowdown}', {
-          skipClick: true
-        });
-      case 10:
-        expect(options[0]).toHaveClass('is-focused');
-        _context24.next = 13;
-        return userEvent.type(listbox, '{arrowdown}', {
-          skipClick: true
-        });
-      case 13:
-        expect(options[1]).toHaveClass('is-focused');
-      case 14:
-      case "end":
-        return _context24.stop();
-    }
-  }, _callee22);
-})));
-test('options can be selected via keyboard', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
-  var input, listbox, options, badge, badgeContainer;
-  return _regeneratorRuntime().wrap(function _callee23$(_context25) {
-    while (1) switch (_context25.prev = _context25.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context25.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        listbox = screen.getByRole('listbox');
-        expect(listbox).toBeInTheDocument();
-        options = within(listbox).getAllByRole('option');
-        _context25.next = 10;
-        return userEvent.type(listbox, '{arrowdown}', {
-          skipClick: true
-        });
-      case 10:
-        expect(options[0]).toHaveClass('is-focused');
-        _context25.next = 13;
-        return userEvent.type(options[0], '{enter}');
-      case 13:
-        expect(options[0]).not.toBeInTheDocument();
-        badge = screen.getByText(items[0].name);
-        expect(badge).toBeInTheDocument();
-        badgeContainer = badge.parentElement;
-        expect(badgeContainer).toHaveAttribute('role', 'presentation');
-      case 18:
-      case "end":
-        return _context25.stop();
-    }
-  }, _callee23);
-})));
-test('default selected keys', function () {
-  getComponent({
-    defaultSelectedKeys: [items[1].key, items[2].key]
-  });
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  var firstBadge = screen.getByText(items[1].name);
-  expect(firstBadge).toBeInTheDocument();
-  var secondBadge = screen.getByText(items[2].name);
-  expect(secondBadge).toBeInTheDocument();
-});
-test('default selected keys are removed from the list', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
-  var input, listbox, options;
-  return _regeneratorRuntime().wrap(function _callee24$(_context26) {
-    while (1) switch (_context26.prev = _context26.next) {
-      case 0:
-        getComponent({
-          defaultSelectedKeys: [items[1].key, items[2].key]
-        });
-        input = screen.getByRole('combobox');
-        _context26.next = 4;
-        return userEvent.click(input);
-      case 4:
-        listbox = screen.queryByRole('listbox');
-        _context26.next = 7;
-        return userEvent.type(listbox, '{arrowdown}', {
-          skipClick: true
-        });
-      case 7:
-        options = within(listbox).getAllByRole('option');
-        expect(options.length).toBe(1);
-        expect(within(options[0]).getByText(items[0].key)).toBeInTheDocument();
-      case 10:
-      case "end":
-        return _context26.stop();
-    }
-  }, _callee24);
-})));
-test('selected keys', function () {
-  getComponent({
-    selectedKeys: [items[1].key, items[2].key]
-  });
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  var firstBadge = screen.getByText(items[1].name);
-  expect(firstBadge).toBeInTheDocument();
-  var secondBadge = screen.getByText(items[2].name);
-  expect(secondBadge).toBeInTheDocument();
-});
-test('selected keys are removed from the list', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee25() {
-  var input, listbox, options;
-  return _regeneratorRuntime().wrap(function _callee25$(_context27) {
-    while (1) switch (_context27.prev = _context27.next) {
-      case 0:
-        getComponent({
-          selectedKeys: [items[1].key, items[2].key]
-        });
-        input = screen.getByRole('combobox');
-        _context27.next = 4;
-        return userEvent.click(input);
-      case 4:
-        listbox = screen.queryByRole('listbox');
-        _context27.next = 7;
-        return userEvent.type(listbox, '{arrowdown}', {
-          skipClick: true
-        });
-      case 7:
-        options = within(listbox).getAllByRole('option');
-        expect(options.length).toBe(1);
-        expect(within(options[0]).getByText(items[0].key)).toBeInTheDocument();
-      case 10:
-      case "end":
-        return _context27.stop();
-    }
-  }, _callee25);
-})));
-test('read only keys', function () {
-  getComponent({
-    readOnlyKeys: [items[1].key, items[2].key]
-  });
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  var firstBadge = screen.getByText(items[1].name);
-  var deleteButton1 = firstBadge.nextSibling;
-  expect(firstBadge).toBeInTheDocument();
-  expect(deleteButton1).not.toBeInTheDocument();
-  var secondBadge = screen.getByText(items[2].name);
-  expect(secondBadge).toBeInTheDocument();
-  var deleteButton2 = firstBadge.nextSibling;
-  expect(deleteButton2).not.toBeInTheDocument();
-});
-test('passing helper text should display it and correct aria attributes on input', function () {
-  var testHelperText = 'testHelperText';
-  getComponent({
-    helperText: testHelperText,
-    status: statuses.ERROR
-  });
-  var helper = screen.getByText(testHelperText);
-  expect(helper).toBeInTheDocument();
-  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
-  var input = screen.getByRole('combobox');
-  expect(input).toHaveAttribute('aria-invalid', 'true');
-  var helperTextID = helper.getAttribute('id');
-  expect(input).toHaveAttribute('aria-describedby', "".concat(helperTextID, " emptyKeysState"));
-});
-test('read only field', function () {
-  var isReadOnly = true;
-  getComponent({
-    isReadOnly: isReadOnly
-  });
-  var badge = screen.queryAllByRole('presentation');
-  expect(badge[0]).toHaveAttribute('label', items[0].name);
-  expect(badge[1]).toHaveAttribute('label', items[1].name);
-  expect(badge[2]).toHaveAttribute('label', items[2].name);
-  var textArea = screen.getByLabelText(defaultProps.label);
-  expect(textArea).toHaveClass('is-read-only');
-  expect(screen.queryByRole('option')).not.toBeInTheDocument();
-});
-test('read only keys with read only field', function () {
-  var isReadOnly = true;
-  getComponent({
-    isReadOnly: isReadOnly,
-    readOnlyKeys: [items[1].key, items[2].key]
-  });
-  var badge = screen.queryAllByRole('presentation');
-  expect(badge[0]).toHaveAttribute('label', items[1].name);
-  expect(badge[1]).toHaveAttribute('label', items[2].name);
-  var textArea = screen.getByLabelText(defaultProps.label);
-  expect(textArea).toHaveClass('is-read-only');
-  expect(screen.queryByRole('option')).not.toBeInTheDocument();
-});
-test('popover closes on input blur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee26() {
-  var input;
-  return _regeneratorRuntime().wrap(function _callee26$(_context28) {
-    while (1) switch (_context28.prev = _context28.next) {
-      case 0:
-        getComponent();
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(screen.queryByRole('option')).not.toBeInTheDocument();
-        input = screen.getByRole('combobox');
-        _context28.next = 6;
-        return userEvent.click(input);
-      case 6:
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(screen.queryAllByRole('option')).toHaveLength(3);
-        expect(screen.queryByRole('option', {
-          name: 'Aardvark'
-        })).toBeInTheDocument();
-        _context28.next = 11;
-        return userEvent.click(document.body);
-      case 11:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(screen.queryByRole('option')).not.toBeInTheDocument();
-      case 13:
-      case "end":
-        return _context28.stop();
-    }
-  }, _callee26);
-})));
-test('form does not submit when adding custom value', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee27() {
-  var onFormSubmit, input, value;
-  return _regeneratorRuntime().wrap(function _callee27$(_context29) {
-    while (1) switch (_context29.prev = _context29.next) {
-      case 0:
-        onFormSubmit = jest.fn();
-        getComponentInForm(onFormSubmit, {});
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'custom';
-        _context29.next = 7;
-        return userEvent.type(input, value);
-      case 7:
-        _context29.next = 9;
-        return userEvent.type(input, '{enter}');
-      case 9:
-        expect(input).toHaveValue('');
-        expect(onFormSubmit).not.toHaveBeenCalled();
-      case 11:
-      case "end":
-        return _context29.stop();
-    }
-  }, _callee27);
-})));
-test('in non-restrictive mode the value should be trimmed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee28() {
-  var input, value, trimmedValue, badge, trimmedBadge;
-  return _regeneratorRuntime().wrap(function _callee28$(_context30) {
-    while (1) switch (_context30.prev = _context30.next) {
-      case 0:
-        getComponent({
-          mode: 'non-restrictive'
-        });
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'test ';
-        trimmedValue = 'test';
-        _context30.next = 7;
-        return userEvent.type(input, value);
-      case 7:
-        _context30.next = 9;
-        return userEvent.type(input, '{enter}');
-      case 9:
-        badge = screen.queryByText(value, {
-          normalizer: getDefaultNormalizer({
-            trim: false
-          })
-        });
-        trimmedBadge = screen.queryByText(trimmedValue, {
-          normalizer: getDefaultNormalizer({
-            trim: false
-          })
-        });
-        expect(badge).not.toBeInTheDocument();
-        expect(trimmedBadge).toBeInTheDocument();
-        expect(input).toHaveValue('');
-      case 14:
-      case "end":
-        return _context30.stop();
-    }
-  }, _callee28);
-})));
-test('deleting a single badge via keyboard moves focus to the input', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee29() {
-  var input, options, firstOption, badge, deleteButton;
-  return _regeneratorRuntime().wrap(function _callee29$(_context31) {
-    while (1) switch (_context31.prev = _context31.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        _context31.next = 4;
-        return userEvent.tab();
-      case 4:
-        options = screen.getAllByRole('option');
-        firstOption = options[0];
-        _context31.next = 8;
-        return userEvent.click(firstOption);
-      case 8:
-        badge = screen.getByText(items[0].name);
-        expect(badge).toBeInTheDocument();
-        _context31.next = 12;
-        return userEvent.tab({
-          shift: true
-        });
-      case 12:
-        deleteButton = badge.nextSibling;
-        expect(deleteButton).toHaveClass('is-focused');
-        fireEvent.keyDown(deleteButton, {
-          key: 'Enter'
-        });
-        fireEvent.keyUp(deleteButton, {
-          key: 'Enter'
-        });
-        expect(badge).not.toBeInTheDocument();
-        expect(input).toHaveClass('is-focused');
-      case 18:
-      case "end":
-        return _context31.stop();
-    }
-  }, _callee29);
-})));
-test('deleting the last badge via keyboard moves focus to the previous badge', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee30() {
-  var options, firstOption, secondOption, badge1, badge2, deleteButton1, deleteButton2;
-  return _regeneratorRuntime().wrap(function _callee30$(_context32) {
-    while (1) switch (_context32.prev = _context32.next) {
-      case 0:
-        getComponent();
-        _context32.next = 3;
-        return userEvent.tab();
-      case 3:
-        options = screen.getAllByRole('option');
-        firstOption = options[0];
-        secondOption = options[1];
-        _context32.next = 8;
-        return userEvent.click(firstOption);
-      case 8:
-        _context32.next = 10;
-        return userEvent.click(secondOption);
-      case 10:
-        badge1 = screen.getByText(items[0].name);
-        badge2 = screen.getByText(items[1].name);
-        expect(badge1).toBeInTheDocument();
-        expect(badge2).toBeInTheDocument();
-        _context32.next = 16;
-        return userEvent.tab({
-          shift: true
-        });
-      case 16:
-        deleteButton1 = badge1.nextSibling;
-        deleteButton2 = badge2.nextSibling;
-        expect(deleteButton2).toHaveClass('is-focused');
-        fireEvent.keyDown(deleteButton2, {
-          key: 'Enter'
-        });
-        fireEvent.keyUp(deleteButton2, {
-          key: 'Enter'
-        });
-        expect(badge2).not.toBeInTheDocument();
-        expect(deleteButton1).toHaveClass('is-focused');
-      case 23:
-      case "end":
-        return _context32.stop();
-    }
-  }, _callee30);
-})));
-test('pressing Esc should clear the input', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee31() {
-  var input, value;
-  return _regeneratorRuntime().wrap(function _callee31$(_context33) {
-    while (1) switch (_context33.prev = _context33.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'custom';
-        _context33.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        _context33.next = 8;
-        return userEvent.type(input, '{esc}');
-      case 8:
-        expect(screen.queryByText(value)).not.toBeInTheDocument();
-        expect(input).toHaveValue('');
-        expect(input).toHaveFocus();
-        _context33.next = 13;
-        return userEvent.type(input, 'Aardvark');
-      case 13:
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-      case 14:
-      case "end":
-        return _context33.stop();
-    }
-  }, _callee31);
-})));
-test('should clear the input text onBlur', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee32() {
-  var input, value;
-  return _regeneratorRuntime().wrap(function _callee32$(_context34) {
-    while (1) switch (_context34.prev = _context34.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'custom';
-        _context34.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        _context34.next = 8;
-        return userEvent.tab();
-      case 8:
-        expect(screen.queryByText(value)).not.toBeInTheDocument();
-        expect(input).toHaveValue('');
-      case 10:
-      case "end":
-        return _context34.stop();
-    }
-  }, _callee32);
-})));
-test('should clear the input text onBlur and enter when a single filter result is showing', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee33() {
-  var input, value, listbox, options;
-  return _regeneratorRuntime().wrap(function _callee33$(_context35) {
-    while (1) switch (_context35.prev = _context35.next) {
-      case 0:
-        getComponent();
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'Snake';
-        _context35.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);
-        _context35.next = 12;
-        return userEvent.tab();
-      case 12:
-        expect(screen.queryByText(value)).not.toBeInTheDocument();
-        expect(input).toHaveValue('');
-        _context35.next = 16;
-        return userEvent.type(input, value);
-      case 16:
-        expect(options.length).toBe(1);
-        _context35.next = 19;
-        return userEvent.type(input, '{enter}', {
-          skipClick: true
-        });
-      case 19:
-        expect(input).toHaveValue('');
-      case 20:
-      case "end":
-        return _context35.stop();
-    }
-  }, _callee33);
-})));
-test('in non-restrictive mode the partial string values should be accepted', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee34() {
-  var itemsWithDuplicatePartialString, input, value;
-  return _regeneratorRuntime().wrap(function _callee34$(_context36) {
-    while (1) switch (_context36.prev = _context36.next) {
-      case 0:
-        itemsWithDuplicatePartialString = [{
-          id: 1,
-          name: 'echo:read',
-          key: 'echo:read'
-        }, {
-          id: 2,
-          name: 'echo:write',
-          key: 'echo:write'
-        }, {
-          id: 3,
-          name: 'echo:delete',
-          key: 'echo:delete'
-        }];
-        getComponent({
-          mode: 'non-restrictive',
-          items: itemsWithDuplicatePartialString
-        });
-        input = screen.getByRole('combobox');
-        expect(input).toHaveValue('');
-        value = 'echo:r';
-        _context36.next = 7;
-        return userEvent.type(input, value);
-      case 7:
-        _context36.next = 9;
-        return userEvent.type(input, '{enter}');
-      case 9:
-        expect(input).toHaveValue('');
-        expect(screen.queryByText(value)).toBeInTheDocument();
-        _context36.next = 13;
-        return userEvent.type(input, value);
-      case 13:
-        _context36.next = 15;
-        return userEvent.type(input, '{enter}');
-      case 15:
-        expect(input).not.toHaveValue('');
-        expect(input).toHaveValue(value);
-      case 17:
-      case "end":
-        return _context36.stop();
-    }
-  }, _callee34);
-})));
-test('in condensed mode, onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee35() {
-  var listBox;
-  return _regeneratorRuntime().wrap(function _callee35$(_context37) {
-    while (1) switch (_context37.prev = _context37.next) {
-      case 0:
-        render(___EmotionJSX(ComponentOnPrevLoad, {
-          mode: "condensed"
-        }));
-        _context37.next = 3;
-        return userEvent.tab();
-      case 3:
-        listBox = screen.getAllByRole('listbox');
-        fireEvent.scroll(listBox[0], {
-          target: {
-            scrollY: 450
-          }
-        });
-        expect(onLoadMoreFunc).toHaveBeenCalled();
-        fireEvent.scroll(listBox[0], {
-          target: {
-            scrollY: 0
-          }
-        });
-        expect(onLoadPrevFunc).toHaveBeenCalled();
-      case 8:
-      case "end":
-        return _context37.stop();
-    }
-  }, _callee35);
-})));
-test('in condensed mode, hasNoSelectAll hides the select all button', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee36() {
-  var buttons, button;
-  return _regeneratorRuntime().wrap(function _callee36$(_context38) {
-    while (1) switch (_context38.prev = _context38.next) {
-      case 0:
-        getComponent({
-          mode: 'condensed',
-          hasNoSelectAll: true
-        });
-        _context38.next = 3;
-        return userEvent.tab();
-      case 3:
-        buttons = screen.getAllByRole('button');
-        button = buttons[1];
-        expect(button).not.toHaveTextContent('Select All');
-      case 6:
-      case "end":
-        return _context38.stop();
-    }
-  }, _callee36);
-})));
-test('in condensed mode selects and deselects ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee37() {
-  var listbox, options, firstOption, buttons, button;
-  return _regeneratorRuntime().wrap(function _callee37$(_context39) {
-    while (1) switch (_context39.prev = _context39.next) {
-      case 0:
-        getComponent({
-          mode: 'condensed'
-        });
-        _context39.next = 3;
-        return userEvent.tab();
-      case 3:
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        buttons = screen.getAllByRole('button');
-        button = buttons[1];
-        expect(button).toHaveTextContent('Select All');
-        _context39.next = 11;
-        return userEvent.click(button);
-      case 11:
-        expect(button).toHaveTextContent('Deselect All');
-        expect(screen.getByText('All Selected')).toBeInTheDocument();
-        _context39.next = 15;
-        return userEvent.click(firstOption);
-      case 15:
-        expect(button).toHaveTextContent('Select All');
-        expect(screen.getByText('2 Selected')).toBeInTheDocument();
-        _context39.next = 19;
-        return userEvent.click(firstOption);
-      case 19:
-        expect(button).toHaveTextContent('Deselect All');
-        _context39.next = 22;
-        return userEvent.click(button);
-      case 22:
-        expect(button).toHaveTextContent('Select All');
-      case 23:
-      case "end":
-        return _context39.stop();
-    }
-  }, _callee37);
-})));
-test('in condensed mode custom text props work ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee38() {
-  var listbox, options, firstOption;
-  return _regeneratorRuntime().wrap(function _callee38$(_context40) {
-    while (1) switch (_context40.prev = _context40.next) {
-      case 0:
-        getComponent({
-          mode: 'condensed',
-          placeholder: 'Select Animals',
-          selectedOptionText: selectedOptionText
-        });
-        expect(screen.getByLabelText(labelText)).toHaveAttribute('placeholder', placeholder);
-        _context40.next = 4;
-        return userEvent.tab();
-      case 4:
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        _context40.next = 9;
-        return userEvent.click(firstOption);
-      case 9:
-        expect(screen.getByText('Animals Selected')).toBeInTheDocument();
-      case 10:
-      case "end":
-        return _context40.stop();
-    }
-  }, _callee38);
-})));
-test('in condensed mode "onSelectionChange" is called', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee39() {
-  var onSelectionChange, input, value, option;
-  return _regeneratorRuntime().wrap(function _callee39$(_context41) {
-    while (1) switch (_context41.prev = _context41.next) {
-      case 0:
-        onSelectionChange = jest.fn();
-        getComponent({
-          mode: 'condensed',
-          onSelectionChange: onSelectionChange
-        });
-        input = screen.getByRole('combobox');
-        value = 'Aardvark';
-        _context41.next = 6;
-        return userEvent.type(input, value);
-      case 6:
-        option = within(screen.getByRole('listbox')).getByRole('option');
-        _context41.next = 9;
-        return userEvent.click(option);
-      case 9:
-        expect(screen.getByText('1 Selected')).toBeInTheDocument();
-        expect(onSelectionChange).toBeCalledTimes(1);
-        expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
-      case 12:
-      case "end":
-        return _context41.stop();
-    }
-  }, _callee39);
-})));
-test('opening and closing listbox fires "onOpenChange" in condensed mode', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee40() {
-  var onOpenChange, input;
-  return _regeneratorRuntime().wrap(function _callee40$(_context42) {
-    while (1) switch (_context42.prev = _context42.next) {
-      case 0:
-        onOpenChange = jest.fn();
-        getComponent({
-          mode: 'condensed',
-          onOpenChange: onOpenChange
-        });
-        input = screen.getByRole('combobox');
-        _context42.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        _context42.next = 10;
-        return act(function () {
-          input.blur();
-        });
-      case 10:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-      case 12:
-      case "end":
-        return _context42.stop();
-    }
-  }, _callee40);
-})));
-test('in condensed mode, clicking outside of listbox closes listbox', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee41() {
-  var onOpenChange, input;
-  return _regeneratorRuntime().wrap(function _callee41$(_context43) {
-    while (1) switch (_context43.prev = _context43.next) {
-      case 0:
-        onOpenChange = jest.fn();
-        getComponent({
-          mode: 'condensed',
-          onOpenChange: onOpenChange
-        });
-        input = screen.getByRole('combobox');
-        _context43.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        _context43.next = 10;
-        return userEvent.click(document.body);
-      case 10:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-      case 12:
-      case "end":
-        return _context43.stop();
-    }
-  }, _callee41);
-})));
-test('in condensed mode, tabbing outside of listbox closes listbox', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee42() {
-  var onOpenChange, input;
-  return _regeneratorRuntime().wrap(function _callee42$(_context44) {
-    while (1) switch (_context44.prev = _context44.next) {
-      case 0:
-        onOpenChange = jest.fn();
-        getComponent({
-          mode: 'condensed',
-          onOpenChange: onOpenChange
-        });
-        input = screen.getByRole('combobox');
-        _context44.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        // one tab to move focus to select all button
-        _context44.next = 10;
-        return userEvent.tab();
-      case 10:
-        _context44.next = 12;
-        return userEvent.tab();
-      case 12:
-        _context44.next = 14;
-        return userEvent.tab();
-      case 14:
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-      case 16:
-      case "end":
-        return _context44.stop();
-    }
-  }, _callee42);
-})));
-test('selected keys in condensed mode ', function () {
-  getComponent({
-    mode: 'condensed',
-    selectedKeys: [items[1].key, items[2].key]
-  });
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  expect(screen.getByText('2 Selected')).toBeInTheDocument();
-});
-test('default selected keys in condensed mode ', function () {
-  getComponent({
-    mode: 'condensed',
-    defaultSelectedKeys: [items[1].key, items[2].key]
-  });
-  var listbox = screen.queryByRole('listbox');
-  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 ', /*#__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) {
-      case 0:
-        onInputChange = jest.fn();
-        getComponent({
-          mode: 'condensed',
-          defaultSelectedKeys: [items[1].key, items[2].key],
-          onInputChange: onInputChange
-        });
-        input = screen.getByRole('combobox');
-        value = 'Aardvark';
-        _context45.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(screen.getByText('2 Selected')).toBeInTheDocument();
-      case 11:
-      case "end":
-        return _context45.stop();
-    }
-  }, _callee43);
-})));
-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({
-          mode: 'condensed',
-          onFocus: onFocus
-        });
-        input = screen.getByRole('combobox');
-        _context47.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.getByRole('listbox')).toBeInTheDocument();
-        options = screen.getAllByRole('option');
-        expect(options.length).toBe(items.length);
-        expect(options[0]).toHaveTextContent(items[0].name);
-        expect(onFocus).toBeCalled();
-      case 11:
-      case "end":
-        return _context47.stop();
-    }
-  }, _callee45);
-})));
-test('closes listbox on blur and fires "onBlur"', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee46() {
-  var onBlur, input;
-  return _regeneratorRuntime().wrap(function _callee46$(_context48) {
-    while (1) switch (_context48.prev = _context48.next) {
-      case 0:
-        onBlur = jest.fn();
-        getComponent({
-          mode: 'condensed',
-          onBlur: onBlur
-        });
-        input = screen.getByRole('combobox');
-        _context48.next = 5;
-        return userEvent.tab();
-      case 5:
-        expect(input).toHaveFocus();
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        act(function () {
-          input.blur();
-        });
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(onBlur).toBeCalled();
-      case 10:
-      case "end":
-        return _context48.stop();
-    }
-  }, _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 _callee47$(_context49) {
-    while (1) switch (_context49.prev = _context49.next) {
-      case 0:
-        getComponent({
-          mode: 'condensed'
-        });
-        _context49.next = 3;
-        return userEvent.tab();
-      case 3:
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        firstOption = options[0];
-        secondOption = options[1];
-        buttons = screen.getAllByRole('button');
-        button = buttons[1];
-        _context49.next = 11;
-        return userEvent.tab();
-      case 11:
-        expect(button).toHaveFocus();
-        _context49.next = 14;
-        return userEvent.tab();
-      case 14:
-        expect(firstOption).toHaveFocus();
-        _context49.next = 17;
-        return userEvent.type(firstOption, '{arrowdown}', {
-          skipClick: true
-        });
-      case 17:
-        expect(secondOption).toHaveFocus();
-      case 18:
-      case "end":
-        return _context49.stop();
-    }
-  }, _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 _callee48$(_context50) {
-    while (1) switch (_context50.prev = _context50.next) {
-      case 0:
-        getComponent({
-          mode: 'condensed'
-        });
-        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-        expect(screen.queryByRole('option')).not.toBeInTheDocument();
-        input = screen.getByRole('combobox');
-        _context50.next = 6;
-        return userEvent.click(input);
-      case 6:
-        listbox = screen.getByRole('listbox');
-        options = within(listbox).getAllByRole('option');
-        checkboxes = within(listbox).getAllByRole('img');
-        expect(checkboxes.length).toBe(3);
-        secondOption = options[1];
-        _context50.next = 13;
-        return userEvent.click(secondOption);
-      case 13:
-        value = 'Aardvark';
-        _context50.next = 16;
-        return userEvent.type(input, value);
-      case 16:
-        _context50.next = 18;
-        return userEvent.click(document.body);
-      case 18:
-        expect(input).toHaveValue('');
-        expect(listbox).not.toBeInTheDocument();
-      case 20:
-      case "end":
-        return _context50.stop();
-    }
-  }, _callee48);
-})));
-test('trigger button handles popover open and close in condensed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee49() {
-  var input;
-  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');
-        _context51.next = 5;
-        return userEvent.click(screen.getAllByRole('button')[0]);
-      case 5:
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(input).toHaveFocus();
-        _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 _context51.stop();
-    }
-  }, _callee49);
-})));
-test('renders items with duplicate keys', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee50() {
-  var input, options;
-  return _regeneratorRuntime().wrap(function _callee50$(_context52) {
-    while (1) switch (_context52.prev = _context52.next) {
-      case 0:
-        getComponent({
-          items: _mapInstanceProperty(items).call(items, function (item) {
-            return _objectSpread(_objectSpread({}, item), {}, {
-              key: 'DUPLICATE_KEY'
-            });
-          }),
-          mode: 'condensed'
-        });
-        input = screen.getByRole('combobox');
-        _context52.next = 4;
-        return userEvent.tab();
-      case 4:
-        expect(input).toHaveFocus();
-        expect(screen.getByRole('listbox')).toBeInTheDocument();
-        options = screen.getAllByRole('option');
-        expect(options.length).toBe(1);
-      case 8:
-      case "end":
-        return _context52.stop();
-    }
-  }, _callee50);
-})));
-test('should render items with sections passed in props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee51() {
-  var input;
-  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');
-        _context53.next = 6;
-        return userEvent.click(input);
-      case 6:
-        expect(screen.getAllByRole('group')).toHaveLength(2);
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(screen.queryAllByRole('option')).toHaveLength(5);
-      case 9:
-      case "end":
-        return _context53.stop();
-    }
-  }, _callee51);
-})));
-test('should render the separators', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee52() {
-  var input, groups;
-  return _regeneratorRuntime().wrap(function _callee52$(_context54) {
-    while (1) switch (_context54.prev = _context54.next) {
-      case 0:
-        getSectionsComponent();
-        input = screen.getByRole('combobox');
-        _context54.next = 4;
-        return userEvent.click(input);
-      case 4:
-        expect(screen.queryAllByRole('separator')).toHaveLength(3);
-        groups = screen.getAllByRole('group');
-        expect(groups).toHaveLength(2);
-        expect(screen.queryByRole('listbox')).toBeInTheDocument();
-        expect(screen.queryAllByRole('option')).toHaveLength(5);
-        _forEachInstanceProperty(groups).call(groups, function (group, index) {
-          expect(function () {
-            return within(group).getByText(withSection[index].name);
-          });
-          var itemOpt = withSection[index].options;
-          if (_Array$isArray(itemOpt)) {
-            _forEachInstanceProperty(itemOpt).call(itemOpt, function (opt) {
-              return expect(function () {
-                return within(group).getByText(opt.name);
-              });
-            });
-          }
-        });
-      case 10:
-      case "end":
-        return _context54.stop();
-    }
-  }, _callee52);
-})));
-test('renders duplicate groups for duplicate keys on items group ', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee53() {
-  var input;
-  return _regeneratorRuntime().wrap(function _callee53$(_context55) {
-    while (1) switch (_context55.prev = _context55.next) {
-      case 0:
-        getSectionsComponent({
-          items: _mapInstanceProperty(withSection).call(withSection, function (item) {
-            return _objectSpread(_objectSpread({}, item), {}, {
-              key: 'DUPLICATE_KEY'
-            });
-          })
-        });
-        input = screen.getByRole('combobox');
-        _context55.next = 4;
-        return userEvent.click(input);
-      case 4:
-        expect(screen.getAllByRole('group')).not.toHaveLength(2);
-      case 5:
-      case "end":
-        return _context55.stop();
-    }
-  }, _callee53);
-})));
-test('onLoadMore and onLoadPrev callbacks are called', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee54() {
-  var listBox;
-  return _regeneratorRuntime().wrap(function _callee54$(_context56) {
-    while (1) switch (_context56.prev = _context56.next) {
-      case 0:
-        render(___EmotionJSX(ComponentOnPrevLoad, null));
-        _context56.next = 3;
-        return userEvent.tab();
-      case 3:
-        listBox = screen.getAllByRole('listbox');
-        fireEvent.scroll(listBox[0], {
-          target: {
-            scrollY: 450
-          }
-        });
-        expect(onLoadMoreFunc).toHaveBeenCalled();
-        fireEvent.scroll(listBox[0], {
-          target: {
-            scrollY: 0
-          }
-        });
-        expect(onLoadPrevFunc).toHaveBeenCalled();
-      case 8:
-      case "end":
-        return _context56.stop();
-    }
-  }, _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({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
-      return ___EmotionJSX(Item, {
-        key: item.key,
-        "data-id": item.name
-      }, item.name);
-    }));
-  }
-});
-universalFieldComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
-      return ___EmotionJSX(Item, {
-        key: item.key,
-        "data-id": item.name
-      }, item.name);
-    }));
-  },
-  testValue: items[0].name,
-  testLabel: defaultProps.label,
-  componentType: 'MultivaluesField'
-});
-test('in condensed mode, arrow icon SVG has aria-hidden="true" to be hidden from screen readers', function () {
-  getComponent({
-    mode: 'condensed'
-  });
-  // The presentational arrow icon (MenuDown/MenuUp) in the condensed mode trigger
-  // button receives aria-hidden="true" via props, making it invisible to screen
-  // readers. Scope the query to the trigger button (tabIndex=-1) to avoid
-  // accidentally matching any other aria-hidden SVG added in future.
-  var arrowIconSvg = document.querySelector('button[tabindex="-1"] svg[aria-hidden="true"]');
-  expect(arrowIconSvg).toBeInTheDocument();
-  expect(arrowIconSvg).toHaveAttribute('aria-hidden', 'true');
-});
-test('in condensed mode, arrow icon SVG has an empty title element so no tooltip is shown', function () {
-  getComponent({
-    mode: 'condensed'
-  });
-  // title={{ name: '' }} renders an empty SVG <title> element, suppressing
-  // the browser-native tooltip that would otherwise appear on hover.
-  var arrowIconSvg = document.querySelector('button[tabindex="-1"] svg[aria-hidden="true"]');
-  expect(arrowIconSvg).toBeInTheDocument();
-  var titleElement = arrowIconSvg.querySelector('title');
-  expect(titleElement).toBeInTheDocument();
-  expect(titleElement).toHaveTextContent('');
-});
-test('MultivaluesField and DatePicker popovers open correctly when inside a Modal (UXE-8666)', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee59() {
-  var multivaluesFieldItems, ModalApp, combobox, listbox, node, datepickerPopover, dateButtons, firstAvailableDate;
-  return _regeneratorRuntime().wrap(function _callee59$(_context62) {
-    while (1) switch (_context62.prev = _context62.next) {
-      case 0:
-        multivaluesFieldItems = [{
-          id: 1,
-          key: 'Aardvark',
-          name: 'Aardvark'
-        }, {
-          id: 2,
-          key: 'Kangaroo',
-          name: 'Kangaroo'
-        }, {
-          id: 3,
-          key: 'Snake',
-          name: 'Snake'
-        }];
-        ModalApp = function ModalApp() {
-          var _useState3 = useState(false),
-            _useState4 = _slicedToArray(_useState3, 2),
-            isOpen = _useState4[0],
-            setIsOpen = _useState4[1];
-          var _useState5 = useState([]),
-            _useState6 = _slicedToArray(_useState5, 2),
-            selectedKeys = _useState6[0],
-            setSelectedKeys = _useState6[1];
-          var _useState7 = useState(null),
-            _useState8 = _slicedToArray(_useState7, 2),
-            selectedDate = _useState8[0],
-            setSelectedDate = _useState8[1];
-          return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
-            onPress: function onPress() {
-              return setIsOpen(true);
-            }
-          }, "Launch Modal"), isOpen && ___EmotionJSX(Modal, {
-            title: "test",
-            isOpen: isOpen,
-            onClose: function onClose() {
-              return setIsOpen(false);
-            },
-            hasCloseButton: true,
-            isDismissable: true
-          }, ___EmotionJSX(MultivaluesField, {
-            label: "Test Multivalues",
-            items: multivaluesFieldItems,
-            selectedKeys: selectedKeys,
-            onSelectionChange: function onSelectionChange(keys) {
-              var _context57;
-              return setSelectedKeys(_mapInstanceProperty(_context57 = _Array$from(keys)).call(_context57, function (k) {
-                return k.toString();
-              }));
-            },
-            mode: "non-restrictive"
-          }, function (item) {
-            return ___EmotionJSX(Item, {
-              key: item.key,
-              "data-id": item.name,
-              "aria-label": item.name
-            }, item.name);
-          }), ___EmotionJSX(DatePicker, {
-            label: "Select a date",
-            value: selectedDate,
-            onChange: setSelectedDate
-          })));
-        };
-        render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ModalApp, null)));
-        _context62.next = 5;
-        return userEvent.click(screen.getByRole('button', {
-          name: 'Launch Modal'
-        }));
-      case 5:
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-        // MultivaluesField: focus opens the listbox
-        combobox = screen.getByRole('combobox');
-        _context62.next = 9;
-        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee55() {
-          return _regeneratorRuntime().wrap(function _callee55$(_context58) {
-            while (1) switch (_context58.prev = _context58.next) {
-              case 0:
-                combobox.focus();
-              case 1:
-              case "end":
-                return _context58.stop();
-            }
-          }, _callee55);
-        })));
-      case 9:
-        _context62.next = 11;
-        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee56() {
-          return _regeneratorRuntime().wrap(function _callee56$(_context59) {
-            while (1) switch (_context59.prev = _context59.next) {
-              case 0:
-              case "end":
-                return _context59.stop();
-            }
-          }, _callee56);
-        })));
-      case 11:
-        listbox = screen.queryByRole('listbox');
-        expect(listbox).toBeInTheDocument();
-
-        /* eslint-disable testing-library/no-node-access */
-        node = listbox;
-        while (node && node !== document.body) {
-          expect(node).not.toHaveAttribute('aria-hidden', 'true');
-          node = node.parentElement;
-        }
-        /* eslint-enable testing-library/no-node-access */
-
-        // Click an option — verify it is selectable (option disappears and a badge appears)
-        _context62.next = 17;
-        return userEvent.click(screen.getByRole('option', {
-          name: 'Aardvark'
-        }));
-      case 17:
-        expect(screen.getByText('Aardvark')).toBeInTheDocument();
-
-        // Close the listbox before opening DatePicker
-        _context62.next = 20;
-        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee57() {
-          return _regeneratorRuntime().wrap(function _callee57$(_context60) {
-            while (1) switch (_context60.prev = _context60.next) {
-              case 0:
-                combobox.blur();
-              case 1:
-              case "end":
-                return _context60.stop();
-            }
-          }, _callee57);
-        })));
-      case 20:
-        _context62.next = 22;
-        return userEvent.click(screen.getByRole('button', {
-          name: /calendar/i
-        }));
-      case 22:
-        _context62.next = 24;
-        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee58() {
-          return _regeneratorRuntime().wrap(function _callee58$(_context61) {
-            while (1) switch (_context61.prev = _context61.next) {
-              case 0:
-              case "end":
-                return _context61.stop();
-            }
-          }, _callee58);
-        })));
-      case 24:
-        datepickerPopover = screen.queryByTestId('popover-container');
-        expect(datepickerPopover).toBeInTheDocument();
-
-        /* eslint-disable testing-library/no-node-access */
-        node = datepickerPopover;
-        while (node && node !== document.body) {
-          expect(node).not.toHaveAttribute('aria-hidden', 'true');
-          node = node.parentElement;
-        }
-        /* eslint-enable testing-library/no-node-access */
-
-        // Click a calendar date — verify the date field updates
-        dateButtons = screen.getAllByRole('button');
-        firstAvailableDate = _findInstanceProperty(dateButtons).call(dateButtons, function (btn) {
-          var _btn$getAttribute;
-          return (_btn$getAttribute = btn.getAttribute('aria-label')) === null || _btn$getAttribute === void 0 ? void 0 : _btn$getAttribute.match(/\w+day,/);
-        });
-        _context62.next = 32;
-        return userEvent.click(firstAvailableDate);
-      case 32:
-        expect(screen.queryByTestId('date-field')).not.toHaveValue('');
-      case 33:
-      case "end":
-        return _context62.stop();
-    }
-  }, _callee59);
-})));