makeWrapper function infrastructure

function makeWrapper(options?: {
  disabled?: boolean;
  searchable?: boolean;
  multi?: boolean;
  hiddenInputName?: string;
  hiddenInputWrapped?: boolean;
  placeholder?: string;
  withInlineMenu?: string[];
  withAriaControls?: string;
  visibleInputId?: string;
  noControl?: boolean;
  noInput?: boolean;
}): HTMLElement {
  const wrapper = document.createElement("div");
  wrapper.className = "react-select-container";
  if (options?.disabled) {
    wrapper.classList.add("react-select--is-disabled");
  }

  if (!options?.noControl) {
    const control = document.createElement("div");
    control.className = "react-select__control";

    const valueContainer = document.createElement("div");
    valueContainer.className = options?.multi
      ? "react-select__value-container react-select__value-container--is-multi"
      : "react-select__value-container";

    if (options?.placeholder) {
      const ph = document.createElement("div");
      ph.className = "react-select__placeholder";
      ph.textContent = options.placeholder;
      valueContainer.appendChild(ph);
    }

    if (!options?.noInput) {
      const inputContainer = document.createElement("div");
      inputContainer.className = "react-select__input-container";

      const input = document.createElement("input");
      input.setAttribute("role", "combobox");
      input.type = "text";

      if (options?.searchable !== false) {
        // searchable = default true
        input.className = "react-select__input";
      }

      if (options?.visibleInputId) {
        input.id = options.visibleInputId;
      }
      if (options?.withAriaControls) {
        input.setAttribute("aria-controls", options.withAriaControls);
      }

      inputContainer.appendChild(input);
      valueContainer.appendChild(inputContainer);
    }

    control.appendChild(valueContainer);
    wrapper.appendChild(control);
  }

  // Hidden input (carries name/value for submission)
  if (options?.hiddenInputName) {
    const hidden = document.createElement("input");
    hidden.type = "hidden";
    hidden.name = options.hiddenInputName;
    if (options?.hiddenInputWrapped) {
      const div = document.createElement("div");
      div.appendChild(hidden);
      wrapper.appendChild(div);
    } else {
      wrapper.appendChild(hidden);
    }
  }

  // Inline menu already rendered
  if (options?.withInlineMenu) {
    const menu = document.createElement("div");
    menu.className = "react-select__menu";
    const menuList = document.createElement("div");
    menuList.className = "react-select__menu-list";

    for (const optText of options.withInlineMenu) {
      const opt = document.createElement("div");
      opt.className = "react-select__option";
      opt.textContent = optText;
      opt.dataset["value"] = optText.toLowerCase();
      menuList.appendChild(opt);
    }

    menu.appendChild(menuList);
    wrapper.appendChild(menu);
  }

  return wrapper;
}