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

describe("SelectMenu", function () {
  it("renders a trigger with a default placeholder 'Select'", function () {
    render( /*#__PURE__*/React__default.createElement(SelectParent, {
      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(SelectParent, {
      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(SelectParent, {
      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(SelectParent, {
      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(SelectParent, {
      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(SelectParent, {
      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(SelectParent, {
      "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(SelectParent, {
      "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(SelectParent, {
      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(SelectParent, {
      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(SelectParent, {
      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
      }
    });
  });
});
describe("Select", function () {
  it("uses a default placeholder 'Select'", function () {
    render( /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, null, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toBeInTheDocument();
    expect(trigger).toHaveTextContent("Select");
  });
  it("provides index with selected option", function () {
    var handleChange = jest.fn();
    render( /*#__PURE__*/React__default.createElement(Select, {
      onChange: handleChange
    }, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, null, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var option = screen.getByRole("option", {
      name: /Option 2/i
    });
    userEvent.click(option);
    expect(handleChange).toHaveBeenCalledWith(1);
  });
  it("allows to set a custom placeholder", function () {
    render( /*#__PURE__*/React__default.createElement(Select, {
      placeholder: "Custom placeholder"
    }, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, null, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
    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(Select, null, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, null, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var options = screen.getAllByRole("option");
    expect(trigger).toBeInTheDocument();
    expect(options).toHaveLength(3);
  });
  it("recognizes a selected option", function () {
    render( /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, {
      selected: true
    }, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toHaveTextContent("Option 2");
  });
  it("reflects a changed option when there is an initial selected option", function () {
    render( /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement(Option, null, "Option 1"), /*#__PURE__*/React__default.createElement(Option, {
      selected: true
    }, "Option 2"), /*#__PURE__*/React__default.createElement(Option, null, "Option 3")));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toHaveTextContent("Option 2");
    userEvent.click(trigger);
    var option = screen.getByRole("option", {
      name: /Option 3/i
    });
    userEvent.click(option);
    trigger = screen.getByRole("combobox");
    expect(trigger).toHaveTextContent("Option 3");
  });
  it("selects non-string children as option", function () {
    var options = [{
      label: "Option 1",
      value: 1
    }, {
      label: "Option 2",
      value: 2
    }, {
      label: "Option 3",
      value: 3,
      component: /*#__PURE__*/React__default.createElement("div", null, "Custom Option")
    }];
    render( /*#__PURE__*/React__default.createElement(SelectParent, {
      options: options,
      value: 3
    }));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toHaveTextContent("Option 3");
    userEvent.click(trigger);
    var renderedOptions = screen.getAllByRole("option");
    expect(renderedOptions).toHaveLength(3);
    expect(renderedOptions[2]).toHaveTextContent("Custom Option");
    expect(renderedOptions[2]).toHaveAttribute("aria-selected", "true");
  });
  it("excludes separators as options", function () {
    var options = [{
      label: "Option 1",
      value: 1
    }, separator, {
      label: "Option 2",
      value: 2
    }, separator, {
      label: "Option 3",
      value: 3
    }];
    render( /*#__PURE__*/React__default.createElement(SelectParent, {
      options: options
    }));
    var trigger = screen.getByRole("combobox");
    userEvent.click(trigger);
    var optionsList = screen.getAllByRole("option");
    expect(optionsList).toHaveLength(3);
  });
  it("recalculates the label if the value is changed", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
    var options, _render, rerender;

    return regenerator.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            options = [{
              label: "Option 1",
              value: 1
            }, {
              label: "Option 2",
              value: 2
            }];
            _render = render( /*#__PURE__*/React__default.createElement(SelectParent, {
              options: options,
              value: 1
            })), rerender = _render.rerender;
            _context2.t0 = expect;
            _context2.next = 5;
            return screen.findByRole("combobox");

          case 5:
            _context2.t1 = _context2.sent;
            (0, _context2.t0)(_context2.t1).toHaveTextContent("Option 1");
            rerender( /*#__PURE__*/React__default.createElement(SelectParent, {
              options: options,
              value: 2
            }));
            _context2.next = 10;
            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.t0 = expect;
                      _context.next = 3;
                      return screen.findByRole("combobox");

                    case 3:
                      _context.t1 = _context.sent;
                      (0, _context.t0)(_context.t1).toHaveTextContent("Option 2");

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

          case 10:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
  it("uses typeahead to navigate through options", function () {
    render( /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement(Option, null, "Walleye"), /*#__PURE__*/React__default.createElement(Option, null, "Pike"), /*#__PURE__*/React__default.createElement(Option, null, "Perch"), /*#__PURE__*/React__default.createElement(Option, null, "Trout")));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toHaveTextContent("Select");
    userEvent.click(trigger);
    userEvent.type(trigger, "erc");
    userEvent.keyboard("{enter}");
    expect(trigger).toHaveTextContent("Perch");
  });
  it("does not allow interaction when disabled", function () {
    render( /*#__PURE__*/React__default.createElement(Select, {
      disabled: 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")));
    var trigger = screen.getByRole("combobox");
    expect(trigger).toHaveAttribute("aria-disabled", "true");
    expect(trigger).toHaveAttribute("aria-expanded", "false");
    userEvent.click(trigger);
    var options = screen.queryAllByRole("option");
    expect(options).toHaveLength(0);
    expect(trigger).toHaveAttribute("aria-expanded", "false");
  });
});
