@elastic/eui 12.2.0 → 12.4.0

package/src/components/form/super_select/__snapshots__/super_select.test.js.snap

@@ -1,1353 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSuperSelect is rendered 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value=""
-    />
-    <div
-      class="euiFormControlLayout"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-label="aria-label"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl testClass1 testClass2"
-          data-test-subj="test subject string"
-          role="option"
-          type="button"
-        />
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value=""
-    />
-    <div
-      class="euiFormControlLayout"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl euiSuperSelect--isOpen__button"
-          data-test-subj="superSelect"
-          role="option"
-          type="button"
-        />
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </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"
-        class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-        style="top: 8px; left: -22px; z-index: 0;"
-      >
-        <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
-        />
-        <div>
-          <p
-            class="euiScreenReaderOnly"
-            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
-            role="listbox"
-            tabindex="0"
-          >
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item"
-              id="1"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__itemLayout"
-              >
-                <svg
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  class="euiContextMenuItem__text"
-                >
-                  Custom Display #1
-                </span>
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item"
-              id="2"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__itemLayout"
-              >
-                <svg
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  class="euiContextMenuItem__text"
-                >
-                  Custom Display #2
-                </span>
-              </span>
-            </button>
-          </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>
-</div>
-`;
-
-exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect euiSuperSelect--fullWidth"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value=""
-    />
-    <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-label="aria-label"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl euiSuperSelectControl--fullWidth testClass1 testClass2"
-          data-test-subj="test subject string"
-          role="option"
-          type="button"
-        />
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value="1"
-    />
-    <div
-      class="euiFormControlLayout"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: Option #1, is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl euiSuperSelect--isOpen__button"
-          data-test-subj="superSelect"
-          role="option"
-          type="button"
-        >
-          Option #1
-        </button>
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </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"
-        class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-        style="top: 8px; left: -22px; z-index: 0;"
-      >
-        <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
-        />
-        <div>
-          <p
-            class="euiScreenReaderOnly"
-            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"
-            role="listbox"
-            tabindex="0"
-          >
-            <button
-              aria-selected="true"
-              class="euiContextMenuItem euiSuperSelect__item euiContextMenuItem-isDisabled"
-              disabled=""
-              id="1"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__itemLayout"
-              >
-                <svg
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  class="euiContextMenuItem__text"
-                >
-                  Option #1
-                </span>
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item"
-              data-test-subj="option two"
-              id="2"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__itemLayout"
-              >
-                <svg
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  class="euiContextMenuItem__text"
-                >
-                  Option #2
-                </span>
-              </span>
-            </button>
-          </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>
-</div>
-`;
-
-exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
-<EuiSuperSelect
-  compressed={false}
-  data-test-subj="superSelect"
-  fullWidth={false}
-  hasDividers={false}
-  isInvalid={false}
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "disabled": true,
-        "inputDisplay": "Option #1",
-        "value": "1",
-      },
-      Object {
-        "data-test-subj": "option two",
-        "inputDisplay": "Option #2",
-        "value": "2",
-      },
-    ]
-  }
-  valueOfSelected="1"
->
-  <EuiPopover
-    anchorClassName="euiSuperSelect__popoverAnchor"
-    anchorPosition="downCenter"
-    button={
-      <EuiSuperSelectControl
-        className="euiSuperSelect--isOpen__button"
-        compressed={false}
-        data-test-subj="superSelect"
-        fullWidth={false}
-        isInvalid={false}
-        isLoading={false}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        options={
-          Array [
-            Object {
-              "disabled": true,
-              "inputDisplay": "Option #1",
-              "value": "1",
-            },
-            Object {
-              "data-test-subj": "option two",
-              "inputDisplay": "Option #2",
-              "value": "2",
-            },
-          ]
-        }
-        value="1"
-      />
-    }
-    className="euiSuperSelect"
-    closePopover={[Function]}
-    hasArrow={false}
-    isOpen={true}
-    ownFocus={false}
-    panelClassName="euiSuperSelect__popoverPanel"
-    panelPaddingSize="none"
-    popoverRef={[Function]}
-  >
-    <EuiOutsideClickDetector
-      isDisabled={false}
-      onOutsideClick={[Function]}
-    >
-      <div
-        className="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
-      >
-        <div
-          className="euiPopover__anchor euiSuperSelect__popoverAnchor"
-        >
-          <EuiSuperSelectControl
-            className="euiSuperSelect--isOpen__button"
-            compressed={false}
-            data-test-subj="superSelect"
-            fullWidth={false}
-            isInvalid={false}
-            isLoading={false}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            options={
-              Array [
-                Object {
-                  "disabled": true,
-                  "inputDisplay": "Option #1",
-                  "value": "1",
-                },
-                Object {
-                  "data-test-subj": "option two",
-                  "inputDisplay": "Option #2",
-                  "value": "2",
-                },
-              ]
-            }
-            value="1"
-          >
-            <input
-              type="hidden"
-              value="1"
-            />
-            <EuiFormControlLayout
-              compressed={false}
-              fullWidth={false}
-              icon={
-                Object {
-                  "side": "right",
-                  "type": "arrowDown",
-                }
-              }
-              isLoading={false}
-            >
-              <div
-                className="euiFormControlLayout"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <EuiScreenReaderOnly>
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      <EuiI18n
-                        default="Select an option: {selectedValue}, is selected"
-                        token="euiSuperSelectControl.selectAnOption"
-                        values={
-                          Object {
-                            "selectedValue": "Option #1",
-                          }
-                        }
-                      >
-                        Select an option: Option #1, is selected
-                      </EuiI18n>
-                    </span>
-                  </EuiScreenReaderOnly>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="undefined generated-id"
-                    aria-selected={true}
-                    className="euiSuperSelectControl euiSuperSelect--isOpen__button"
-                    data-test-subj="superSelect"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="option"
-                    type="button"
-                  >
-                    Option #1
-                  </button>
-                  <EuiFormControlLayoutIcons
-                    icon={
-                      Object {
-                        "side": "right",
-                        "type": "arrowDown",
-                      }
-                    }
-                    isLoading={false}
-                  >
-                    <div
-                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                    >
-                      <EuiFormControlLayoutCustomIcon
-                        type="arrowDown"
-                      >
-                        <span
-                          className="euiFormControlLayoutCustomIcon"
-                        >
-                          <EuiIcon
-                            aria-hidden="true"
-                            className="euiFormControlLayoutCustomIcon__icon"
-                            type="arrowDown"
-                          >
-                            <EuiIconEmpty
-                              aria-hidden="true"
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              style={null}
-                            >
-                              <svg
-                                aria-hidden="true"
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                focusable="false"
-                                height={16}
-                                style={null}
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlns="http://www.w3.org/2000/svg"
-                              />
-                            </EuiIconEmpty>
-                          </EuiIcon>
-                        </span>
-                      </EuiFormControlLayoutCustomIcon>
-                    </div>
-                  </EuiFormControlLayoutIcons>
-                </div>
-              </div>
-            </EuiFormControlLayout>
-          </EuiSuperSelectControl>
-        </div>
-        <EuiPortal>
-          <EuiFocusTrap
-            clickOutsideDisables={true}
-            disabled={true}
-            returnFocus={true}
-          >
-            <EuiOutsideClickDetector
-              isDisabled={true}
-              onOutsideClick={[Function]}
-            >
-              <OutsideEventDetector
-                handleEvent={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
-              >
-                <div
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
-                >
-                  <FocusLock
-                    as="div"
-                    autoFocus={true}
-                    disabled={true}
-                    lockProps={Object {}}
-                    noFocusGuards={false}
-                    persistentFocus={false}
-                    returnFocus={true}
-                  >
-                    <div
-                      data-focus-guard={true}
-                      key="guard-first"
-                      style={
-                        Object {
-                          "height": "0px",
-                          "left": "1px",
-                          "overflow": "hidden",
-                          "padding": 0,
-                          "position": "fixed",
-                          "top": "1px",
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex={-1}
-                    />
-                    <div
-                      data-focus-guard={true}
-                      key="guard-nearest"
-                      style={
-                        Object {
-                          "height": "0px",
-                          "left": "1px",
-                          "overflow": "hidden",
-                          "padding": 0,
-                          "position": "fixed",
-                          "top": "1px",
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex={-1}
-                    />
-                    <div
-                      data-focus-lock-disabled="disabled"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                    >
-                      <SideEffect(FocusWatcher)
-                        autoFocus={true}
-                        disabled={true}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="disabled"
-                          >
-                            <div
-                              aria-live="assertive"
-                              class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-                              style="top: 8px; left: -22px; z-index: 0;"
-                            >
-                              <div
-                                class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
-                              />
-                              <div>
-                                <p
-                                  class="euiScreenReaderOnly"
-                                  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"
-                                  role="listbox"
-                                  tabindex="0"
-                                >
-                                  <button
-                                    aria-selected="true"
-                                    class="euiContextMenuItem euiSuperSelect__item euiContextMenuItem-isDisabled"
-                                    disabled=""
-                                    id="1"
-                                    role="option"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiContextMenu__itemLayout"
-                                    >
-                                      <svg
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                      <span
-                                        class="euiContextMenuItem__text"
-                                      >
-                                        Option #1
-                                      </span>
-                                    </span>
-                                  </button>
-                                  <button
-                                    aria-selected="false"
-                                    class="euiContextMenuItem euiSuperSelect__item"
-                                    data-test-subj="option two"
-                                    id="2"
-                                    role="option"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiContextMenu__itemLayout"
-                                    >
-                                      <svg
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                        focusable="false"
-                                        height="16"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                      <span
-                                        class="euiContextMenuItem__text"
-                                      >
-                                        Option #2
-                                      </span>
-                                    </span>
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
-                      >
-                        <FocusWatcher
-                          autoFocus={true}
-                          disabled={true}
-                          observed={
-                            <div
-                              data-focus-lock-disabled="disabled"
-                            >
-                              <div
-                                aria-live="assertive"
-                                class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-                                style="top: 8px; left: -22px; z-index: 0;"
-                              >
-                                <div
-                                  class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
-                                />
-                                <div>
-                                  <p
-                                    class="euiScreenReaderOnly"
-                                    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"
-                                    role="listbox"
-                                    tabindex="0"
-                                  >
-                                    <button
-                                      aria-selected="true"
-                                      class="euiContextMenuItem euiSuperSelect__item euiContextMenuItem-isDisabled"
-                                      disabled=""
-                                      id="1"
-                                      role="option"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiContextMenu__itemLayout"
-                                      >
-                                        <svg
-                                          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                          focusable="false"
-                                          height="16"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        />
-                                        <span
-                                          class="euiContextMenuItem__text"
-                                        >
-                                          Option #1
-                                        </span>
-                                      </span>
-                                    </button>
-                                    <button
-                                      aria-selected="false"
-                                      class="euiContextMenuItem euiSuperSelect__item"
-                                      data-test-subj="option two"
-                                      id="2"
-                                      role="option"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiContextMenu__itemLayout"
-                                      >
-                                        <svg
-                                          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                          focusable="false"
-                                          height="16"
-                                          viewBox="0 0 16 16"
-                                          width="16"
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        />
-                                        <span
-                                          class="euiContextMenuItem__text"
-                                        >
-                                          Option #2
-                                        </span>
-                                      </span>
-                                    </button>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          }
-                          onActivation={[Function]}
-                          onDeactivation={[Function]}
-                          persistentFocus={false}
-                        />
-                      </SideEffect(FocusWatcher)>
-                      <EuiPanel
-                        aria-live="assertive"
-                        className="euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-                        grow={true}
-                        hasShadow={false}
-                        paddingSize="none"
-                        panelRef={[Function]}
-                        style={
-                          Object {
-                            "left": -22,
-                            "top": 8,
-                            "zIndex": "0",
-                          }
-                        }
-                      >
-                        <div
-                          aria-live="assertive"
-                          className="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-                          style={
-                            Object {
-                              "left": -22,
-                              "top": 8,
-                              "zIndex": "0",
-                            }
-                          }
-                        >
-                          <div
-                            className="euiPopover__panelArrow euiPopover__panelArrow--bottom"
-                            style={null}
-                          />
-                          <EuiMutationObserver
-                            observerOptions={
-                              Object {
-                                "attributes": true,
-                                "characterData": true,
-                                "childList": true,
-                                "subtree": true,
-                              }
-                            }
-                            onMutation={[Function]}
-                          >
-                            <div>
-                              <EuiScreenReaderOnly>
-                                <p
-                                  className="euiScreenReaderOnly"
-                                  role="alert"
-                                >
-                                  <EuiI18n
-                                    default="You are in a form selector of {optionsCount} items and must select a single option. Use the up and down keys to navigate or escape to close."
-                                    token="euiSuperSelect.screenReaderAnnouncement"
-                                    values={
-                                      Object {
-                                        "optionsCount": 2,
-                                      }
-                                    }
-                                  >
-                                    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.
-                                  </EuiI18n>
-                                </p>
-                              </EuiScreenReaderOnly>
-                              <div
-                                aria-activedescendant="1"
-                                role="listbox"
-                                tabIndex="0"
-                              >
-                                <EuiContextMenuItem
-                                  aria-selected={true}
-                                  buttonRef={[Function]}
-                                  className="euiSuperSelect__item"
-                                  disabled={true}
-                                  icon="check"
-                                  id="1"
-                                  key="0"
-                                  layoutAlign="center"
-                                  onClick={[Function]}
-                                  onKeyDown={[Function]}
-                                  role="option"
-                                  style={
-                                    Object {
-                                      "width": null,
-                                    }
-                                  }
-                                  toolTipPosition="right"
-                                >
-                                  <button
-                                    aria-selected={true}
-                                    className="euiContextMenuItem euiSuperSelect__item euiContextMenuItem-isDisabled"
-                                    disabled={true}
-                                    id="1"
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                    role="option"
-                                    style={
-                                      Object {
-                                        "width": null,
-                                      }
-                                    }
-                                    type="button"
-                                  >
-                                    <span
-                                      className="euiContextMenu__itemLayout"
-                                    >
-                                      <EuiIcon
-                                        className="euiContextMenu__icon"
-                                        size="m"
-                                        type="check"
-                                      >
-                                        <EuiIconEmpty
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                          focusable="false"
-                                          style={null}
-                                        >
-                                          <svg
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                            focusable="false"
-                                            height={16}
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiContextMenuItem__text"
-                                      >
-                                        Option #1
-                                      </span>
-                                    </span>
-                                  </button>
-                                </EuiContextMenuItem>
-                                <EuiContextMenuItem
-                                  aria-selected={false}
-                                  buttonRef={[Function]}
-                                  className="euiSuperSelect__item"
-                                  data-test-subj="option two"
-                                  icon="empty"
-                                  id="2"
-                                  key="1"
-                                  layoutAlign="center"
-                                  onClick={[Function]}
-                                  onKeyDown={[Function]}
-                                  role="option"
-                                  style={
-                                    Object {
-                                      "width": null,
-                                    }
-                                  }
-                                  toolTipPosition="right"
-                                >
-                                  <button
-                                    aria-selected={false}
-                                    className="euiContextMenuItem euiSuperSelect__item"
-                                    data-test-subj="option two"
-                                    id="2"
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                    role="option"
-                                    style={
-                                      Object {
-                                        "width": null,
-                                      }
-                                    }
-                                    type="button"
-                                  >
-                                    <span
-                                      className="euiContextMenu__itemLayout"
-                                    >
-                                      <EuiIcon
-                                        className="euiContextMenu__icon"
-                                        size="m"
-                                        type="empty"
-                                      >
-                                        <EuiIconEmpty
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                          focusable="false"
-                                          style={null}
-                                        >
-                                          <svg
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                                            focusable="false"
-                                            height={16}
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiContextMenuItem__text"
-                                      >
-                                        Option #2
-                                      </span>
-                                    </span>
-                                  </button>
-                                </EuiContextMenuItem>
-                              </div>
-                            </div>
-                          </EuiMutationObserver>
-                        </div>
-                      </EuiPanel>
-                    </div>
-                    <div
-                      data-focus-guard={true}
-                      style={
-                        Object {
-                          "height": "0px",
-                          "left": "1px",
-                          "overflow": "hidden",
-                          "padding": 0,
-                          "position": "fixed",
-                          "top": "1px",
-                          "width": "1px",
-                        }
-                      }
-                      tabIndex={-1}
-                    />
-                  </FocusLock>
-                </div>
-              </OutsideEventDetector>
-            </EuiOutsideClickDetector>
-          </EuiFocusTrap>
-        </EuiPortal>
-      </div>
-    </EuiOutsideClickDetector>
-  </EuiPopover>
-</EuiSuperSelect>
-`;
-
-exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value=""
-    />
-    <div
-      class="euiFormControlLayout"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl euiSuperSelect--isOpen__button"
-          data-test-subj="superSelect"
-          role="option"
-          type="button"
-        />
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </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"
-        class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-        style="top: 8px; left: -22px; z-index: 0;"
-      >
-        <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
-        />
-        <div>
-          <p
-            class="euiScreenReaderOnly"
-            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
-            role="listbox"
-            tabindex="0"
-          >
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item"
-              id="1"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__itemLayout"
-              >
-                <svg
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  class="euiContextMenuItem__text"
-                >
-                  Option #1
-                </span>
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="euiContextMenuItem euiSuperSelect__item"
-              id="2"
-              role="option"
-              type="button"
-            >
-              <span
-                class="euiContextMenu__itemLayout"
-              >
-                <svg
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-                  focusable="false"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-                <span
-                  class="euiContextMenuItem__text"
-                >
-                  Option #2
-                </span>
-              </span>
-            </button>
-          </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>
-</div>
-`;
-
-exports[`EuiSuperSelect props select component is rendered 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value=""
-    />
-    <div
-      class="euiFormControlLayout"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl"
-          role="option"
-          type="button"
-        />
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
-<div
-  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
->
-  <div
-    class="euiPopover__anchor euiSuperSelect__popoverAnchor"
-  >
-    <input
-      type="hidden"
-      value="2"
-    />
-    <div
-      class="euiFormControlLayout"
-    >
-      <div
-        class="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          class="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: Option #2, is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          aria-selected="true"
-          class="euiSuperSelectControl"
-          role="option"
-          type="button"
-        >
-          Option #2
-        </button>
-        <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            class="euiFormControlLayoutCustomIcon"
-          >
-            <svg
-              aria-hidden="true"
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;