import { _ as _slicedToArray } from '../../slicedToArray-BB-AwwkK.js';
import { _ as _asyncToGenerator, r as regenerator } from '../../index-qSfOyGhk.js';
import React__default from 'react';
import { render, screen, act, waitFor } from '@testing-library/react';
import MultiSelectInput from '../input.js';
import MultiSelect from '../index.js';
import userEvent from '@testing-library/user-event';
import '../../typeof-CgC7Bq6K.js';
import '../../defineProperty-CEd-kZQW.js';
import '../../extends-C4cduGrv.js';
import '../../toConsumableArray-dKQYsfpV.js';
import '../../objectWithoutProperties-TXwlfNxG.js';
import '../../index-CMfVNfTW.js';
import 'react-dom';
import 'prop-types';
import 'classnames';
import '../../icon/assets/icon-map/index.js';
import '../../social-icon/index.js';
import '@fortawesome/react-fontawesome';
import '../../social-icon/icons.js';
import '../../social-icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/free-solid-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../../tooltip/index.js';
import '../../auto-id.esm-CjaDlg7r.js';
import '../../utils.esm-BKUEBdyY.js';
import '../../warning-s9zGJbnw.js';
import '../../portal.esm-D9LQ40g_.js';
import '@reach/visually-hidden';
import '../../portal/index.js';
import '../../use-rerender-once/index.js';
import '../../use-force-update/index.js';
import '../../button/button-group.js';
import '../../inject-css-BqVV5N0s.js';
import '../../label/index.js';
import '../../checkbox/index.js';
import '../../select-menu-CMlOgi2H.js';
import '../../_commonjsHelpers-_1FafXWI.js';
import '../filter.js';

describe("MultiSelect", function () {
  it("uses type='input' by default", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelect, {
      options: []
    }));
    var combobox = screen.getByRole("combobox");
    var input = combobox.querySelector("input");
    expect(input).toBeInTheDocument();
  });
  it("uses type='input' when create is true", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelect, {
      options: [],
      create: true
    }));
    var combobox = screen.getByRole("combobox");
    var input = combobox.querySelector("input");
    expect(input).toBeInTheDocument();
  });
  it("uses specified type", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelect, {
      options: [],
      type: "filter"
    }));
    var combobox = screen.getByRole("combobox");
    var input = combobox.querySelector("input");
    expect(input).not.toBeInTheDocument();
  });
  it("applies aria-label to the reference when passed", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
    var trigger, listbox;
    return regenerator.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              "aria-label": "Select an option",
              options: [{
                label: "Option 1",
                value: "option1"
              }, {
                label: "Option 2",
                value: "option2"
              }, {
                label: "Option 3",
                value: "option3"
              }]
            }));
            trigger = screen.getByRole("combobox");
            _context.next = 4;
            return act(function () {
              return userEvent.click(trigger);
            });

          case 4:
            listbox = screen.getByRole("listbox");
            expect(trigger).toHaveAttribute("aria-label", "Select an option");
            expect(listbox).not.toHaveAttribute("aria-label", "Select an option");

          case 7:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  it("applies aria-labelledby to the reference when passed", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
    var trigger, listbox;
    return regenerator.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelect, {
              "aria-labelledby": "my-external-id",
              options: [{
                label: "Option 1",
                value: "option1"
              }, {
                label: "Option 2",
                value: "option2"
              }, {
                label: "Option 3",
                value: "option3"
              }]
            }));
            trigger = screen.getByRole("combobox");
            _context2.next = 4;
            return act(function () {
              return userEvent.click(trigger);
            });

          case 4:
            listbox = screen.getByRole("listbox");
            expect(trigger).toHaveAttribute("aria-labelledby", "my-external-id");
            expect(listbox).not.toHaveAttribute("aria-labelledby", "my-external-id");

          case 7:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
});
describe("MultiselectInput", function () {
  var options = [{
    label: "Walleye",
    value: "walleye"
  }, {
    label: "Bass",
    value: "bass"
  }, {
    label: "Perch",
    value: "perch"
  }];
  it("renders a placeholder when there are no selections", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    expect(combobox).toBeInTheDocument();
    var input = combobox.querySelector("input");
    expect(input).toHaveAttribute("placeholder", "Select");
  });
  it("does not render a placeholder when there are selections", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3() {
    var combobox, listOptions, input;
    return regenerator.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context3.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            listOptions = screen.getAllByRole("option");
            expect(listOptions).toHaveLength(3);
            _context3.next = 8;
            return act(function () {
              return userEvent.click(listOptions[0]);
            });

          case 8:
            input = combobox.querySelector("input");
            expect(input).toHaveAttribute("placeholder", "");

          case 10:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  })));
  it("stays open when an option is selected", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4() {
    var combobox, listOptions;
    return regenerator.wrap(function _callee4$(_context4) {
      while (1) {
        switch (_context4.prev = _context4.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            expect(combobox).toHaveAttribute("aria-expanded", "false");
            _context4.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            expect(combobox).toHaveAttribute("aria-expanded", "true");
            listOptions = screen.getAllByRole("option");
            expect(listOptions).toHaveLength(3);
            expect(listOptions[0]).toHaveAttribute("aria-selected", "false");
            _context4.next = 11;
            return act(function () {
              return userEvent.click(listOptions[0]);
            });

          case 11:
            expect(listOptions[0]).toHaveAttribute("aria-selected", "true");
            expect(combobox).toHaveAttribute("aria-expanded", "true");

          case 13:
          case "end":
            return _context4.stop();
        }
      }
    }, _callee4);
  })));
  it("adds input selections in the order of the options (not order of selections)", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee5() {
    var combobox, listOptions, listSelections;
    return regenerator.wrap(function _callee5$(_context5) {
      while (1) {
        switch (_context5.prev = _context5.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context5.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            listOptions = screen.getAllByRole("option");
            _context5.next = 7;
            return act(function () {
              return userEvent.click(listOptions[2]);
            });

          case 7:
            _context5.next = 9;
            return act(function () {
              return userEvent.click(listOptions[0]);
            });

          case 9:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(2);
            expect(listSelections[0]).toHaveTextContent("Walleye");
            expect(listSelections[1]).toHaveTextContent("Perch");

          case 13:
          case "end":
            return _context5.stop();
        }
      }
    }, _callee5);
  })));
  it("deletes selections with backspace", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee6() {
    var combobox, listOptions, listSelections, input;
    return regenerator.wrap(function _callee6$(_context6) {
      while (1) {
        switch (_context6.prev = _context6.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context6.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            listOptions = screen.getAllByRole("option");
            _context6.next = 7;
            return act(function () {
              return userEvent.click(listOptions[1]);
            });

          case 7:
            _context6.next = 9;
            return act(function () {
              return userEvent.click(listOptions[2]);
            });

          case 9:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(2);
            input = combobox.querySelector("input");
            _context6.next = 14;
            return act(function () {
              return userEvent.type(input, "{Backspace}");
            });

          case 14:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(1);
            expect(listSelections[0]).toHaveTextContent("Bass");

          case 17:
          case "end":
            return _context6.stop();
        }
      }
    }, _callee6);
  })));
  it("closes selections when the pill close button is clicked", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee7() {
    var combobox, listOptions, listSelections, closeButton;
    return regenerator.wrap(function _callee7$(_context7) {
      while (1) {
        switch (_context7.prev = _context7.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context7.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            listOptions = screen.getAllByRole("option");
            _context7.next = 7;
            return act(function () {
              return userEvent.click(listOptions[1]);
            });

          case 7:
            _context7.next = 9;
            return act(function () {
              return userEvent.click(listOptions[2]);
            });

          case 9:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(2);
            closeButton = listSelections[0].querySelector("button");
            _context7.next = 14;
            return act(function () {
              return userEvent.click(closeButton);
            });

          case 14:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(1);
            expect(listSelections[0]).toHaveTextContent("Perch");

          case 17:
          case "end":
            return _context7.stop();
        }
      }
    }, _callee7);
  })));
  it("passes the selected options to the onChange callback", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee8() {
    var handleChange, combobox, listOptions;
    return regenerator.wrap(function _callee8$(_context8) {
      while (1) {
        switch (_context8.prev = _context8.next) {
          case 0:
            handleChange = jest.fn();
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options,
              onChange: handleChange
            }));
            combobox = screen.getByRole("combobox");
            _context8.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listOptions = screen.getAllByRole("option");
            _context8.next = 8;
            return act(function () {
              return userEvent.click(listOptions[1]);
            });

          case 8:
            _context8.next = 10;
            return act(function () {
              return userEvent.click(listOptions[2]);
            });

          case 10:
            expect(handleChange).toHaveBeenCalledWith({
              target: {
                name: undefined,
                value: [options[1], options[2]]
              }
            });

          case 11:
          case "end":
            return _context8.stop();
        }
      }
    }, _callee8);
  })));
  it("updates listbox when selection changes from input interaction", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee9() {
    var combobox, input, listSelections, selectedOptions;
    return regenerator.wrap(function _callee9$(_context9) {
      while (1) {
        switch (_context9.prev = _context9.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context9.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            input = combobox.querySelector("input");
            _context9.next = 7;
            return act(function () {
              return userEvent.type(input, "per");
            });

          case 7:
            _context9.next = 9;
            return act(function () {
              return userEvent.keyboard("{Enter}");
            });

          case 9:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(1);
            expect(listSelections[0]).toHaveTextContent("Perch");
            selectedOptions = screen.getAllByRole("option", {
              selected: true
            });
            expect(selectedOptions).toHaveLength(1);
            expect(selectedOptions[0]).toHaveTextContent("Perch");
            _context9.next = 17;
            return act(function () {
              return userEvent.type(input, "{Backspace}");
            });

          case 17:
            listSelections = screen.queryAllByRole("listitem");
            expect(listSelections).toHaveLength(0);
            selectedOptions = screen.queryAllByRole("option", {
              selected: true
            });
            expect(selectedOptions).toHaveLength(0);

          case 21:
          case "end":
            return _context9.stop();
        }
      }
    }, _callee9);
  })));
  it("does not allow any interaction when disabled", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee10() {
    var combobox, listOptions, input, listSelections;
    return regenerator.wrap(function _callee10$(_context10) {
      while (1) {
        switch (_context10.prev = _context10.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options,
              disabled: true
            }));
            combobox = screen.getByRole("combobox");
            expect(combobox).toHaveAttribute("aria-disabled", "true");
            _context10.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listOptions = screen.queryAllByRole("option");
            expect(listOptions).toHaveLength(0);
            input = combobox.querySelector("input");
            _context10.next = 10;
            return act(function () {
              return userEvent.type(input, "per");
            });

          case 10:
            _context10.next = 12;
            return act(function () {
              return userEvent.keyboard("{Enter}");
            });

          case 12:
            listSelections = screen.queryAllByRole("listitem");
            expect(input).toBeDisabled();
            expect(input).toHaveValue("");
            expect(listSelections).toHaveLength(0);

          case 16:
          case "end":
            return _context10.stop();
        }
      }
    }, _callee10);
  })));
  it("applies updates to the value prop", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee11() {
    var clearButton, combobox, listOptions, selectedOptions;
    return regenerator.wrap(function _callee11$(_context11) {
      while (1) {
        switch (_context11.prev = _context11.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(ClearableSelections, null));
            clearButton = screen.getByTestId("clear-btn");
            combobox = screen.getByRole("combobox");
            _context11.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listOptions = screen.getAllByRole("option");
            expect(listOptions).toHaveLength(4);
            selectedOptions = screen.getAllByRole("option", {
              selected: true
            });
            expect(selectedOptions).toHaveLength(2);
            _context11.next = 11;
            return act(function () {
              return userEvent.click(clearButton);
            });

          case 11:
            _context11.next = 13;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 13:
            listOptions = screen.getAllByRole("option");
            selectedOptions = screen.queryAllByRole("option", {
              selected: true
            });
            expect(listOptions).toHaveLength(4);
            expect(selectedOptions).toHaveLength(0);

          case 17:
          case "end":
            return _context11.stop();
        }
      }
    }, _callee11);
  })));
  describe("create", function () {
    it("allows addition of new options", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee12() {
      var handleChange, combobox, listOptions, input;
      return regenerator.wrap(function _callee12$(_context12) {
        while (1) {
          switch (_context12.prev = _context12.next) {
            case 0:
              handleChange = jest.fn();
              render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
                options: options,
                create: true,
                onChange: handleChange
              }));
              combobox = screen.getByRole("combobox");
              _context12.next = 5;
              return act(function () {
                return userEvent.click(combobox);
              });

            case 5:
              listOptions = screen.getAllByRole("option");
              expect(listOptions).toHaveLength(3);
              input = combobox.querySelector("input");
              expect(input).toBeInTheDocument();
              _context12.next = 11;
              return act(function () {
                return userEvent.type(input, "Yellow Perch");
              });

            case 11:
              expect(input).toHaveValue("Yellow Perch");
              listOptions = screen.getAllByRole("option");
              expect(listOptions).toHaveLength(1);
              expect(listOptions[0]).toHaveTextContent("Create “Yellow Perch”");
              _context12.next = 17;
              return act(function () {
                return userEvent.keyboard("{Enter}");
              });

            case 17:
              expect(input).toHaveValue("");
              expect(handleChange).toHaveBeenCalledWith({
                target: {
                  name: undefined,
                  value: [{
                    label: "Yellow Perch",
                    value: "Yellow Perch1",
                    created: true
                  }]
                }
              });

            case 19:
            case "end":
              return _context12.stop();
          }
        }
      }, _callee12);
    })));
    it("selects existing option when input matches and enter is pressed", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee13() {
      var combobox, input, listSelections, listOptions, selectedOption;
      return regenerator.wrap(function _callee13$(_context13) {
        while (1) {
          switch (_context13.prev = _context13.next) {
            case 0:
              render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
                options: options,
                create: true
              }));
              combobox = screen.getByRole("combobox");
              _context13.next = 4;
              return act(function () {
                return userEvent.click(combobox);
              });

            case 4:
              input = combobox.querySelector("input");
              _context13.next = 7;
              return act(function () {
                return userEvent.type(input, "Perch");
              });

            case 7:
              _context13.next = 9;
              return act(function () {
                return userEvent.keyboard("{Enter}");
              });

            case 9:
              listSelections = screen.getAllByRole("listitem");
              expect(listSelections).toHaveLength(1);
              listOptions = screen.getAllByRole("option");
              expect(listOptions).toHaveLength(3);
              expect(listSelections[0]).toHaveTextContent("Perch");
              selectedOption = screen.getByRole("option", {
                selected: true
              });
              expect(selectedOption).toHaveTextContent("Perch");

            case 16:
            case "end":
              return _context13.stop();
          }
        }
      }, _callee13);
    })));
  });
  it("updates options when it changes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee17() {
    var optionsA, _render, rerender, combobox, listOptions, optionsB;

    return regenerator.wrap(function _callee17$(_context17) {
      while (1) {
        switch (_context17.prev = _context17.next) {
          case 0:
            optionsA = [{
              label: "Walleye",
              value: "walleye"
            }, {
              label: "Bass",
              value: "bass"
            }, {
              label: "Perch",
              value: "perch"
            }, {
              label: "Pike",
              value: "pike"
            }];
            _render = render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: optionsA,
              value: ["bass", "pike"]
            })), rerender = _render.rerender;
            combobox = screen.getByRole("combobox");
            _context17.next = 5;
            return waitFor( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee14() {
              return regenerator.wrap(function _callee14$(_context14) {
                while (1) {
                  switch (_context14.prev = _context14.next) {
                    case 0:
                      _context14.next = 2;
                      return act(function () {
                        return userEvent.click(combobox);
                      });

                    case 2:
                      expect(combobox).toHaveAttribute("aria-expanded", "true");

                    case 3:
                    case "end":
                      return _context14.stop();
                  }
                }
              }, _callee14);
            })));

          case 5:
            listOptions = screen.getAllByRole("option");
            expect(listOptions).toHaveLength(4);
            expect(listOptions[0]).toHaveTextContent("Walleye");
            expect(listOptions[1]).toHaveTextContent("Bass");
            expect(listOptions[2]).toHaveTextContent("Perch");
            expect(listOptions[3]).toHaveTextContent("Pike");
            optionsB = [{
              label: "Beef",
              value: "beef"
            }, {
              label: "Chicken",
              value: "chicken"
            }, {
              label: "Pork",
              value: "pork"
            }];
            _context17.next = 14;
            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee15() {
              return regenerator.wrap(function _callee15$(_context15) {
                while (1) {
                  switch (_context15.prev = _context15.next) {
                    case 0:
                      rerender( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
                        options: optionsB,
                        value: ["pork"]
                      }));

                    case 1:
                    case "end":
                      return _context15.stop();
                  }
                }
              }, _callee15);
            })));

          case 14:
            combobox = screen.getByRole("combobox");
            _context17.next = 17;
            return waitFor( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee16() {
              return regenerator.wrap(function _callee16$(_context16) {
                while (1) {
                  switch (_context16.prev = _context16.next) {
                    case 0:
                      _context16.next = 2;
                      return act(function () {
                        return userEvent.click(combobox);
                      });

                    case 2:
                      expect(combobox).toHaveAttribute("aria-expanded", "true");

                    case 3:
                    case "end":
                      return _context16.stop();
                  }
                }
              }, _callee16);
            })));

          case 17:
            listOptions = screen.getAllByRole("option");
            expect(listOptions).toHaveLength(3);
            expect(listOptions[0]).toHaveTextContent("Beef");
            expect(listOptions[1]).toHaveTextContent("Chicken");
            expect(listOptions[2]).toHaveTextContent("Pork");

          case 22:
          case "end":
            return _context17.stop();
        }
      }
    }, _callee17);
  })));
  it("updates onChange when pill is clicked to close", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee18() {
    var handleChange, combobox, listSelections, closeButton;
    return regenerator.wrap(function _callee18$(_context18) {
      while (1) {
        switch (_context18.prev = _context18.next) {
          case 0:
            handleChange = jest.fn();
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options,
              value: ["bass", "perch"],
              onChange: handleChange
            }));
            combobox = screen.getByRole("combobox");
            _context18.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(2);
            closeButton = listSelections[0].querySelector("button");
            _context18.next = 10;
            return act(function () {
              return userEvent.click(closeButton);
            });

          case 10:
            expect(handleChange).toHaveBeenCalledWith({
              target: {
                name: undefined,
                value: [{
                  label: "Perch",
                  value: "perch"
                }]
              }
            });

          case 11:
          case "end":
            return _context18.stop();
        }
      }
    }, _callee18);
  })));
  it("updates onChange when pill is backspace deleted", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee19() {
    var handleChange, combobox, listSelections, input;
    return regenerator.wrap(function _callee19$(_context19) {
      while (1) {
        switch (_context19.prev = _context19.next) {
          case 0:
            handleChange = jest.fn();
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options,
              value: ["bass", "perch"],
              onChange: handleChange
            }));
            combobox = screen.getByRole("combobox");
            _context19.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listSelections = screen.getAllByRole("listitem");
            expect(listSelections).toHaveLength(2);
            input = combobox.querySelector("input");
            _context19.next = 10;
            return act(function () {
              return userEvent.type(input, "{Backspace}");
            });

          case 10:
            expect(handleChange).toHaveBeenCalledWith({
              target: {
                name: undefined,
                value: [{
                  label: "Bass",
                  value: "bass"
                }]
              }
            });

          case 11:
          case "end":
            return _context19.stop();
        }
      }
    }, _callee19);
  })));
  it("does not display options that are not matched with input", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee20() {
    var combobox, listOptions, input;
    return regenerator.wrap(function _callee20$(_context20) {
      while (1) {
        switch (_context20.prev = _context20.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context20.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            listOptions = screen.queryAllByRole("option");
            expect(listOptions).toHaveLength(3);
            input = screen.getByRole("textbox");
            _context20.next = 9;
            return act(function () {
              return userEvent.type(input, "not found");
            });

          case 9:
            listOptions = screen.queryAllByRole("option");
            expect(listOptions).toHaveLength(1);
            expect(listOptions[0]).toHaveTextContent("No result found");
            _context20.next = 14;
            return act(function () {
              return userEvent.clear(input);
            });

          case 14:
            _context20.next = 16;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 16:
            _context20.next = 18;
            return act(function () {
              return userEvent.type(input, "a");
            });

          case 18:
            listOptions = screen.queryAllByRole("option");
            expect(listOptions).toHaveLength(2);
            expect(listOptions[0]).toHaveTextContent("Walleye");
            expect(listOptions[1]).toHaveTextContent("Bass");

          case 22:
          case "end":
            return _context20.stop();
        }
      }
    }, _callee20);
  })));
});

function ClearableSelections() {
  var options = [{
    label: "Walleye",
    value: "walleye"
  }, {
    label: "Bass",
    value: "bass"
  }, {
    label: "Perch",
    value: "perch"
  }, {
    label: "Pike",
    value: "pike"
  }];

  var _React$useState = React__default.useState(["bass", "pike"]),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  var handleClick = function handleClick() {
    setValue([]);
  };

  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(MultiSelectInput, {
    options: options,
    value: value
  }), /*#__PURE__*/React__default.createElement("button", {
    "data-testid": "clear-btn",
    onClick: handleClick
  }, "Clear values"));
}
