diff --git a/package.json b/package.json
index 5d5a9bd1c2353..e1b5a0bf657bc 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "@babel/polyfill": "^7.2.5",
     "@babel/register": "^7.0.0",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "9.4.2",
+    "@elastic/eui": "9.6.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.2",
diff --git a/src/legacy/ui/public/inspector/ui/__snapshots__/inspector_panel.test.js.snap b/src/legacy/ui/public/inspector/ui/__snapshots__/inspector_panel.test.js.snap
index 9d5e8fe0725a0..aa16a91a4c9ad 100644
--- a/src/legacy/ui/public/inspector/ui/__snapshots__/inspector_panel.test.js.snap
+++ b/src/legacy/ui/public/inspector/ui/__snapshots__/inspector_panel.test.js.snap
@@ -242,8 +242,11 @@ exports[`InspectorPanel should render as expected 1`] = `
                     <div
                       className="euiPopover euiPopover--anchorDownRight"
                       id="inspectorViewChooser"
-                      onClick={[Function]}
                       onKeyDown={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchStart={[Function]}
                     >
                       <div
                         className="euiPopover__anchor"
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index 55adf625481e4..b97f284221483 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "9.4.0",
+    "@elastic/eui": "9.6.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index 181865ed3ac52..116ee0f4ee7ce 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "9.4.0",
+    "@elastic/eui": "9.6.0",
     "react": "^16.8.0"
   }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
index 462f5448d7cff..78c26895530d1 100644
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "9.4.2",
+    "@elastic/eui": "9.6.0",
     "react": "^16.8.0"
   },
   "scripts": {
@@ -19,4 +19,4 @@
     "@kbn/plugin-helpers" : "9.0.2",
     "typescript": "^3.3.3333"
   }
-}
\ No newline at end of file
+}
diff --git a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
index 6286abc45f06f..96048fe01749b 100644
--- a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "9.4.0",
+    "@elastic/eui": "9.6.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
diff --git a/x-pack/package.json b/x-pack/package.json
index aaeea471cd230..0c2f897c72cd8 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -120,7 +120,7 @@
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.3.4",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "9.4.2",
+    "@elastic/eui": "9.6.0",
     "@elastic/node-crypto": "0.1.2",
     "@elastic/numeral": "2.3.2",
     "@kbn/babel-preset": "1.0.0",
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 0277a64ec5048..7df0a14e89080 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -23,8 +23,11 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
             <div
               className="euiPopover euiPopover--anchorDownRight"
               id="sortPopover"
-              onClick={[Function]}
               onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
             >
               <div
                 className="euiPopover__anchor"
@@ -244,8 +247,11 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
         <div
           className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
           id="customizablePagination"
-          onClick={[Function]}
           onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
@@ -349,8 +355,11 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
             <div
               className="euiPopover euiPopover--anchorDownRight"
               id="sortPopover"
-              onClick={[Function]}
               onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
             >
               <div
                 className="euiPopover__anchor"
@@ -980,8 +989,11 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         <div
           className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
           id="customizablePagination"
-          onClick={[Function]}
           onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.examples.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.examples.storyshot
new file mode 100644
index 0000000000000..c7a5afedda7ee
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.examples.storyshot
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components/FontPicker default 1`] = `
+<div
+  className="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+>
+  <div
+    className="euiPopover__anchor euiSuperSelect__popoverAnchor"
+  >
+    <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"
+          onChange={[Function]}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="option"
+          type="button"
+        >
+          
+        </button>
+        <div
+          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        >
+          <span
+            className="euiFormControlLayoutCustomIcon"
+          >
+            <svg
+              aria-hidden="true"
+              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+              focusable="false"
+              height="16"
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_down-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                xlinkHref="#arrow_down-a"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots components/FontPicker with value 1`] = `
+<div
+  className="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+>
+  <div
+    className="euiPopover__anchor euiSuperSelect__popoverAnchor"
+  >
+    <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"
+          onChange={[Function]}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="option"
+          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"
+          >
+            <svg
+              aria-hidden="true"
+              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+              focusable="false"
+              height="16"
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_down-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                xlinkHref="#arrow_down-a"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap
index cf33fa7ba5187..95f01e49c3789 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.js.snap
@@ -524,8 +524,11 @@ exports[`ilm summary extension should return extension when index has lifecycle
                   <div
                     className="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
                     id="phaseExecutionPopover"
-                    onClick={[Function]}
                     onKeyDown={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/telemetry_opt_in.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/telemetry_opt_in.test.js.snap
index edf0aaffea276..147c5648717fd 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/telemetry_opt_in.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/telemetry_opt_in.test.js.snap
@@ -339,8 +339,11 @@ exports[`TelemetryOptIn should display when telemetry not opted in 1`] = `
                 <div
                   className="euiPopover euiPopover--anchorDownCenter eui-AlignBaseline"
                   id="readMorePopover"
-                  onClick={[Function]}
                   onKeyDown={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
diff --git a/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap
index 39ea6409cf7ae..d4d7165a8454e 100644
--- a/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/__snapshots__/report_info_button.test.tsx.snap
@@ -83,11 +83,15 @@ Array [
         >
           <OutsideEventDetector
             handleEvent={[Function]}
-            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
           >
             <div
-              onClick={[Function]}
               onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
               onTouchStart={[Function]}
             >
               <FocusLock
@@ -510,11 +514,15 @@ Array [
         >
           <OutsideEventDetector
             handleEvent={[Function]}
-            onClick={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
           >
             <div
-              onClick={[Function]}
               onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
               onTouchStart={[Function]}
             >
               <FocusLock
diff --git a/yarn.lock b/yarn.lock
index aa6bd2a4dfa73..a75a1b1021cb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -785,36 +785,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-9.4.0.tgz#e5f83c612674fc6f59e990f557e563be1409d25e"
-  integrity sha512-cQnsU3UeQ1s6F427vY53lzlh7mvNoPmIvPL24B5jH3JYaWULhIL1xSJXJgDSOSdrdHCxkXDD9Q8Y7256x4Xf4Q==
-  dependencies:
-    "@types/lodash" "^4.14.116"
-    "@types/numeral" "^0.0.25"
-    classnames "^2.2.5"
-    core-js "^2.5.1"
-    highlight.js "^9.12.0"
-    html "^1.0.0"
-    keymirror "^0.1.1"
-    lodash "^4.17.11"
-    numeral "^2.0.6"
-    prop-types "^15.6.0"
-    react-ace "^5.5.0"
-    react-color "^2.13.8"
-    react-focus-lock "^1.17.7"
-    react-input-autosize "^2.2.1"
-    react-is "~16.3.0"
-    react-virtualized "^9.18.5"
-    react-vis "1.10.2"
-    resize-observer-polyfill "^1.5.0"
-    tabbable "^1.1.0"
-    uuid "^3.1.0"
-
-"@elastic/eui@9.4.2":
-  version "9.4.2"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-9.4.2.tgz#530ec18f9b1cb3972824a707cc0cb3005c6c5028"
-  integrity sha512-2fH+WiYYq1tPn5mEvg5NR5b9TjVYY0cM26HPERMRMZyAenGFQtjhansO8qFlTl/MAYz5GsQ7ejgdtzu095opdw==
+"@elastic/eui@9.6.0":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-9.6.0.tgz#740107869b1448348e603d4b1992daf3d5004d3a"
+  integrity sha512-/uZdPaf2TwTCT3MJsoz4yOqOVrAWhb3ziZtXIUIL/EWGQoha6Z8+wEhpixW472KVvp8bGJl3uDoTwTzDk3TAKw==
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"