@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.210

package/lib/components/Combobox/index.test.js

@@ -20,6 +20,10 @@ var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -82,14 +86,38 @@ describe('Combobox', function () {
       expect(queryByLabelText('test')).toHaveFocus();
     });
   });
-  describe('when the input field has focus', function () {
-    it('displays the list of options', function () {
+  describe('when the label is hidden', function () {
+    it('does not display the label element', function () {
       var _render2 = render(_react.default.createElement(_.default, {
+        label: "test",
+        options: defaultOptions,
+        hideLabel: true
+      })),
+          getByText = _render2.getByText;
+
+      expect(getByText('test', {
+        selector: 'span'
+      })).not.toBeVisible();
+    });
+    it('does display the input related to the label', function () {
+      var _render3 = render(_react.default.createElement(_.default, {
+        label: "test",
+        options: defaultOptions,
+        hideLabel: true
+      })),
+          getByLabelText = _render3.getByLabelText;
+
+      expect(getByLabelText('test')).toBeVisible();
+    });
+  });
+  describe('when the input field is clicked', function () {
+    it('displays the list of options', function () {
+      var _render4 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render2.baseElement,
-          queryByLabelText = _render2.queryByLabelText;
+          baseElement = _render4.baseElement,
+          queryByLabelText = _render4.queryByLabelText;
 
       defaultOptions.forEach(function (_ref2) {
         var label = _ref2.label;
@@ -104,18 +132,18 @@ describe('Combobox', function () {
       });
     });
     it('renders the first item in the options list as "active"', function () {
-      var _render3 = render(_react.default.createElement(_.default, {
+      var _render5 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render3.baseElement,
-          queryByText = _render3.queryByText;
+          baseElement = _render5.baseElement,
+          queryByText = _render5.queryByText;
 
       _react2.fireEvent.click(queryByText('test')); // The structure would match the querySelector `li label span`. `queryByText`
       // returns the <span>, but we need the `<li>`
 
 
-      var li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement; // These two CSS values make an option look "active".
+      var li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement; // These two CSS values make an option look "active".
 
       expect(li).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n        color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n      "));
     });
@@ -130,41 +158,44 @@ describe('Combobox', function () {
             chevronUpContainer = _rtlRender2.container;
 
         var chevronUpPathD = chevronUpContainer.querySelector('svg path').getAttribute('d');
+        var onShow = jest.fn();
 
-        var _render4 = render(_react.default.createElement(_.default, {
+        var _render6 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
-          variant: "sync"
+          variant: "sync",
+          onShow: onShow
         })),
-            container = _render4.container,
-            queryByLabelText = _render4.queryByLabelText;
+            container = _render6.container,
+            queryByLabelText = _render6.queryByLabelText;
 
         expect(container.querySelector('svg path').getAttribute('d')).toEqual(chevronDownPathD);
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
+        expect(onShow).toHaveBeenCalledTimes(1);
         expect(container.querySelector('svg path').getAttribute('d')).toEqual(chevronUpPathD);
       });
     });
     describe('when variant="async"', function () {
       it('does NOT render a chevron, even when it has options', function () {
-        var _render5 = render(_react.default.createElement(_.default, {
+        var _render7 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           variant: "async"
         })),
-            container = _render5.container;
+            container = _render7.container;
 
         expect(container.querySelector('svg')).not.toBeInTheDocument();
       });
     });
     describe('when typing', function () {
       it('updates the input value as a stateful component', function () {
-        var _render6 = render(_react.default.createElement(_.default, {
+        var _render8 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            queryByLabelText = _render6.queryByLabelText;
+            queryByLabelText = _render8.queryByLabelText;
 
         var value = 'value';
 
@@ -187,12 +218,12 @@ describe('Combobox', function () {
           eventTargetValue = event.target.value;
         });
 
-        var _render7 = render(_react.default.createElement(_.default, {
+        var _render9 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeInputValue: onChangeInputValue
         })),
-            queryByLabelText = _render7.queryByLabelText;
+            queryByLabelText = _render9.queryByLabelText;
 
         var value = 'value';
 
@@ -206,13 +237,13 @@ describe('Combobox', function () {
         expect(eventTargetValue).toEqual(value);
       });
       it('renders new options without losing focus on input or closing dropdown', function () {
-        var _render8 = render(_react.default.createElement(_.default, {
+        var _render10 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render8.baseElement,
-            queryByLabelText = _render8.queryByLabelText,
-            rerender = _render8.rerender;
+            baseElement = _render10.baseElement,
+            queryByLabelText = _render10.queryByLabelText,
+            rerender = _render10.rerender;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -232,15 +263,15 @@ describe('Combobox', function () {
       describe('when variant="async"', function () {
         describe('when loading', function () {
           it('renders the loading message, then options', function () {
-            var _render9 = render(_react.default.createElement(_.default, {
+            var _render11 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions,
               defaultInputValue: "option",
               variant: "async"
             })),
-                baseElement = _render9.baseElement,
-                queryByLabelText = _render9.queryByLabelText,
-                rerender = _render9.rerender;
+                baseElement = _render11.baseElement,
+                queryByLabelText = _render11.queryByLabelText,
+                rerender = _render11.rerender;
 
             _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -269,16 +300,16 @@ describe('Combobox', function () {
         describe('when variant="async"', function () {
           describe('when loading={true} then toggles to loading={false}', function () {
             it('renders the no matches found message', function () {
-              var _render10 = render(_react.default.createElement(_.default, {
+              var _render12 = render(_react.default.createElement(_.default, {
                 label: "test",
                 loading: false,
                 options: [],
                 variant: "async"
               })),
-                  baseElement = _render10.baseElement,
-                  queryByLabelText = _render10.queryByLabelText,
-                  queryByText = _render10.queryByText,
-                  rerender = _render10.rerender;
+                  baseElement = _render12.baseElement,
+                  queryByLabelText = _render12.queryByLabelText,
+                  queryByText = _render12.queryByText,
+                  rerender = _render12.rerender;
 
               _react2.fireEvent.click(queryByText('test')); // at this stage, the dropdown shouldn't be open.
 
@@ -315,13 +346,13 @@ describe('Combobox', function () {
         });
         describe('when variant="sync"', function () {
           it('renders the no matches found message', function () {
-            var _render11 = render(_react.default.createElement(_.default, {
+            var _render13 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions
             })),
-                baseElement = _render11.baseElement,
-                queryByLabelText = _render11.queryByLabelText,
-                rerender = _render11.rerender;
+                baseElement = _render13.baseElement,
+                queryByLabelText = _render13.queryByLabelText,
+                rerender = _render13.rerender;
 
             _react2.fireEvent.click(queryByLabelText('test')); // at this stage, the dropdown should be open with all of the available options.
 
@@ -353,17 +384,24 @@ describe('Combobox', function () {
             chevronDownContainer = _rtlRender3.container;
 
         var chevronDownPathD = chevronDownContainer.querySelector('svg path').getAttribute('d');
+        var onShow = jest.fn();
+        var onHide = jest.fn();
 
-        var _render12 = render(_react.default.createElement(_.default, {
+        var _render14 = render(_react.default.createElement(_.default, {
           label: "test",
-          options: defaultOptions
+          options: defaultOptions,
+          onShow: onShow,
+          onHide: onHide
         })),
-            baseElement = _render12.baseElement,
-            container = _render12.container,
-            queryByLabelText = _render12.queryByLabelText;
+            baseElement = _render14.baseElement,
+            container = _render14.container,
+            queryByLabelText = _render14.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
+        expect(onShow).toHaveBeenCalledTimes(1);
+        expect(onHide).not.toHaveBeenCalled();
+
         _react2.fireEvent.change(queryByLabelText('test'), {
           target: {
             value: 'value'
@@ -377,6 +415,8 @@ describe('Combobox', function () {
           keyCode: 13
         });
 
+        expect(onShow).toHaveBeenCalledTimes(1);
+        expect(onHide).toHaveBeenCalledTimes(1);
         expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label)).not.toBeInTheDocument();
         expect( // The svg path [0] is the "X" in the clear button
         container.querySelectorAll('svg path')[1].getAttribute('d')).toEqual(chevronDownPathD);
@@ -384,14 +424,14 @@ describe('Combobox', function () {
       it('selects the active (first) item in the dropdown list', function () {
         var onChangeValue = jest.fn();
 
-        var _render13 = render(_react.default.createElement(_.default, {
+        var _render15 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            baseElement = _render13.baseElement,
-            queryByText = _render13.queryByText,
-            queryByLabelText = _render13.queryByLabelText;
+            baseElement = _render15.baseElement,
+            queryByText = _render15.queryByText,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -408,9 +448,59 @@ describe('Combobox', function () {
           keyCode: 13
         });
 
-        expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[0].id);
+        expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[0].id, expect.objectContaining({
+          removed: false
+        }));
         expect(queryByLabelText('test')).toHaveValue(defaultOptions[0].label);
       });
+      describe('with first element disabled', function () {
+        it('selects the first element that is not disabled', function () {
+          var onChangeValue = jest.fn();
+          var options = [{
+            id: '0',
+            label: 'option 0',
+            value: 'option 0',
+            disabled: true
+          }, {
+            id: '1',
+            label: 'option 1',
+            value: 'option 1'
+          }, {
+            id: '2',
+            label: 'option 2',
+            value: 'option 2'
+          }];
+
+          var _render16 = render(_react.default.createElement(_.default, {
+            label: "test",
+            onChangeValue: onChangeValue,
+            options: options
+          })),
+              baseElement = _render16.baseElement,
+              queryByText = _render16.queryByText,
+              queryByLabelText = _render16.queryByLabelText;
+
+          _react2.fireEvent.click(queryByText('test'));
+
+          _react2.fireEvent.change(queryByLabelText('test'), {
+            target: {
+              value: 'value'
+            }
+          });
+
+          expect((0, _react2.queryByText)(baseElement, options[1].label)).toBeInTheDocument();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'Enter',
+            keyCode: 13
+          });
+
+          expect(onChangeValue).toHaveBeenCalledWith(options[1].id, expect.objectContaining({
+            removed: false
+          }));
+          expect(queryByLabelText('test')).toHaveValue(options[1].label);
+        });
+      });
     });
     describe('when pressing the TAB key', function () {
       it('closes the dropdown, advances focus', function () {
@@ -419,14 +509,14 @@ describe('Combobox', function () {
 
         var chevronDownPathD = chevronDownContainer.querySelector('svg path').getAttribute('d');
 
-        var _render14 = render(_react.default.createElement(_.default, {
+        var _render17 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render14.baseElement,
-            container = _render14.container,
-            queryByText = _render14.queryByText,
-            queryByLabelText = _render14.queryByLabelText;
+            baseElement = _render17.baseElement,
+            container = _render17.container,
+            queryByText = _render17.queryByText,
+            queryByLabelText = _render17.queryByLabelText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -455,12 +545,12 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render15 = render(_react.default.createElement(_.default, {
+        var _render18 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            queryByLabelText = _render15.queryByLabelText;
+            queryByLabelText = _render18.queryByLabelText;
 
         var value = 'value';
 
@@ -488,22 +578,22 @@ describe('Combobox', function () {
         var onChangeInputValue = jest.fn();
         var onChangeValue = jest.fn();
 
-        var _render16 = render(_react.default.createElement(_.default, {
+        var _render19 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue,
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            baseElement = _render16.baseElement,
-            queryByLabelText = _render16.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+            baseElement = _render19.baseElement,
+            queryByLabelText = _render19.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
         // This click focuses on the input.
 
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default.
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        ")); // The focus should always remain on the input. The "active" item is kind of a fake.
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        ")); // The focus should always remain on the input. The "active" item is kind of a fake.
 
         expect(queryByLabelText('test')).toHaveFocus();
 
@@ -512,8 +602,8 @@ describe('Combobox', function () {
           keyCode: 40
         });
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
         expect(queryByLabelText('test')).toHaveFocus();
 
         _react2.fireEvent.keyDown(queryByLabelText('test'), {
@@ -521,22 +611,94 @@ describe('Combobox', function () {
           keyCode: 38
         });
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
         expect(queryByLabelText('test')).toHaveFocus();
         expect(onChangeInputValue).not.toHaveBeenCalled();
         expect(onChangeValue).not.toHaveBeenCalled();
       });
+      describe('with a disabled option', function () {
+        it('expands and navigates through the dropdown list, keeps focus on the input', function () {
+          var onChangeInputValue = jest.fn();
+          var onChangeValue = jest.fn();
+          var enabledElements = ['enabled 1', 'enabled 2'];
+          var options = [{
+            id: enabledElements[0],
+            label: enabledElements[0],
+            value: 'option 0'
+          }, {
+            id: '1',
+            label: 'option 1',
+            value: 'option 1',
+            disabled: true
+          }, {
+            label: 'category 0',
+            items: [{
+              id: 'cat0Opt0',
+              label: 'category 0 option 0',
+              value: 'category 0 option 0',
+              disabled: true
+            }, {
+              id: enabledElements[1],
+              label: enabledElements[1],
+              value: 'category 0 option 1'
+            }]
+          }];
+
+          var _render20 = render(_react.default.createElement(_.default, {
+            label: "test",
+            onChangeInputValue: onChangeInputValue,
+            onChangeValue: onChangeValue,
+            options: options
+          })),
+              baseElement = _render20.baseElement,
+              queryByLabelText = _render20.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+          // This click focuses on the input.
+
+
+          _react2.fireEvent.click(queryByLabelText('test'));
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0])).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The focus should always remain on the input. The "active" item is kind of a fake.
+
+          expect(queryByLabelText('test')).toHaveFocus();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'ArrowDown',
+            keyCode: 40
+          });
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the next element in the list
+          // that is not marked as disabled
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect(queryByLabelText('test')).toHaveFocus();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'ArrowUp',
+            keyCode: 38
+          });
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the previous element in the list
+          // that is not marked as disabled
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect(queryByLabelText('test')).toHaveFocus();
+          expect(onChangeInputValue).not.toHaveBeenCalled();
+          expect(onChangeValue).not.toHaveBeenCalled();
+        });
+      });
     });
     describe('when pressing the ESCAPE key', function () {
       it('closes the dropdown, keeps focus on input', function () {
-        var _render17 = render(_react.default.createElement(_.default, {
+        var _render21 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render17.baseElement,
-            queryByLabelText = _render17.queryByLabelText,
-            queryByText = _render17.queryByText;
+            baseElement = _render21.baseElement,
+            queryByLabelText = _render21.queryByLabelText,
+            queryByText = _render21.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -554,13 +716,13 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render18 = render(_react.default.createElement(_.default, {
+        var _render22 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            queryByLabelText = _render18.queryByLabelText,
-            queryByText = _render18.queryByText;
+            queryByLabelText = _render22.queryByLabelText,
+            queryByText = _render22.queryByText;
 
         var value = 'value';
 
@@ -586,18 +748,18 @@ describe('Combobox', function () {
   });
   describe('when the input field has text', function () {
     it('renders the "clear" button', function () {
-      var _render19 = render(_react.default.createElement(_Times.default, null)),
-          timesContainer = _render19.container;
+      var _render23 = render(_react.default.createElement(_Times.default, null)),
+          timesContainer = _render23.container;
 
       var timesPathD = timesContainer.querySelector('svg path').getAttribute('d');
 
-      var _render20 = render(_react.default.createElement(_.default, {
+      var _render24 = render(_react.default.createElement(_.default, {
         defaultInputValue: "value",
         label: "test",
         options: defaultOptions
       })),
-          container = _render20.container,
-          queryByLabelText = _render20.queryByLabelText;
+          container = _render24.container,
+          queryByLabelText = _render24.queryByLabelText;
 
       expect(queryByLabelText('test')).toHaveValue('value');
       expect(container.querySelectorAll('svg path')[0]).toHaveAttribute('d', timesPathD);
@@ -609,12 +771,12 @@ describe('Combobox', function () {
           inputValue = event ? event.target.value : '';
         });
 
-        var _render21 = render(_react.default.createElement(_.default, {
+        var _render25 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue
         })),
-            container = _render21.container,
-            queryByLabelText = _render21.queryByLabelText;
+            container = _render25.container,
+            queryByLabelText = _render25.queryByLabelText;
 
         var value = 'value';
 
@@ -640,30 +802,47 @@ describe('Combobox', function () {
     it('updates the input value with the label of the selection', function () {
       var onChangeValue = jest.fn();
 
-      var _render22 = render(_react.default.createElement(_.default, {
+      var _render26 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render22.baseElement,
-          queryByLabelText = _render22.queryByLabelText;
+          baseElement = _render26.baseElement,
+          queryByLabelText = _render26.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
       _react2.fireEvent.click((0, _react2.queryByText)(baseElement, defaultOptions[1].label));
 
-      expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id);
+      expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
+        removed: false
+      }));
       expect(queryByLabelText('test')).toHaveValue(defaultOptions[1].label); // selecting an option should close the dropdown list
 
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).not.toBeInTheDocument();
     });
+    it('shows the selected tag when multiple select is enabled', function () {
+      var _render27 = render(_react.default.createElement(_.default, {
+        label: "test",
+        multiple: true,
+        options: defaultOptions
+      })),
+          baseElement = _render27.baseElement,
+          queryByLabelText = _render27.queryByLabelText;
+
+      _react2.fireEvent.click(queryByLabelText('test'));
+
+      _react2.fireEvent.click((0, _react2.queryByText)(baseElement, defaultOptions[1].label));
+
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label)).toBeInTheDocument();
+    });
     it('renders as "selected" in the dropdown list', function () {
-      var _render23 = render(_react.default.createElement(_.default, {
+      var _render28 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render23.baseElement,
-          queryByLabelText = _render23.queryByLabelText;
+          baseElement = _render28.baseElement,
+          queryByLabelText = _render28.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -675,20 +854,20 @@ describe('Combobox', function () {
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument();
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n      "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n      "));
     });
     describe('when typing', function () {
       it('does NOT update the selection automatically', function () {
         var onChangeValue = jest.fn();
 
-        var _render24 = render(_react.default.createElement(_.default, {
+        var _render29 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render24.baseElement,
-            queryByLabelText = _render24.queryByLabelText,
-            queryByText = _render24.queryByText;
+            baseElement = _render29.baseElement,
+            queryByLabelText = _render29.queryByLabelText,
+            queryByText = _render29.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -708,20 +887,20 @@ describe('Combobox', function () {
         });
 
         expect(onChangeValue).toHaveBeenCalledTimes(1);
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       });
     });
     describe('when clicking the clear button', function () {
       it('clears the selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render25 = render(_react.default.createElement(_.default, {
+        var _render30 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render25.baseElement,
-            queryByLabelText = _render25.queryByLabelText;
+            baseElement = _render30.baseElement,
+            queryByLabelText = _render30.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -734,7 +913,9 @@ describe('Combobox', function () {
         _react2.fireEvent.click(queryByLabelText('test'));
 
         expect(onChangeValue).toHaveBeenCalledTimes(2);
-        expect(onChangeValue).toHaveBeenCalledWith(undefined);
+        expect(onChangeValue).toHaveBeenCalledWith(null, {
+          removed: true
+        });
         expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       });
     });
@@ -744,7 +925,7 @@ describe('Combobox', function () {
       var onChangeInputValue = jest.fn();
       var onChangeValue = jest.fn();
 
-      var _render26 = render(_react.default.createElement(_.default, {
+      var _render31 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         defaultInputValue: "value",
@@ -752,14 +933,14 @@ describe('Combobox', function () {
         onChangeInputValue: onChangeInputValue,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render26.baseElement,
-          queryByLabelText = _render26.queryByLabelText,
-          rerender = _render26.rerender;
+          baseElement = _render31.baseElement,
+          queryByLabelText = _render31.queryByLabelText,
+          rerender = _render31.rerender;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       rerender(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
@@ -769,70 +950,167 @@ describe('Combobox', function () {
         onChangeValue: onChangeValue
       }));
       expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       expect(onChangeInputValue).not.toHaveBeenCalled();
       expect(onChangeValue).not.toHaveBeenCalled();
     });
   });
   describe('when a controlled component', function () {
-    it('initializes with and prefers prop values', function () {
-      var newInputValue;
-      var onChangeInputValue = jest.fn(function (event) {
-        newInputValue = event ? event.target.value : '';
-      });
-      var onChangeValue = jest.fn();
+    it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              onChangeInputValue = jest.fn(function (event) {
+                newInputValue = event ? event.target.value : '';
+              });
+              onChangeValue = jest.fn();
+              _render32 = render(_react.default.createElement(_.default, {
+                label: "test",
+                options: defaultOptions,
+                inputValue: "value",
+                value: defaultOptions[1].id,
+                onChangeInputValue: onChangeInputValue,
+                onChangeValue: onChangeValue,
+                autoComplete: "auto-complete-test",
+                type: "search"
+              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender;
+
+              _react2.fireEvent.click(queryByLabelText('test'));
+
+              expect(queryByLabelText('test')).toHaveValue('value');
+              expect(queryByLabelText('test')).toHaveAttribute('autoComplete', 'auto-complete-test');
+              expect(queryByLabelText('test')).toHaveAttribute('type', 'search');
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              rerender(_react.default.createElement(_.default, {
+                label: "test",
+                options: defaultOptions,
+                inputValue: "second value",
+                value: defaultOptions[0].id,
+                onChangeInputValue: onChangeInputValue,
+                onChangeValue: onChangeValue
+              }));
+              expect(queryByLabelText('test')).toHaveValue('second value');
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              expect(onChangeInputValue).not.toHaveBeenCalled();
+              expect(onChangeValue).not.toHaveBeenCalled();
 
-      var _render27 = render(_react.default.createElement(_.default, {
-        label: "test",
-        options: defaultOptions,
-        inputValue: "value",
-        value: defaultOptions[1].id,
-        onChangeInputValue: onChangeInputValue,
-        onChangeValue: onChangeValue
-      })),
-          baseElement = _render27.baseElement,
-          queryByLabelText = _render27.queryByLabelText,
-          rerender = _render27.rerender;
+              _react2.fireEvent.change(queryByLabelText('test'), {
+                target: {
+                  value: 'third value'
+                }
+              });
 
-      _react2.fireEvent.click(queryByLabelText('test'));
+              expect(onChangeInputValue).toHaveBeenCalled();
+              expect(newInputValue).toEqual('third value'); // an `inputValue` prop is _always_ preferred. until the component re-renders,
+              // it should have keep the provided input value.
 
-      expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-      rerender(_react.default.createElement(_.default, {
-        label: "test",
-        options: defaultOptions,
-        inputValue: "second value",
-        value: defaultOptions[0].id,
-        onChangeInputValue: onChangeInputValue,
-        onChangeValue: onChangeValue
-      }));
-      expect(queryByLabelText('test')).toHaveValue('second value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-      expect(onChangeInputValue).not.toHaveBeenCalled();
-      expect(onChangeValue).not.toHaveBeenCalled();
+              expect(queryByLabelText('test')).toHaveValue('second value');
 
-      _react2.fireEvent.change(queryByLabelText('test'), {
-        target: {
-          value: 'third value'
-        }
-      });
+              _react2.fireEvent.click((0, _react2.queryByText)(baseElement, defaultOptions[1].label));
 
-      expect(onChangeInputValue).toHaveBeenCalled();
-      expect(newInputValue).toEqual('third value'); // an `inputValue` prop is _always_ preferred. until the component re-renders,
-      // it should have keep the provided input value.
+              expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, {
+                removed: false
+              });
 
-      expect(queryByLabelText('test')).toHaveValue('second value');
+              _react2.fireEvent.click(queryByLabelText('test'));
 
-      _react2.fireEvent.click((0, _react2.queryByText)(baseElement, defaultOptions[1].label));
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
 
-      expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id);
+            case 23:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    describe('when in multiple select mode', function () {
+      describe('when a value is selected', function () {
+        describe('when the "X" button is clicked to deselect a value', function () {
+          it('calls the onChangeValue prop with removed: true', function () {
+            var onChangeValue = jest.fn();
+
+            var _render33 = render(_react.default.createElement(_.default, {
+              label: "test",
+              options: defaultOptions,
+              inputValue: "",
+              value: [defaultOptions[1]],
+              onChangeValue: onChangeValue,
+              multiple: true
+            })),
+                queryByText = _render33.queryByText,
+                queryByLabelText = _render33.queryByLabelText;
 
-      _react2.fireEvent.click(queryByLabelText('test'));
+            expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+            _react2.fireEvent.click(queryByLabelText('Delete'));
+
+            expect(onChangeValue).toHaveBeenCalledWith(defaultOptions[1].id, expect.objectContaining({
+              removed: true
+            }));
+          });
+        });
+      });
     });
   });
+  describe('when the isPopoverVisible is true', function () {
+    it('opens the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _render34, baseElement;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _render34 = render(_react.default.createElement(_.default, {
+                label: "test",
+                options: defaultOptions,
+                hideLabel: true,
+                isPopoverVisible: true
+              })), baseElement = _render34.baseElement;
+              defaultOptions.forEach(function (_ref6) {
+                var label = _ref6.label;
+                expect((0, _react2.queryByText)(baseElement, label)).toBeInTheDocument();
+              });
+
+            case 2:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('does not automatically close the popover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var _render35, baseElement, queryByLabelText;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _render35 = render(_react.default.createElement(_.default, {
+                label: "test",
+                options: defaultOptions,
+                hideLabel: true,
+                isPopoverVisible: true
+              })), baseElement = _render35.baseElement, queryByLabelText = _render35.queryByLabelText;
+
+              _react2.fireEvent.click(queryByLabelText(defaultOptions[0].label));
+
+              defaultOptions.forEach(function (_ref8) {
+                var label = _ref8.label;
+                expect((0, _react2.queryByText)(baseElement, label)).toBeInTheDocument();
+              });
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+  });
 });