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, 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 '../../floating-ui.react-cWPyyUrN.js';
import 'react-dom';
import 'classnames';
import '../../label/index.js';
import 'prop-types';
import '@reach/visually-hidden';
import '../../ck-icon/index.js';
import '../../ck-icon/assets/icon-map/index.js';
import '../../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../../icon/icons.js';
import '../../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../../portal/index.js';
import '../../use-rerender-once/index.js';
import '../../use-force-update/index.js';
import '../../checkbox/index.js';
import '../../select-menu-BvA3x4Nf.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", function () {
    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"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var listbox = screen.getByRole("listbox");
    expect(trigger).toHaveAttribute("aria-label", "Select an option");
    expect(listbox).not.toHaveAttribute("aria-label", "Select an option");
  });
  it("applies aria-labelledby to the reference when passed", function () {
    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"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var listbox = screen.getByRole("listbox");
    expect(trigger).toHaveAttribute("aria-labelledby", "my-external-id");
    expect(listbox).not.toHaveAttribute("aria-labelledby", "my-external-id");
  });
});
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", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.getAllByRole("option");
    expect(listOptions).toHaveLength(3);
    userEvent.click(listOptions[0]);
    var input = combobox.querySelector("input");
    expect(input).toHaveAttribute("placeholder", "");
  });
  it("stays open when an option is selected", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    expect(combobox).toHaveAttribute("aria-expanded", "false");
    userEvent.click(combobox);
    expect(combobox).toHaveAttribute("aria-expanded", "true");
    var listOptions = screen.getAllByRole("option");
    expect(listOptions).toHaveLength(3);
    expect(listOptions[0]).toHaveAttribute("aria-selected", "false");
    userEvent.click(listOptions[0]);
    expect(listOptions[0]).toHaveAttribute("aria-selected", "true");
    expect(combobox).toHaveAttribute("aria-expanded", "true");
  });
  it("adds input selections in the order of the options (not order of selections)", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.getAllByRole("option");
    userEvent.click(listOptions[2]);
    userEvent.click(listOptions[0]);
    var listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(2);
    expect(listSelections[0]).toHaveTextContent("Walleye");
    expect(listSelections[1]).toHaveTextContent("Perch");
  });
  it("deletes selections with backspace", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.getAllByRole("option");
    userEvent.click(listOptions[1]);
    userEvent.click(listOptions[2]);
    var listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(2);
    var input = combobox.querySelector("input");
    userEvent.type(input, "{Backspace}");
    listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(1);
    expect(listSelections[0]).toHaveTextContent("Bass");
  });
  it("closes selections when the pill close button is clicked", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.getAllByRole("option");
    userEvent.click(listOptions[1]);
    userEvent.click(listOptions[2]);
    var listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(2);
    var closeButton = listSelections[0].querySelector("button");
    userEvent.click(closeButton);
    listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(1);
    expect(listSelections[0]).toHaveTextContent("Perch");
  });
  it("passes the selected options to the onChange callback", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options,
      onChange: handleChange
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.getAllByRole("option");
    userEvent.click(listOptions[1]);
    userEvent.click(listOptions[2]);
    expect(handleChange).toHaveBeenCalledWith({
      target: {
        name: undefined,
        value: [options[1], options[2]]
      }
    });
  });
  it("updates listbox when selection changes from input interaction", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var input = combobox.querySelector("input");
    userEvent.type(input, "per");
    userEvent.keyboard("{Enter}");
    var listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(1);
    expect(listSelections[0]).toHaveTextContent("Perch");
    var selectedOptions = screen.getAllByRole("option", {
      selected: true
    });
    expect(selectedOptions).toHaveLength(1);
    expect(selectedOptions[0]).toHaveTextContent("Perch");
    userEvent.type(input, "{Backspace}");
    listSelections = screen.queryAllByRole("listitem");
    expect(listSelections).toHaveLength(0);
    selectedOptions = screen.queryAllByRole("option", {
      selected: true
    });
    expect(selectedOptions).toHaveLength(0);
  });
  it("does not allow any interaction when disabled", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options,
      disabled: true
    }));
    var combobox = screen.getByRole("combobox");
    expect(combobox).toHaveAttribute("aria-disabled", "true");
    userEvent.click(combobox);
    var listOptions = screen.queryAllByRole("option");
    expect(listOptions).toHaveLength(0);
    var input = combobox.querySelector("input");
    userEvent.type(input, "per");
    userEvent.keyboard("{Enter}");
    var listSelections = screen.queryAllByRole("listitem");
    expect(input).toBeDisabled();
    expect(input).toHaveValue("");
    expect(listSelections).toHaveLength(0);
  });
  it("applies updates to the value prop", function () {
    render( /*#__PURE__*/React__default.createElement(ClearableSelections, null));
    var clearButton = screen.getByTestId("clear-btn");
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.getAllByRole("option");
    expect(listOptions).toHaveLength(4);
    var selectedOptions = screen.getAllByRole("option", {
      selected: true
    });
    expect(selectedOptions).toHaveLength(2);
    userEvent.click(clearButton);
    userEvent.click(combobox);
    listOptions = screen.getAllByRole("option");
    selectedOptions = screen.queryAllByRole("option", {
      selected: true
    });
    expect(listOptions).toHaveLength(4);
    expect(selectedOptions).toHaveLength(0);
  });
  describe("create", function () {
    it("allows addition of new options", function () {
      var handleChange = jest.fn();
      render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
        options: options,
        create: true,
        onChange: handleChange
      }));
      var combobox = screen.getByRole("combobox");
      userEvent.click(combobox);
      var listOptions = screen.getAllByRole("option");
      expect(listOptions).toHaveLength(3);
      var input = combobox.querySelector("input");
      expect(input).toBeInTheDocument();
      userEvent.type(input, "Yellow Perch");
      expect(input).toHaveValue("Yellow Perch");
      listOptions = screen.getAllByRole("option");
      expect(listOptions).toHaveLength(1);
      expect(listOptions[0]).toHaveTextContent("Create “Yellow Perch”");
      userEvent.keyboard("{Enter}");
      expect(input).toHaveValue("");
      expect(handleChange).toHaveBeenCalledWith({
        target: {
          name: undefined,
          value: [{
            label: "Yellow Perch",
            value: "Yellow Perch1",
            created: true
          }]
        }
      });
    });
    it("selects existing option when input matches and enter is pressed", function () {
      render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
        options: options,
        create: true
      }));
      var combobox = screen.getByRole("combobox");
      userEvent.click(combobox);
      var input = combobox.querySelector("input");
      userEvent.type(input, "Perch");
      userEvent.keyboard("{Enter}");
      var listSelections = screen.getAllByRole("listitem");
      expect(listSelections).toHaveLength(1);
      var listOptions = screen.getAllByRole("option");
      expect(listOptions).toHaveLength(3);
      expect(listSelections[0]).toHaveTextContent("Perch");
      var selectedOption = screen.getByRole("option", {
        selected: true
      });
      expect(selectedOption).toHaveTextContent("Perch");
    });
  });
  it("updates options when it changes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
    var optionsA, _render, rerender, combobox, listOptions, optionsB;

    return regenerator.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.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");
            userEvent.click(combobox);
            expect(combobox).toHaveAttribute("aria-expanded", "true");
            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"
            }];
            rerender( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
              options: optionsB,
              value: ["pork"]
            }));
            _context2.next = 15;
            return waitFor( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
              return regenerator.wrap(function _callee$(_context) {
                while (1) {
                  switch (_context.prev = _context.next) {
                    case 0:
                      _context.next = 2;
                      return screen.getByRole("combobox");

                    case 2:
                      combobox = _context.sent;
                      userEvent.click(combobox);
                      expect(combobox).toHaveAttribute("aria-expanded", "true");

                    case 5:
                    case "end":
                      return _context.stop();
                  }
                }
              }, _callee);
            })));

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

          case 20:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
  it("updates onChange when pill is clicked to close", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options,
      value: ["bass", "perch"],
      onChange: handleChange
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(2);
    var closeButton = listSelections[0].querySelector("button");
    userEvent.click(closeButton);
    expect(handleChange).toHaveBeenCalledWith({
      target: {
        name: undefined,
        value: [{
          label: "Perch",
          value: "perch"
        }]
      }
    });
  });
  it("updates onChange when pill is backspace deleted", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options,
      value: ["bass", "perch"],
      onChange: handleChange
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listSelections = screen.getAllByRole("listitem");
    expect(listSelections).toHaveLength(2);
    var input = combobox.querySelector("input");
    userEvent.type(input, "{Backspace}");
    expect(handleChange).toHaveBeenCalledWith({
      target: {
        name: undefined,
        value: [{
          label: "Bass",
          value: "bass"
        }]
      }
    });
  });
  it("does not display options that are not matched with input", function () {
    render( /*#__PURE__*/React__default.createElement(MultiSelectInput, {
      options: options
    }));
    var combobox = screen.getByRole("combobox");
    userEvent.click(combobox);
    var listOptions = screen.queryAllByRole("option");
    expect(listOptions).toHaveLength(3);
    var input = combobox.querySelector("input");
    userEvent.type(input, "not found");
    listOptions = screen.queryAllByRole("option");
    expect(listOptions).toHaveLength(1);
    expect(listOptions[0]).toHaveTextContent("No result found");
    userEvent.clear(input);
    userEvent.type(input, "a");
    listOptions = screen.queryAllByRole("option");
    expect(listOptions).toHaveLength(2);
    expect(listOptions[0]).toHaveTextContent("Walleye");
    expect(listOptions[1]).toHaveTextContent("Bass");
  });
});

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"));
}
