// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`OuiComboBox is rendered 1`] = `
<div
  aria-expanded="false"
  aria-haspopup="listbox"
  aria-label="aria-label"
  class="ouiComboBox testClass1 testClass2"
  data-test-subj="test subject string"
  role="combobox"
>
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <div
        class="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable"
        data-test-subj="comboBoxInput"
        tabindex="-1"
      >
        <div
          class="ouiComboBox__input"
          style="font-size:14px;display:inline-block"
        >
          <input
            aria-controls=""
            data-test-subj="comboBoxSearchInput"
            role="textbox"
            style="box-sizing:content-box;width:1px"
            value=""
          />
          <div
            style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
          />
        </div>
      </div>
      <div
        class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
      >
        <button
          aria-label="Open list of options"
          class="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable"
          data-test-subj="comboBoxToggleListButton"
          type="button"
        >
          <span
            aria-hidden="true"
            class="ouiFormControlLayoutCustomIcon__icon"
            data-ouiicon-type="arrowDown"
          />
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`props autoFocus is rendered 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
        Object {
          "label": "Dione",
        },
      ]
    }
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas, Dione"
  />
</div>
`;

exports[`props custom icon is rendered 1`] = `
<OuiComboBox
  async={false}
  compressed={false}
  fullWidth={false}
  icon="menu"
  isClearable={true}
  options={
    Array [
      Object {
        "data-test-subj": "titanOption",
        "label": "Titan",
      },
      Object {
        "label": "Enceladus",
      },
      Object {
        "label": "Mimas",
      },
      Object {
        "label": "Dione",
      },
      Object {
        "label": "Iapetus",
      },
      Object {
        "label": "Phoebe",
      },
      Object {
        "label": "Rhea",
      },
      Object {
        "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
      },
      Object {
        "label": "Tethys",
      },
      Object {
        "label": "Hyperion",
      },
    ]
  }
  selectedOptions={
    Array [
      Object {
        "label": "Mimas",
      },
    ]
  }
  singleSelection={false}
  sortMatchesBy="none"
>
  <div
    aria-expanded={false}
    aria-haspopup="listbox"
    className="ouiComboBox"
    onKeyDown={[Function]}
    role="combobox"
  >
    <OuiComboBoxInput
      autoSizeInputRef={[Function]}
      compressed={false}
      fullWidth={false}
      hasSelectedOptions={true}
      icon="menu"
      inputRef={[Function]}
      isListOpen={false}
      noIcon={false}
      onChange={[Function]}
      onClear={[Function]}
      onClick={[Function]}
      onCloseListClick={[Function]}
      onFocus={[Function]}
      onOpenListClick={[Function]}
      onRemoveOption={[Function]}
      rootId={[Function]}
      searchValue=""
      selectedOptions={
        Array [
          Object {
            "label": "Mimas",
          },
        ]
      }
      singleSelection={false}
      toggleButtonRef={[Function]}
      updatePosition={[Function]}
      value="Mimas"
    >
      <OuiFormControlLayout
        clear={
          Object {
            "data-test-subj": "comboBoxClearButton",
            "onClick": [Function],
          }
        }
        compressed={false}
        fullWidth={false}
        icon={
          Object {
            "aria-label": "Open list of options",
            "data-test-subj": "comboBoxToggleListButton",
            "disabled": undefined,
            "onClick": [Function],
            "ref": [Function],
            "side": "right",
            "type": "arrowDown",
          }
        }
      >
        <div
          className="ouiFormControlLayout"
        >
          <div
            className="ouiFormControlLayout__childrenWrapper"
          >
            <div
              className="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable"
              data-test-subj="comboBoxInput"
              onClick={[Function]}
              tabIndex={-1}
            >
              <OuiIcon
                className="ouiComboBoxPill ouiComboBoxIcon"
                data-test-subj="comboBoxIcon"
                size="m"
                type="menu"
              >
                <span
                  className="ouiComboBoxPill ouiComboBoxIcon"
                  data-ouiicon-type="menu"
                  data-test-subj="comboBoxIcon"
                  size="m"
                />
              </OuiIcon>
              <OuiComboBoxPill
                asPlainText={false}
                color="hollow"
                key="mimas"
                onClose={[Function]}
                option={
                  Object {
                    "label": "Mimas",
                  }
                }
              >
                <OuiI18n
                  default="Remove {children} from selection in this group"
                  token="ouiComboBoxPill.removeSelection"
                  values={
                    Object {
                      "children": "Mimas",
                    }
                  }
                >
                  <OuiBadge
                    className="ouiComboBoxPill"
                    closeButtonProps={
                      Object {
                        "tabIndex": -1,
                      }
                    }
                    color="hollow"
                    iconOnClick={[Function]}
                    iconOnClickAriaLabel="Remove Mimas from selection in this group"
                    iconSide="right"
                    iconType="cross"
                    title="Mimas"
                  >
                    <OuiInnerText>
                      <span
                        className="ouiBadge ouiBadge--hollow ouiBadge--iconRight ouiComboBoxPill"
                        title="Mimas"
                      >
                        <span
                          className="ouiBadge__content"
                        >
                          <span
                            className="ouiBadge__text"
                          >
                            Mimas
                          </span>
                          <button
                            aria-label="Remove Mimas from selection in this group"
                            className="ouiBadge__iconButton"
                            disabled={false}
                            onClick={[Function]}
                            title="Remove Mimas from selection in this group"
                            type="button"
                          >
                            <OuiIcon
                              className="ouiBadge__icon"
                              color="inherit"
                              size="s"
                              tabIndex={-1}
                              type="cross"
                            >
                              <span
                                className="ouiBadge__icon"
                                color="inherit"
                                data-ouiicon-type="cross"
                                size="s"
                                tabIndex={-1}
                              />
                            </OuiIcon>
                          </button>
                        </span>
                      </span>
                    </OuiInnerText>
                  </OuiBadge>
                </OuiI18n>
              </OuiComboBoxPill>
              <AutosizeInput
                aria-controls=""
                className="ouiComboBox__input"
                data-test-subj="comboBoxSearchInput"
                injectStyles={true}
                inputRef={[Function]}
                minWidth={1}
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                role="textbox"
                style={
                  Object {
                    "fontSize": 14,
                  }
                }
                value=""
              >
                <div
                  className="ouiComboBox__input"
                  style={
                    Object {
                      "display": "inline-block",
                      "fontSize": 14,
                    }
                  }
                >
                  <input
                    aria-controls=""
                    data-test-subj="comboBoxSearchInput"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onFocus={[Function]}
                    role="textbox"
                    style={
                      Object {
                        "boxSizing": "content-box",
                        "width": "2px",
                      }
                    }
                    value=""
                  />
                  <div
                    style={
                      Object {
                        "height": 0,
                        "left": 0,
                        "overflow": "scroll",
                        "position": "absolute",
                        "top": 0,
                        "visibility": "hidden",
                        "whiteSpace": "pre",
                      }
                    }
                  />
                </div>
              </AutosizeInput>
            </div>
            <OuiFormControlLayoutIcons
              clear={
                Object {
                  "data-test-subj": "comboBoxClearButton",
                  "onClick": [Function],
                }
              }
              compressed={false}
              icon={
                Object {
                  "aria-label": "Open list of options",
                  "data-test-subj": "comboBoxToggleListButton",
                  "disabled": undefined,
                  "onClick": [Function],
                  "ref": [Function],
                  "side": "right",
                  "type": "arrowDown",
                }
              }
            >
              <div
                className="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
              >
                <OuiFormControlLayoutClearButton
                  data-test-subj="comboBoxClearButton"
                  onClick={[Function]}
                  size="m"
                >
                  <OuiI18n
                    default="Clear input"
                    token="ouiFormControlLayoutClearButton.label"
                  >
                    <button
                      aria-label="Clear input"
                      className="ouiFormControlLayoutClearButton"
                      data-test-subj="comboBoxClearButton"
                      onClick={[Function]}
                      type="button"
                    >
                      <OuiIcon
                        className="ouiFormControlLayoutClearButton__icon"
                        type="cross"
                      >
                        <span
                          className="ouiFormControlLayoutClearButton__icon"
                          data-ouiicon-type="cross"
                        />
                      </OuiIcon>
                    </button>
                  </OuiI18n>
                </OuiFormControlLayoutClearButton>
                <OuiFormControlLayoutCustomIcon
                  aria-label="Open list of options"
                  data-test-subj="comboBoxToggleListButton"
                  iconRef={[Function]}
                  onClick={[Function]}
                  size="m"
                  type="arrowDown"
                >
                  <button
                    aria-label="Open list of options"
                    className="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable"
                    data-test-subj="comboBoxToggleListButton"
                    onClick={[Function]}
                    type="button"
                  >
                    <OuiIcon
                      aria-hidden="true"
                      className="ouiFormControlLayoutCustomIcon__icon"
                      size="m"
                      type="arrowDown"
                    >
                      <span
                        aria-hidden="true"
                        className="ouiFormControlLayoutCustomIcon__icon"
                        data-ouiicon-type="arrowDown"
                        size="m"
                      />
                    </OuiIcon>
                  </button>
                </OuiFormControlLayoutCustomIcon>
              </div>
            </OuiFormControlLayoutIcons>
          </div>
        </div>
      </OuiFormControlLayout>
    </OuiComboBoxInput>
  </div>
</OuiComboBox>
`;

exports[`props delimiter is rendered 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
        Object {
          "label": "Dione",
        },
      ]
    }
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas, Dione"
  />
</div>
`;

exports[`props full width is rendered 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox ouiComboBox--fullWidth"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={true}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
      ]
    }
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas"
  />
</div>
`;

exports[`props icon is rendered 1`] = `
<OuiComboBox
  async={false}
  compressed={false}
  fullWidth={false}
  icon={true}
  isClearable={true}
  options={
    Array [
      Object {
        "data-test-subj": "titanOption",
        "label": "Titan",
      },
      Object {
        "label": "Enceladus",
      },
      Object {
        "label": "Mimas",
      },
      Object {
        "label": "Dione",
      },
      Object {
        "label": "Iapetus",
      },
      Object {
        "label": "Phoebe",
      },
      Object {
        "label": "Rhea",
      },
      Object {
        "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
      },
      Object {
        "label": "Tethys",
      },
      Object {
        "label": "Hyperion",
      },
    ]
  }
  selectedOptions={
    Array [
      Object {
        "label": "Mimas",
      },
    ]
  }
  singleSelection={false}
  sortMatchesBy="none"
>
  <div
    aria-expanded={false}
    aria-haspopup="listbox"
    className="ouiComboBox"
    onKeyDown={[Function]}
    role="combobox"
  >
    <OuiComboBoxInput
      autoSizeInputRef={[Function]}
      compressed={false}
      fullWidth={false}
      hasSelectedOptions={true}
      icon={true}
      inputRef={[Function]}
      isListOpen={false}
      noIcon={false}
      onChange={[Function]}
      onClear={[Function]}
      onClick={[Function]}
      onCloseListClick={[Function]}
      onFocus={[Function]}
      onOpenListClick={[Function]}
      onRemoveOption={[Function]}
      rootId={[Function]}
      searchValue=""
      selectedOptions={
        Array [
          Object {
            "label": "Mimas",
          },
        ]
      }
      singleSelection={false}
      toggleButtonRef={[Function]}
      updatePosition={[Function]}
      value="Mimas"
    >
      <OuiFormControlLayout
        clear={
          Object {
            "data-test-subj": "comboBoxClearButton",
            "onClick": [Function],
          }
        }
        compressed={false}
        fullWidth={false}
        icon={
          Object {
            "aria-label": "Open list of options",
            "data-test-subj": "comboBoxToggleListButton",
            "disabled": undefined,
            "onClick": [Function],
            "ref": [Function],
            "side": "right",
            "type": "arrowDown",
          }
        }
      >
        <div
          className="ouiFormControlLayout"
        >
          <div
            className="ouiFormControlLayout__childrenWrapper"
          >
            <div
              className="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable"
              data-test-subj="comboBoxInput"
              onClick={[Function]}
              tabIndex={-1}
            >
              <OuiIcon
                className="ouiComboBoxPill ouiComboBoxIcon"
                data-test-subj="comboBoxIcon"
                size="m"
                type="search"
              >
                <span
                  className="ouiComboBoxPill ouiComboBoxIcon"
                  data-ouiicon-type="search"
                  data-test-subj="comboBoxIcon"
                  size="m"
                />
              </OuiIcon>
              <OuiComboBoxPill
                asPlainText={false}
                color="hollow"
                key="mimas"
                onClose={[Function]}
                option={
                  Object {
                    "label": "Mimas",
                  }
                }
              >
                <OuiI18n
                  default="Remove {children} from selection in this group"
                  token="ouiComboBoxPill.removeSelection"
                  values={
                    Object {
                      "children": "Mimas",
                    }
                  }
                >
                  <OuiBadge
                    className="ouiComboBoxPill"
                    closeButtonProps={
                      Object {
                        "tabIndex": -1,
                      }
                    }
                    color="hollow"
                    iconOnClick={[Function]}
                    iconOnClickAriaLabel="Remove Mimas from selection in this group"
                    iconSide="right"
                    iconType="cross"
                    title="Mimas"
                  >
                    <OuiInnerText>
                      <span
                        className="ouiBadge ouiBadge--hollow ouiBadge--iconRight ouiComboBoxPill"
                        title="Mimas"
                      >
                        <span
                          className="ouiBadge__content"
                        >
                          <span
                            className="ouiBadge__text"
                          >
                            Mimas
                          </span>
                          <button
                            aria-label="Remove Mimas from selection in this group"
                            className="ouiBadge__iconButton"
                            disabled={false}
                            onClick={[Function]}
                            title="Remove Mimas from selection in this group"
                            type="button"
                          >
                            <OuiIcon
                              className="ouiBadge__icon"
                              color="inherit"
                              size="s"
                              tabIndex={-1}
                              type="cross"
                            >
                              <span
                                className="ouiBadge__icon"
                                color="inherit"
                                data-ouiicon-type="cross"
                                size="s"
                                tabIndex={-1}
                              />
                            </OuiIcon>
                          </button>
                        </span>
                      </span>
                    </OuiInnerText>
                  </OuiBadge>
                </OuiI18n>
              </OuiComboBoxPill>
              <AutosizeInput
                aria-controls=""
                className="ouiComboBox__input"
                data-test-subj="comboBoxSearchInput"
                injectStyles={true}
                inputRef={[Function]}
                minWidth={1}
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                role="textbox"
                style={
                  Object {
                    "fontSize": 14,
                  }
                }
                value=""
              >
                <div
                  className="ouiComboBox__input"
                  style={
                    Object {
                      "display": "inline-block",
                      "fontSize": 14,
                    }
                  }
                >
                  <input
                    aria-controls=""
                    data-test-subj="comboBoxSearchInput"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onFocus={[Function]}
                    role="textbox"
                    style={
                      Object {
                        "boxSizing": "content-box",
                        "width": "2px",
                      }
                    }
                    value=""
                  />
                  <div
                    style={
                      Object {
                        "height": 0,
                        "left": 0,
                        "overflow": "scroll",
                        "position": "absolute",
                        "top": 0,
                        "visibility": "hidden",
                        "whiteSpace": "pre",
                      }
                    }
                  />
                </div>
              </AutosizeInput>
            </div>
            <OuiFormControlLayoutIcons
              clear={
                Object {
                  "data-test-subj": "comboBoxClearButton",
                  "onClick": [Function],
                }
              }
              compressed={false}
              icon={
                Object {
                  "aria-label": "Open list of options",
                  "data-test-subj": "comboBoxToggleListButton",
                  "disabled": undefined,
                  "onClick": [Function],
                  "ref": [Function],
                  "side": "right",
                  "type": "arrowDown",
                }
              }
            >
              <div
                className="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
              >
                <OuiFormControlLayoutClearButton
                  data-test-subj="comboBoxClearButton"
                  onClick={[Function]}
                  size="m"
                >
                  <OuiI18n
                    default="Clear input"
                    token="ouiFormControlLayoutClearButton.label"
                  >
                    <button
                      aria-label="Clear input"
                      className="ouiFormControlLayoutClearButton"
                      data-test-subj="comboBoxClearButton"
                      onClick={[Function]}
                      type="button"
                    >
                      <OuiIcon
                        className="ouiFormControlLayoutClearButton__icon"
                        type="cross"
                      >
                        <span
                          className="ouiFormControlLayoutClearButton__icon"
                          data-ouiicon-type="cross"
                        />
                      </OuiIcon>
                    </button>
                  </OuiI18n>
                </OuiFormControlLayoutClearButton>
                <OuiFormControlLayoutCustomIcon
                  aria-label="Open list of options"
                  data-test-subj="comboBoxToggleListButton"
                  iconRef={[Function]}
                  onClick={[Function]}
                  size="m"
                  type="arrowDown"
                >
                  <button
                    aria-label="Open list of options"
                    className="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable"
                    data-test-subj="comboBoxToggleListButton"
                    onClick={[Function]}
                    type="button"
                  >
                    <OuiIcon
                      aria-hidden="true"
                      className="ouiFormControlLayoutCustomIcon__icon"
                      size="m"
                      type="arrowDown"
                    >
                      <span
                        aria-hidden="true"
                        className="ouiFormControlLayoutCustomIcon__icon"
                        data-ouiicon-type="arrowDown"
                        size="m"
                      />
                    </OuiIcon>
                  </button>
                </OuiFormControlLayoutCustomIcon>
              </div>
            </OuiFormControlLayoutIcons>
          </div>
        </div>
      </OuiFormControlLayout>
    </OuiComboBoxInput>
  </div>
</OuiComboBox>
`;

exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={false}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={Array []}
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value=""
  />
</div>
`;

exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
        Object {
          "label": "Iapetus",
        },
      ]
    }
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas, Iapetus"
  />
</div>
`;

exports[`props isDisabled is rendered 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox ouiComboBox-isDisabled"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isDisabled={true}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
      ]
    }
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas"
  />
</div>
`;

exports[`props options list is rendered 1`] = `
<div
  aria-expanded="true"
  aria-haspopup="listbox"
  class="ouiComboBox ouiComboBox-isOpen"
  data-test-subj="alsoGetsAppliedToOptionsList"
  role="combobox"
>
  <div
    class="ouiFormControlLayout"
  >
    <div
      class="ouiFormControlLayout__childrenWrapper"
    >
      <div
        class="ouiComboBox__inputWrap ouiComboBox__inputWrap-isClearable"
        data-test-subj="comboBoxInput"
        tabindex="-1"
      >
        <div
          class="ouiComboBox__input"
          style="font-size: 14px; display: inline-block;"
        >
          <input
            aria-controls="generated-id_listbox"
            data-test-subj="comboBoxSearchInput"
            role="textbox"
            style="box-sizing: content-box; width: 2px;"
            value=""
          />
          <div
            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
          />
        </div>
      </div>
      <div
        class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
      >
        <button
          aria-label="Close list of options"
          class="ouiFormControlLayoutCustomIcon ouiFormControlLayoutCustomIcon--clickable"
          data-test-subj="comboBoxToggleListButton"
          type="button"
        >
          <span
            aria-hidden="true"
            class="ouiFormControlLayoutCustomIcon__icon"
            data-ouiicon-type="arrowDown"
          />
        </button>
      </div>
    </div>
  </div>
  <div
    class="ouiPanel ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiComboBoxOptionsList ouiPopover__panel ouiPopover__panel-isAttached ouiPopover__panel-noArrow ouiPopover__panel-isOpen ouiPopover__panel--bottom"
    data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
    style="z-index: 100;"
  >
    <div
      class="ouiComboBoxOptionsList__rowWrap"
    >
      <div
        style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
      >
        <div
          id="generated-id_listbox"
          role="listBox"
          style="height: 290px; width: 100%;"
          tabindex="0"
        >
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            data-test-subj="titanOption"
            id="generated-id__option-0"
            role="option"
            style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
            title="Titan"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Titan
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-1"
            role="option"
            style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
            title="Enceladus"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Enceladus
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-2"
            role="option"
            style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
            title="Mimas"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Mimas
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-3"
            role="option"
            style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
            title="Dione"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Dione
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-4"
            role="option"
            style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
            title="Iapetus"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Iapetus
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-5"
            role="option"
            style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
            title="Phoebe"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Phoebe
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-6"
            role="option"
            style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
            title="Rhea"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Rhea
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-7"
            role="option"
            style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
            title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
                  </span>
                </span>
              </span>
            </span>
          </button>
          <button
            aria-selected="false"
            class="ouiFilterSelectItem"
            id="generated-id__option-8"
            role="option"
            style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
            title="Tethys"
            type="button"
          >
            <span
              class="ouiFlexGroup ouiFlexGroup--gutterSmall ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow"
            >
              <span
                class="ouiFlexItem ouiFilterSelectItem__content"
              >
                <span
                  class="ouiComboBoxOption__contentWrapper"
                >
                  <span
                    class="ouiComboBoxOption__content"
                  >
                    Tethys
                  </span>
                </span>
              </span>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`props selectedOptions are rendered 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
        Object {
          "label": "Iapetus",
        },
      ]
    }
    singleSelection={false}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas, Iapetus"
  />
</div>
`;

exports[`props singleSelection is rendered 1`] = `
<div
  aria-expanded={false}
  aria-haspopup="listbox"
  className="ouiComboBox"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={false}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
      ]
    }
    singleSelection={true}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas"
  />
</div>
`;

exports[`props singleSelection prepend and append is rendered 1`] = `
<div
  aria-expanded={true}
  aria-haspopup="listbox"
  className="ouiComboBox ouiComboBox-isOpen"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    append="String"
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={false}
    inputRef={[Function]}
    isListOpen={true}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    prepend="String"
    rootId={[Function]}
    searchValue=""
    selectedOptions={Array []}
    singleSelection={true}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value=""
  />
  <OuiPortal>
    <OuiComboBoxOptionsList
      activeOptionIndex={-1}
      areAllOptionsSelected={false}
      data-test-subj=""
      fullWidth={false}
      getSelectedOptionForSearchValue={[Function]}
      listRef={[Function]}
      matchingOptions={
        Array [
          Object {
            "data-test-subj": "titanOption",
            "label": "Titan",
          },
          Object {
            "label": "Enceladus",
          },
          Object {
            "label": "Mimas",
          },
          Object {
            "label": "Dione",
          },
          Object {
            "label": "Iapetus",
          },
          Object {
            "label": "Phoebe",
          },
          Object {
            "label": "Rhea",
          },
          Object {
            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
          },
          Object {
            "label": "Tethys",
          },
          Object {
            "label": "Hyperion",
          },
        ]
      }
      onCloseList={[Function]}
      onOptionClick={[Function]}
      onOptionEnterKey={[Function]}
      onScroll={[Function]}
      optionRef={[Function]}
      options={
        Array [
          Object {
            "data-test-subj": "titanOption",
            "label": "Titan",
          },
          Object {
            "label": "Enceladus",
          },
          Object {
            "label": "Mimas",
          },
          Object {
            "label": "Dione",
          },
          Object {
            "label": "Iapetus",
          },
          Object {
            "label": "Phoebe",
          },
          Object {
            "label": "Rhea",
          },
          Object {
            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
          },
          Object {
            "label": "Tethys",
          },
          Object {
            "label": "Hyperion",
          },
        ]
      }
      position="bottom"
      rootId={[Function]}
      rowHeight={29}
      scrollToIndex={-1}
      searchValue=""
      selectedOptions={Array []}
      singleSelection={true}
      updatePosition={[Function]}
      width={0}
    />
  </OuiPortal>
</div>
`;

exports[`props singleSelection selects existing option when opened 1`] = `
<div
  aria-expanded={true}
  aria-haspopup="listbox"
  className="ouiComboBox ouiComboBox-isOpen"
  onKeyDown={[Function]}
  role="combobox"
>
  <OuiComboBoxInput
    autoSizeInputRef={[Function]}
    compressed={false}
    fullWidth={false}
    hasSelectedOptions={true}
    inputRef={[Function]}
    isListOpen={true}
    noIcon={false}
    onChange={[Function]}
    onClear={[Function]}
    onClick={[Function]}
    onCloseListClick={[Function]}
    onFocus={[Function]}
    onOpenListClick={[Function]}
    onRemoveOption={[Function]}
    rootId={[Function]}
    searchValue=""
    selectedOptions={
      Array [
        Object {
          "label": "Mimas",
        },
      ]
    }
    singleSelection={true}
    toggleButtonRef={[Function]}
    updatePosition={[Function]}
    value="Mimas"
  />
  <OuiPortal>
    <OuiComboBoxOptionsList
      activeOptionIndex={-1}
      areAllOptionsSelected={false}
      data-test-subj=""
      fullWidth={false}
      getSelectedOptionForSearchValue={[Function]}
      listRef={[Function]}
      matchingOptions={
        Array [
          Object {
            "data-test-subj": "titanOption",
            "label": "Titan",
          },
          Object {
            "label": "Enceladus",
          },
          Object {
            "label": "Mimas",
          },
          Object {
            "label": "Dione",
          },
          Object {
            "label": "Iapetus",
          },
          Object {
            "label": "Phoebe",
          },
          Object {
            "label": "Rhea",
          },
          Object {
            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
          },
          Object {
            "label": "Tethys",
          },
          Object {
            "label": "Hyperion",
          },
        ]
      }
      onCloseList={[Function]}
      onOptionClick={[Function]}
      onOptionEnterKey={[Function]}
      onScroll={[Function]}
      optionRef={[Function]}
      options={
        Array [
          Object {
            "data-test-subj": "titanOption",
            "label": "Titan",
          },
          Object {
            "label": "Enceladus",
          },
          Object {
            "label": "Mimas",
          },
          Object {
            "label": "Dione",
          },
          Object {
            "label": "Iapetus",
          },
          Object {
            "label": "Phoebe",
          },
          Object {
            "label": "Rhea",
          },
          Object {
            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
          },
          Object {
            "label": "Tethys",
          },
          Object {
            "label": "Hyperion",
          },
        ]
      }
      position="bottom"
      rootId={[Function]}
      rowHeight={29}
      scrollToIndex={-1}
      searchValue=""
      selectedOptions={
        Array [
          Object {
            "label": "Mimas",
          },
        ]
      }
      singleSelection={true}
      updatePosition={[Function]}
      width={0}
    />
  </OuiPortal>
</div>
`;