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

exports[`OuiSuperSelect is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-label="aria-label"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl testClass1 testClass2"
            data-test-subj="test subject string"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiSuperSelect props compressed is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout ouiFormControlLayout--compressed"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-label="aria-label"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl ouiSuperSelectControl--compressed testClass1 testClass2"
            data-test-subj="test subject string"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiSuperSelect props custom display is propagated to dropdown 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl ouiSuperSelect--isOpen__button"
            data-test-subj="superSelect"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
  <div
    data-focus-lock-disabled="disabled"
  >
    <div
      aria-live="assertive"
      aria-modal="true"
      class="ouiPanel ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-noArrow ouiPopover__panel-isAttached"
      role="dialog"
      style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
    >
      <div
        class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
      />
      <div>
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="0"
        />
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="1"
        />
        <div
          data-focus-lock-disabled="false"
        >
          <div>
            <p
              class="ouiScreenReaderOnly"
              role="alert"
            >
              You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
            </p>
            <div
              class="ouiSuperSelect__listbox"
              role="listbox"
              tabindex="0"
            >
              <button
                aria-selected="false"
                class="ouiContextMenuItem ouiSuperSelect__item"
                id="1"
                role="option"
                type="button"
              >
                <span
                  class="ouiContextMenu__itemLayout"
                >
                  <span
                    class="ouiContextMenu__icon"
                    color="inherit"
                    data-ouiicon-type="empty"
                  />
                  <span
                    class="ouiContextMenuItem__text"
                  >
                    Custom Display #1
                  </span>
                </span>
              </button>
              <button
                aria-selected="false"
                class="ouiContextMenuItem ouiSuperSelect__item"
                id="2"
                role="option"
                type="button"
              >
                <span
                  class="ouiContextMenu__itemLayout"
                >
                  <span
                    class="ouiContextMenu__icon"
                    color="inherit"
                    data-ouiicon-type="empty"
                  />
                  <span
                    class="ouiContextMenuItem__text"
                  >
                    Custom Display #2
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="0"
        />
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
</div>
`;

exports[`OuiSuperSelect props fullWidth is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiInputPopover--fullWidth ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout ouiFormControlLayout--fullWidth"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-label="aria-label"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl ouiSuperSelectControl--fullWidth testClass1 testClass2"
            data-test-subj="test subject string"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiSuperSelect props is rendered with a prepend and append 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout ouiFormControlLayout--group"
      >
        <label
          class="ouiFormLabel ouiFormControlLayout__prepend"
        >
          prepend
        </label>
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-label="aria-label"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl ouiSuperSelectControl--inGroup testClass1 testClass2"
            data-test-subj="test subject string"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
        <label
          class="ouiFormLabel ouiFormControlLayout__append"
        >
          append
        </label>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiSuperSelect props more props are propogated to each option 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value="1"
      />
      <div
        class="ouiFormControlLayout"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: Option #1, is selected
          </span>
          <button
            aria-haspopup="true"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl ouiSuperSelect--isOpen__button"
            data-test-subj="superSelect"
            type="button"
          >
            Option #1
          </button>
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
  <div
    data-focus-lock-disabled="disabled"
  >
    <div
      aria-live="assertive"
      aria-modal="true"
      class="ouiPanel ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-noArrow ouiPopover__panel-isAttached"
      role="dialog"
      style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
    >
      <div
        class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
      />
      <div>
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="0"
        />
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="1"
        />
        <div
          data-focus-lock-disabled="false"
        >
          <div>
            <p
              class="ouiScreenReaderOnly"
              role="alert"
            >
              You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
            </p>
            <div
              aria-activedescendant="1"
              class="ouiSuperSelect__listbox"
              role="listbox"
              tabindex="0"
            >
              <button
                aria-selected="true"
                class="ouiContextMenuItem ouiSuperSelect__item ouiContextMenuItem-isDisabled"
                disabled=""
                id="1"
                role="option"
                type="button"
              >
                <span
                  class="ouiContextMenu__itemLayout"
                >
                  <span
                    class="ouiContextMenu__icon"
                    color="inherit"
                    data-ouiicon-type="check"
                  />
                  <span
                    class="ouiContextMenuItem__text"
                  >
                    Option #1
                  </span>
                </span>
              </button>
              <button
                aria-selected="false"
                class="ouiContextMenuItem ouiSuperSelect__item"
                data-test-subj="option two"
                id="2"
                role="option"
                type="button"
              >
                <span
                  class="ouiContextMenu__itemLayout"
                >
                  <span
                    class="ouiContextMenu__icon"
                    color="inherit"
                    data-ouiicon-type="empty"
                  />
                  <span
                    class="ouiContextMenuItem__text"
                  >
                    Option #2
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="0"
        />
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
</div>
`;

exports[`OuiSuperSelect props options are rendered when select is open 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl ouiSuperSelect--isOpen__button"
            data-test-subj="superSelect"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
  <div
    data-focus-lock-disabled="disabled"
  >
    <div
      aria-live="assertive"
      aria-modal="true"
      class="ouiPanel ouiPanel--borderRadiusMedium ouiPanel--plain ouiPanel--noShadow ouiPopover__panel ouiPopover__panel--bottom ouiPopover__panel-noArrow ouiPopover__panel-isAttached"
      role="dialog"
      style="top: 8px; left: 0px; will-change: transform, opacity; z-index: 2000;"
    >
      <div
        class="ouiPopover__panelArrow ouiPopover__panelArrow--bottom"
      />
      <div>
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="0"
        />
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="1"
        />
        <div
          data-focus-lock-disabled="false"
        >
          <div>
            <p
              class="ouiScreenReaderOnly"
              role="alert"
            >
              You are in a form selector of 2 items and must select a single option. Use the up and down keys to navigate or escape to close.
            </p>
            <div
              class="ouiSuperSelect__listbox"
              role="listbox"
              tabindex="0"
            >
              <button
                aria-selected="false"
                class="ouiContextMenuItem ouiSuperSelect__item"
                id="1"
                role="option"
                type="button"
              >
                <span
                  class="ouiContextMenu__itemLayout"
                >
                  <span
                    class="ouiContextMenu__icon"
                    color="inherit"
                    data-ouiicon-type="empty"
                  />
                  <span
                    class="ouiContextMenuItem__text"
                  >
                    Option #1
                  </span>
                </span>
              </button>
              <button
                aria-selected="false"
                class="ouiContextMenuItem ouiSuperSelect__item"
                id="2"
                role="option"
                type="button"
              >
                <span
                  class="ouiContextMenu__itemLayout"
                >
                  <span
                    class="ouiContextMenu__icon"
                    color="inherit"
                    data-ouiicon-type="empty"
                  />
                  <span
                    class="ouiContextMenuItem__text"
                  >
                    Option #2
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          data-focus-guard="true"
          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
          tabindex="0"
        />
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="-1"
  />
</div>
`;

exports[`OuiSuperSelect props select component is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value=""
      />
      <div
        class="ouiFormControlLayout"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: , is selected
          </span>
          <button
            aria-haspopup="true"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl"
            type="button"
          />
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiSuperSelect props valueSelected is rendered 1`] = `
<div
  class="ouiPopover ouiPopover--anchorDownLeft ouiPopover--displayBlock ouiInputPopover ouiSuperSelect"
>
  <div
    class="ouiPopover__anchor"
  >
    <div>
      <input
        type="hidden"
        value="2"
      />
      <div
        class="ouiFormControlLayout"
      >
        <div
          class="ouiFormControlLayout__childrenWrapper"
        >
          <span
            class="ouiScreenReaderOnly"
            id="generated-id"
          >
            Select an option: Option #2, is selected
          </span>
          <button
            aria-haspopup="true"
            aria-labelledby="undefined generated-id"
            class="ouiSuperSelectControl"
            type="button"
          >
            Option #2
          </button>
          <div
            class="ouiFormControlLayoutIcons ouiFormControlLayoutIcons--right"
          >
            <span
              class="ouiFormControlLayoutCustomIcon"
            >
              <span
                aria-hidden="true"
                class="ouiFormControlLayoutCustomIcon__icon"
                data-ouiicon-type="arrowDown"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;