import { _ as _asyncToGenerator, r as regenerator } from '../../index-81a9bdac.js';
import React__default from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SelectMenu, { Select } from '../index.js';
import { O as Option } from '../../select-74202a5d.js';
import '../../typeof-6c6d8d7a.js';
import '../../extends-e61fd370.js';
import '../../objectWithoutProperties-72d23964.js';
import 'prop-types';
import '../autocomplete.js';
import '../../defineProperty-18999f8e.js';
import '../../toConsumableArray-f2f53597.js';
import '../../slicedToArray-5b664d46.js';
import '../../index-99927619.js';
import 'react-dom';
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-2b54f757.js';
import '../../utils.esm-514fad91.js';
import '../../warning-ed2bf294.js';
import '../../portal.esm-613949dc.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-ccd0a386.js';
import '../../label/index.js';
import '../util.js';
import '../../_commonjsHelpers-57e89916.js';

describe("SelectMenu", function () {
  it("renders a trigger 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).toHaveTextContent("Select");
  });
  it("allows to set a custom placeholder", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      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).toHaveTextContent("Custom placeholder");
  });
  it("renders a list of options", 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");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    expect(trigger).toBeInTheDocument();
    expect(options).toHaveLength(3);
  });
  it("allows to select an option", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }],
      onChange: handleChange
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var option = screen.getByText("Option 2");
    userEvent.click(option);
    expect(handleChange).toHaveBeenCalledWith({
      target: {
        label: "Option 2",
        value: "option2",
        name: undefined
      }
    });
  });
  it("allows to set a default selected option", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }],
      value: "option2"
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toHaveTextContent("Option 2");
  });
  it("renders a visible label when prop is passed", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      label: "Select an option",
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }]
    }));
    var label = screen.getByText("Select an option");
    expect(label).toBeInTheDocument();
  });
  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");
  });
  it("provides an event object with the selected option", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2"
      }, {
        label: "Option 3",
        value: "option3"
      }],
      onChange: handleChange
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var option = screen.getByRole("option", {
      name: /Option 2/i
    });
    userEvent.click(option);
    expect(handleChange).toHaveBeenCalledWith({
      target: {
        label: "Option 2",
        value: "option2",
        name: undefined
      }
    });
  });
  it("renders a custom component as option", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      options: [{
        label: "Option 1",
        value: "option1"
      }, {
        label: "Option 2",
        value: "option2",
        component: /*#__PURE__*/React__default.createElement("div", null, "Custom Option")
      }, {
        label: "Option 3",
        value: "option3"
      }]
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var option = screen.getByText("Custom Option");
    expect(option).toBeInTheDocument();
  });
  it("allows numbers as option values", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      options: [{
        label: "Option 0",
        value: 0
      }, {
        label: "Option 1",
        value: 1
      }, {
        label: "Option 2",
        value: 2
      }, {
        label: "Option 3",
        value: 3
      }],
      onChange: handleChange
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var option = screen.getByRole("option", {
      name: /Option 2/i
    });
    userEvent.click(option);
    expect(handleChange).toHaveBeenCalledWith({
      target: {
        label: "Option 2",
        value: 2,
        name: undefined
      }
    });
  });
  it("renders a SelectMenu with a default placeholder 'Select'", function () {
    render( /*#__PURE__*/React__default.createElement(SelectMenu, {
      type: "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.tagName).toEqual("INPUT");
    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");
  });
  describe("Standalone Select", function () {
    it("does not support async prop", function () {
      // mock console.error to prevent error output in the console
      jest.spyOn(console, "error").mockImplementation(function () {});
      expect(function () {
        render( /*#__PURE__*/React__default.createElement(Select, {
          async: true
        }, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, null, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
      }).toThrow("Select component does not support async prop. Use SelectMenu instead."); // restore console.error

      console.error.mockRestore();
    });
  });
});
