import { _ as _asyncToGenerator, r as regenerator } from '../../index-qSfOyGhk.js';
import React__default from 'react';
import { render, screen, waitFor, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import AutoComplete from '../autocomplete.js';
import SelectMenu from '../index.js';
import '../../typeof-CgC7Bq6K.js';
import '../../extends-C4cduGrv.js';
import '../../defineProperty-CEd-kZQW.js';
import '../../toConsumableArray-dKQYsfpV.js';
import '../../slicedToArray-BB-AwwkK.js';
import '../../objectWithoutProperties-TXwlfNxG.js';
import '../../floating-ui.react-cWPyyUrN.js';
import 'react-dom';
import 'classnames';
import '../../select-menu-BvA3x4Nf.js';
import 'prop-types';
import '../../_commonjsHelpers-_1FafXWI.js';
import '../../label/index.js';
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';

describe("SelectMenu Wrapper", function () {
  it("renders a SelectMenu with a default placeholder 'Select'", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
    expect(trigger.tagName).toEqual("DIV");
    expect(trigger.getAttribute("role")).toEqual("combobox");
  });
  it("uses type 'autocomplete' when async prop is set", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      async: true,
      options: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
        return regenerator.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                return _context.abrupt("return", [{
                  label: "Option 1",
                  value: "option1"
                }, {
                  label: "Option 2",
                  value: "option2"
                }, {
                  label: "Option 3",
                  value: "option3"
                }]);

              case 1:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
    expect(trigger.tagName).toEqual("INPUT");
    expect(trigger.getAttribute("role")).toEqual("combobox");
  });
  it("uses type 'autocomplete' when create prop is set", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      create: true,
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
    expect(trigger.tagName).toEqual("INPUT");
  });
  it("applies aria-label to the reference when passed", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      "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(SelectMenu, {
      "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("Autocomplete", function () {
  it("renders a trigger with a default placeholder 'Select'", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
    expect(trigger.placeholder).toEqual("Select");
  });
  it("allows to set a custom placeholder", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }],
      placeholder: "Custom placeholder"
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
    expect(trigger.placeholder).toEqual("Custom placeholder");
  });
  it("renders a list of options", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      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 options = screen.getAllByRole("option");
    expect(trigger).toBeInTheDocument();
    expect(options).toHaveLength(3);
  });
  it("throws an error when 'async' is true and options is not a function", function () {
    jest.spyOn(console, "error");
    console.error.mockImplementation(function () {});
    expect(function () {
      render( /*#__PURE__*/React__default.createElement(AutoComplete, {
        async: true,
        type: "autocomplete",
        options: [{
          label: "Option 1",
          value: "option1"
        }, {
          label: "Option 2",
          value: "option2"
        }, {
          label: "Option 3",
          value: "option3"
        }]
      }));
    }).toThrow("Async autocomplete requires options to be a function");
    console.error.mockRestore();
  });
  it("selects the option that matches all the input characters", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.type(trigger, "Option 1");
    var option = screen.getByRole("option", {
      name: "Option 2"
    });
    var selectedOption = screen.getByRole("option", {
      name: "Option 1"
    });
    expect(option.getAttribute("aria-selected")).toEqual("false");
    expect(selectedOption.getAttribute("aria-selected")).toEqual("true");
  });
  it("filters the options based on the input value", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.type(trigger, "subscriber");
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(2);
    expect(options[0].textContent).toEqual("All subscribers");
    expect(options[1].textContent).toEqual("Cold subscribers");
  });
  it("shows all options when the input value is empty", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.type(trigger, "subscriber");
    userEvent.clear(trigger);
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(3);
  });
  it("shows all options when the input value matches all characters of an option", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.type(trigger, "All subscribers");
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(3);
    expect(options[0].getAttribute("aria-selected")).toEqual("true");
  });
  it("shows 'No result found' when there are no results", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.type(trigger, "subscriberz");
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(1);
    expect(options[0].textContent).toEqual("No result found");
  });
  it("selects match when 'Enter' key is pressed", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(3);
    userEvent.type(trigger, "Cold");
    options = screen.getAllByRole("option");
    expect(options).toHaveLength(1);
    userEvent.keyboard("{Enter}");
    options = screen.queryAllByRole("option");
    expect(options).toHaveLength(0);
    expect(trigger).toHaveValue("Cold subscribers");
  });
  it("does not load async options when the input value is less than 2 characters", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4() {
    var options, trigger;
    return regenerator.wrap(function _callee4$(_context4) {
      while (1) {
        switch (_context4.prev = _context4.next) {
          case 0:
            options = jest.fn(function () {
              return new Promise(function (resolve) {
                resolve([{
                  label: "All subscribers",
                  value: "option1"
                }, {
                  label: "Subscribed for a year",
                  value: "option2"
                }, {
                  label: "Cold subscribers",
                  value: "option3"
                }]);
              });
            });
            render( /*#__PURE__*/React__default.createElement(AutoComplete, {
              async: true,
              options: options
            }));
            trigger = screen.getByRole("combobox");
            _context4.next = 5;
            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
              return regenerator.wrap(function _callee2$(_context2) {
                while (1) {
                  switch (_context2.prev = _context2.next) {
                    case 0:
                      _context2.next = 2;
                      return userEvent.type(trigger, "C", {
                        delay: 2
                      });

                    case 2:
                    case "end":
                      return _context2.stop();
                  }
                }
              }, _callee2);
            })));

          case 5:
            _context4.next = 7;
            return waitFor(function () {
              expect(options).toHaveBeenCalledTimes(0);
            });

          case 7:
            act(function () {
              userEvent.clear(trigger);
            });
            _context4.next = 10;
            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3() {
              return regenerator.wrap(function _callee3$(_context3) {
                while (1) {
                  switch (_context3.prev = _context3.next) {
                    case 0:
                      _context3.next = 2;
                      return userEvent.type(trigger, "Co", {
                        delay: 2
                      });

                    case 2:
                    case "end":
                      return _context3.stop();
                  }
                }
              }, _callee3);
            })));

          case 10:
            _context4.next = 12;
            return waitFor(function () {
              expect(options).toHaveBeenCalledTimes(1);
            });

          case 12:
          case "end":
            return _context4.stop();
        }
      }
    }, _callee4);
  })));
  it("calls onChange callback when an option is selected", function () {
    var onChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      name: "subscribers",
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }],
      onChange: onChange
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    userEvent.click(options[1]);
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith({
      target: {
        label: "Subscribed for a year",
        value: "option2",
        name: "subscribers"
      }
    });
  });
  it("calls onChange callback when an option is selected with keyboard", function () {
    var onChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      name: "subscribers",
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }],
      onChange: onChange
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    userEvent.keyboard("{ArrowDown}{ArrowDown}{Enter}");
    expect(onChange).toHaveBeenCalledTimes(1);
    expect(onChange).toHaveBeenCalledWith({
      target: {
        label: "Subscribed for a year",
        value: "option2",
        name: "subscribers"
      }
    });
  });
  it("accepts a prefilled value", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      name: "testAutoComplete",
      options: [],
      onChange: function onChange() {},
      value: {
        value: "internalValue",
        label: "User-friendly label"
      }
    }));
    var element = screen.getByRole("combobox");
    expect(element.value).toEqual("User-friendly label");
  });
  it("renders an option's component over label when provided", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "Blowfish",
        value: "blowfish",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83D\uDC21 Blowfish")
      }, {
        label: "Fried Shrimp",
        value: "fried-shrimp",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83C\uDF64 Fried Shrimp")
      }, {
        label: "Octopus",
        value: "octopus",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83D\uDC19 Octopus")
      }, {
        label: "Squid",
        value: "squid",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83E\uDD91 Squid")
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(4);
    expect(options[0].textContent).toEqual("🐡 Blowfish");
  });
  it("uses the option label over component in the input value", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        label: "Blowfish",
        value: "blowfish",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83D\uDC21 Blowfish")
      }, {
        label: "Fried Shrimp",
        value: "fried-shrimp",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83C\uDF64 Fried Shrimp")
      }, {
        label: "Octopus",
        value: "octopus",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83D\uDC19 Octopus")
      }, {
        label: "Squid",
        value: "squid",
        component: /*#__PURE__*/React__default.createElement("div", null, "\uD83E\uDD91 Squid")
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(4);
    userEvent.click(options[0]);
    expect(trigger).toHaveValue("Blowfish");
  });
  it("uses text content of an option's JSX label in the input value", function () {
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      options: [{
        value: "blowfish",
        label: /*#__PURE__*/React__default.createElement("div", null, "\uD83D\uDC21 Blowfish")
      }, {
        value: "fried-shrimp",
        label: /*#__PURE__*/React__default.createElement("div", null, "\uD83C\uDF64 Fried Shrimp")
      }, {
        value: "octopus",
        label: /*#__PURE__*/React__default.createElement("div", null, "\uD83D\uDC19 Octopus")
      }, {
        value: "squid",
        label: /*#__PURE__*/React__default.createElement("div", null, "\uD83E\uDD91 Squid")
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    expect(options).toHaveLength(4);
    userEvent.click(options[0]);
    expect(trigger).toHaveValue("🐡 Blowfish");
  });
  it("does not allow interaction when disabled", function () {
    var onChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(AutoComplete, {
      disabled: true,
      options: [{
        label: "All subscribers",
        value: "option1"
      }, {
        label: "Subscribed for a year",
        value: "option2"
      }, {
        label: "Cold subscribers",
        value: "option3"
      }],
      onChange: onChange
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeDisabled();
    userEvent.click(trigger);
    var options = screen.queryAllByRole("option");
    expect(options).toHaveLength(0);
    userEvent.type(trigger, "subscriber");
    expect(trigger).toHaveValue("");
    expect(onChange).not.toHaveBeenCalled();
  });
  describe("create option", function () {
    it("adds a new option when the input value does not match any option", function () {
      var onChange = jest.fn();
      render( /*#__PURE__*/React__default.createElement(AutoComplete, {
        create: true,
        options: [{
          label: "All subscribers",
          value: "option1"
        }, {
          label: "Subscribed for a year",
          value: "option2"
        }, {
          label: "Cold subscribers",
          value: "option3"
        }],
        onChange: onChange
      }));
      var trigger = screen.getByRole("combobox");
      userEvent.type(trigger, "New subscriber");
      var options = screen.getAllByRole("option");
      expect(options).toHaveLength(1);
      expect(options[0].textContent).toEqual("Create “New subscriber”");
      userEvent.click(options[0]);
      expect(onChange).toHaveBeenCalledTimes(1);
      expect(onChange).toHaveBeenCalledWith({
        target: {
          label: "New subscriber",
          value: "New subscriber1",
          created: true,
          name: undefined
        }
      });
      userEvent.click(trigger);
      options = screen.queryAllByRole("option");
      expect(options).toHaveLength(4);
      var lastOption = screen.getByRole("option", {
        name: "New subscriber"
      });
      expect(lastOption.getAttribute("aria-selected")).toEqual("true");
    });
    it("allows the use of Enter key to create a new option", function () {
      var onChange = jest.fn();
      render( /*#__PURE__*/React__default.createElement(AutoComplete, {
        create: true,
        options: [{
          label: "All subscribers",
          value: "option1"
        }, {
          label: "Subscribed for a year",
          value: "option2"
        }, {
          label: "Cold subscribers",
          value: "option3"
        }],
        onChange: onChange
      }));
      var trigger = screen.getByRole("combobox");
      userEvent.type(trigger, "New subscriber");
      userEvent.keyboard("{Enter}");
      expect(onChange).toHaveBeenCalledTimes(1);
      expect(onChange).toHaveBeenCalledWith({
        target: {
          label: "New subscriber",
          value: "New subscriber1",
          created: true,
          name: undefined
        }
      });
      userEvent.click(trigger);
      var options = screen.getAllByRole("option");
      expect(options).toHaveLength(4);
      var lastOption = screen.getByRole("option", {
        name: "New subscriber"
      });
      expect(lastOption.getAttribute("aria-selected")).toEqual("true");
    });
  });
});
