From 5910e818d1be1ca9086621c0083ac02612a95e54 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 1 Dec 2020 09:19:39 -0700
Subject: [PATCH] Upgrade EUI to 30.5.1

---
 package.json                                  |   2 +-
 .../__snapshots__/palette.stories.storyshot   | 287 +-------
 .../font_picker.stories.storyshot             | 109 +--
 .../palette_picker.stories.storyshot          | 621 +-----------------
 .../text_style_picker.stories.storyshot       |  90 +--
 .../__snapshots__/edit_var.stories.storyshot  | 332 +---------
 .../extended_template.stories.storyshot       | 195 +-----
 .../public/components/search_bar.tsx          |   2 +-
 .../__snapshots__/icon_select.test.js.snap    |   1 +
 .../add_tooltip_field_popover.test.tsx.snap   |   2 +
 yarn.lock                                     |  17 +-
 11 files changed, 46 insertions(+), 1612 deletions(-)

diff --git a/package.json b/package.json
index 56a5e4c3c860d..9b4c99747c67f 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0-rc.1",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "30.4.2",
+    "@elastic/eui": "30.5.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/node-crypto": "1.2.1",
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
index fccf5d2b56651..f0d673eaf316d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
@@ -10,7 +10,7 @@ exports[`Storyshots arguments/Palette default 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -19,290 +19,7 @@ exports[`Storyshots arguments/Palette default 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
index 12daa9c98377d..560ac717913f7 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots components/FontPicker default 1`] = `
 <div
-  className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+  className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
   onKeyDown={[Function]}
   onMouseDown={[Function]}
   onMouseUp={[Function]}
@@ -11,54 +11,13 @@ exports[`Storyshots components/FontPicker default 1`] = `
 >
   <div
     className="euiPopover__anchor"
-  >
-    <input
-      defaultValue=""
-      type="hidden"
-    />
-    <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
-    >
-      <div
-        className="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          className="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: 
-          , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          className="euiSuperSelectControl euiSuperSelectControl--compressed"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        />
-        <div
-          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            className="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              className="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
 
 exports[`Storyshots components/FontPicker with value 1`] = `
 <div
-  className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+  className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
   onKeyDown={[Function]}
   onMouseDown={[Function]}
   onMouseUp={[Function]}
@@ -67,66 +26,6 @@ exports[`Storyshots components/FontPicker with value 1`] = `
 >
   <div
     className="euiPopover__anchor"
-  >
-    <input
-      type="hidden"
-      value="'American Typewriter', 'Courier New', Courier, Monaco, mono"
-    />
-    <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
-    >
-      <div
-        className="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          className="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: 
-          <div
-            style={
-              Object {
-                "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
-              }
-            }
-          >
-            American Typewriter
-          </div>
-          , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          className="euiSuperSelectControl euiSuperSelectControl--compressed"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div
-            style={
-              Object {
-                "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
-              }
-            }
-          >
-            American Typewriter
-          </div>
-        </button>
-        <div
-          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            className="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              className="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
index dc9c7f4c492cf..680f792f4d1b9 100644
--- a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -18,50 +18,7 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="clear"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: None, is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            None
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -75,7 +32,7 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -84,290 +41,7 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -381,7 +55,7 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -390,290 +64,7 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
index 90f94b5141874..0dd682a534899 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -18,7 +18,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseUp={[Function]}
@@ -27,48 +27,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         >
           <div
             className="euiPopover__anchor"
-          >
-            <input
-              defaultValue=""
-              type="hidden"
-            />
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="undefined generated-id"
-                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  type="button"
-                />
-                <div
-                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                >
-                  <span
-                    className="euiFormControlLayoutCustomIcon"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="arrowDown"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -491,7 +450,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseUp={[Function]}
@@ -500,48 +459,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         >
           <div
             className="euiPopover__anchor"
-          >
-            <input
-              defaultValue=""
-              type="hidden"
-            />
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="undefined generated-id"
-                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  type="button"
-                />
-                <div
-                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                >
-                  <span
-                    className="euiFormControlLayoutCustomIcon"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="arrowDown"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
index 8b0d2e84cff11..4779c2e217dda 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
@@ -79,7 +79,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -88,86 +88,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="boolean"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenBoolean"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Boolean
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenBoolean"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Boolean
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -442,7 +363,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -451,86 +372,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="number"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenNumber"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Number
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenNumber"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Number
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -746,7 +588,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -755,86 +597,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="string"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -1026,7 +789,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -1035,86 +798,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="string"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
index e41e48b9d199f..9e0e5544fa7a0 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
@@ -293,7 +293,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseUp={[Function]}
@@ -302,68 +302,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             >
               <div
                 className="euiPopover__anchor"
-              >
-                <input
-                  id="generated-id"
-                  type="hidden"
-                  value="solid"
-                />
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--compressed"
-                >
-                  <div
-                    className="euiFormControlLayout__childrenWrapper"
-                  >
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      Select an option: 
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                      , is selected
-                    </span>
-                    <button
-                      aria-haspopup="true"
-                      aria-labelledby="generated-id generated-id"
-                      className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      type="button"
-                    >
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                    </button>
-                    <div
-                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                    >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          data-euiicon-type="arrowDown"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>
@@ -757,7 +696,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -766,68 +705,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="dotted"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      style={
-                        Object {
-                          "border": "4px dotted",
-                          "height": 16,
-                        }
-                      }
-                    />
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      style={
-                        Object {
-                          "border": "4px dotted",
-                          "height": 16,
-                        }
-                      }
-                    />
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -1233,7 +1111,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseUp={[Function]}
@@ -1242,68 +1120,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             >
               <div
                 className="euiPopover__anchor"
-              >
-                <input
-                  id="generated-id"
-                  type="hidden"
-                  value="solid"
-                />
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--compressed"
-                >
-                  <div
-                    className="euiFormControlLayout__childrenWrapper"
-                  >
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      Select an option: 
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                      , is selected
-                    </span>
-                    <button
-                      aria-haspopup="true"
-                      aria-labelledby="generated-id generated-id"
-                      className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      type="button"
-                    >
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                    </button>
-                    <div
-                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                    >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          data-euiicon-type="arrowDown"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
index 3746e636066a9..e6ca328966023 100644
--- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
+++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
@@ -252,6 +252,7 @@ export function SearchBar({
 
   return (
     <EuiSelectableTemplateSitewide
+      isPreFiltered
       onChange={onChange}
       options={options}
       popoverButtonBreakpoints={['xs', 's']}
@@ -267,7 +268,6 @@ export function SearchBar({
         </EuiHeaderSectionItemButton>
       }
       searchProps={{
-        onSearch: () => undefined,
         onKeyUpCapture: (e: React.KeyboardEvent<HTMLInputElement>) =>
           setSearchValue(e.currentTarget.value),
         'data-test-subj': 'nav-search-input',
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
index 8fa69e1a5b467..c0505426d1f63 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
@@ -44,6 +44,7 @@ exports[`Should render icon select 1`] = `
     clickOutsideDisables={true}
   >
     <EuiSelectable
+      isPreFiltered={false}
       onChange={[Function]}
       options={
         Array [
diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
index be362c2ae0422..84534515dfa57 100644
--- a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
+++ b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`Should remove selected fields from selectable 1`] = `
   panelPaddingSize="none"
 >
   <EuiSelectable
+    isPreFiltered={false}
     onChange={[Function]}
     options={
       Array [
@@ -96,6 +97,7 @@ exports[`Should render 1`] = `
   panelPaddingSize="none"
 >
   <EuiSelectable
+    isPreFiltered={false}
     onChange={[Function]}
     options={
       Array [
diff --git a/yarn.lock b/yarn.lock
index c22e7e891c6dd..7041759fdc807 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1433,10 +1433,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@30.4.2":
-  version "30.4.2"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.4.2.tgz#997762e754cc931039c6f6cc4db02dff47389a09"
-  integrity sha512-A/68PMUfrW/djRJm8gqLnAyQXeyAuL8H4V4jNSzPUbpy2GmjdZma3GgpwavwM5eunty0Rjzv7ghVqDT62eycDA==
+"@elastic/eui@30.5.1":
+  version "30.5.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.5.1.tgz#c9782c2f4763d563de6afcc2fc56d81c1e5b183c"
+  integrity sha512-W8rW49prYG0XHNdMWGTxNW50Kef3/fh+IL5mzMOKLao1W4h0F45efIDbnIHyjGl//akknIIEa6bwdTU4dmLBgA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -1448,7 +1448,7 @@
     "@types/vfile-message" "^2.0.0"
     chroma-js "^2.1.0"
     classnames "^2.2.6"
-    highlight.js "^9.12.0"
+    highlight.js "^9.18.5"
     lodash "^4.17.20"
     numeral "^2.0.6"
     prop-types "^15.6.0"
@@ -15636,11 +15636,16 @@ heap@^0.2.6:
   resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac"
   integrity sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw=
 
-highlight.js@9.15.10, highlight.js@^9.12.0, highlight.js@~9.15.0, highlight.js@~9.15.1:
+highlight.js@9.15.10, highlight.js@~9.15.0, highlight.js@~9.15.1:
   version "9.15.10"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
   integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
 
+highlight.js@^9.18.5:
+  version "9.18.5"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"