From 84ca85d0efa30ff0de7922c38bb2ceca875f72f9 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 21 Aug 2023 15:16:39 -0700
Subject: [PATCH] Upgrade EUI to v87.1.0 (#163961)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`v86.0.0`⏩`v87.1.0`

⚠️ The biggest set of type changes in this PR come from the breaking
change that makes `pageSize` and `pageSizeOptions` now optional props
for `EuiBasicTable.pagination`, `EuiInMemoryTable.pagination` and
`EuiDataGrid.pagination`.

This caused several other components that were cloning EUI's pagination
type to start throwing type warnings about `pageSize` being optional.
Where I came across these errors, I modified the extended types to
require `pageSize`. These types and their usages may end up changing
again in any case once the Shared UX team looks into
https://github.com/elastic/kibana/issues/56406.

---

## [`87.1.0`](https://github.com/elastic/eui/tree/v87.1.0)

- Updated the underlying library powering `EuiAutoSizer`. This primarily
affects typing around the `disableHeight` and `disableWidth` props
([#6798](https://github.com/elastic/eui/pull/6798))
- Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and
`EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter
typing ([#6798](https://github.com/elastic/eui/pull/6798))
- Updated `EuiDatePickerRange` to support `compressed` display
([#7058](https://github.com/elastic/eui/pull/7058))
- Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop
([#7061](https://github.com/elastic/eui/pull/7061))
- Added a new `panelMinWidth` prop to `EuiInputPopover`
([#7071](https://github.com/elastic/eui/pull/7071))
- Added a new `inputPopoverProps` prop for `EuiRange`s and
`EuiDualRange`s with `showInput="inputWithPopover"` set
([#7082](https://github.com/elastic/eui/pull/7082))

**Bug fixes**

- Fixed `EuiToolTip` overriding instead of merging its
`aria-describedby` tooltip ID with any existing `aria-describedby`s
([#7055](https://github.com/elastic/eui/pull/7055))
- Fixed `EuiSuperDatePicker`'s `compressed` display
([#7058](https://github.com/elastic/eui/pull/7058))
- Fixed `EuiAccordion` to remove tabbable children from sequential
keyboard navigation when the accordion is closed
([#7064](https://github.com/elastic/eui/pull/7064))
- Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs
([#7065](https://github.com/elastic/eui/pull/7065))

**Accessibility**

- Removed the default `dialog` role and `tabIndex` from push
`EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual
accessibility management.
([#7065](https://github.com/elastic/eui/pull/7065))

## [`87.0.0`](https://github.com/elastic/eui/tree/v87.0.0)

- Added beta `componentDefaults` prop to `EuiProvider`, which will allow
configuring certain default props globally. This list of components and
defaults is still under consideration.
([#6923](https://github.com/elastic/eui/pull/6923))
- `EuiPortal`'s `insert` prop can now be configured globally via
`EuiProvider.componentDefaults`
([#6941](https://github.com/elastic/eui/pull/6941))
- `EuiFocusTrap`'s `crossFrame` and `gapMode` props can now be
configured globally via `EuiProvider.componentDefaults`
([#6942](https://github.com/elastic/eui/pull/6942))
- `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and
`showPerPageOptions` props can now be configured globally via
`EuiProvider.componentDefaults`
([#6951](https://github.com/elastic/eui/pull/6951))
- `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid` now allow
`pagination.pageSize` to be undefined. If undefined, `pageSize` defaults
to `EuiTablePagination`'s `itemsPerPage` component default.
([#6993](https://github.com/elastic/eui/pull/6993))
- `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid`'s
`pagination.pageSizeOptions` will now fall back to
`EuiTablePagination`'s `itemsPerPageOptions` component default.
([#6993](https://github.com/elastic/eui/pull/6993))
- Updated `EuiHeaderLinks`'s `gutterSize` spacings
([#7005](https://github.com/elastic/eui/pull/7005))
- Updated `EuiHeaderAlert`'s stacking styles
([#7005](https://github.com/elastic/eui/pull/7005))
- Added `toolTipProps` to `EuiListGroupItem` that allows customizing
item tooltips. ([#7018](https://github.com/elastic/eui/pull/7018))
- Updated `EuiBreadcrumbs` to support breadcrumbs that toggle popovers
via `popoverContent` and `popoverProps`
([#7031](https://github.com/elastic/eui/pull/7031))
- Improved the contrast ratio of disabled titles within `EuiSteps` and
`EuiStepsHorizontal` to meet WCAG AA guidelines.
([#7032](https://github.com/elastic/eui/pull/7032))
- Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a
more clear visual indication of the current step
([#7048](https://github.com/elastic/eui/pull/7048))

**Bug fixes**

- Single uses of `<EuiHeaderSectionItem side="right" />` now align right
as expected without needing a previous `side="left"` sibling.
([#7005](https://github.com/elastic/eui/pull/7005))
- `EuiPageTemplate` now correctly displays `panelled={true}`
([#7044](https://github.com/elastic/eui/pull/7044))

**Breaking changes**

- `EuiTablePagination`'s default `itemsPerPage` is now `10` (was
previously `50`). This can be configured through
`EuiProvider.componentDefaults`.
([#6993](https://github.com/elastic/eui/pull/6993))
- `EuiTablePagination`'s default `itemsPerPageOptions` is now `[10, 25,
50]` (was previously `[10, 20, 50, 100]`). This can be configured
through `EuiProvider.componentDefaults`.
([#6993](https://github.com/elastic/eui/pull/6993))
- Removed `border` prop from `EuiHeaderSectionItem` (unused since
Amsterdam theme) ([#7005](https://github.com/elastic/eui/pull/7005))
- Removed `borders` object configuration from `EuiHeader.sections`
([#7005](https://github.com/elastic/eui/pull/7005))

**CSS-in-JS conversions**

- Converted `EuiHeaderAlert` to Emotion; Removed unused
`.euiHeaderAlert__dismiss` CSS
([#7005](https://github.com/elastic/eui/pull/7005))
- Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and
`EuiHeaderSectionItemButton` to Emotion
([#7005](https://github.com/elastic/eui/pull/7005))
- Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed
`$euiHeaderLinksGutterSizes` Sass variables
([#7005](https://github.com/elastic/eui/pull/7005))
- Removed `$euiHeaderBackgroundColor` Sass variable; use
`$euiColorEmptyShade` instead
([#7005](https://github.com/elastic/eui/pull/7005))
- Removed `$euiHeaderChildSize` Sass variable; use `$euiSizeXXL` instead
([#7005](https://github.com/elastic/eui/pull/7005))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>
---
 .../public/components/page/index.tsx          |  2 +-
 package.json                                  |  2 +-
 .../header/__snapshots__/header.test.tsx.snap | 34 ++++----
 .../src/ui/header/header.tsx                  |  7 +-
 .../src/ui/header/header_logo.scss            |  2 +-
 .../src/ui/header/header_nav_controls.tsx     |  7 +-
 .../__snapshots__/i18n_service.test.tsx.snap  |  4 +
 .../src/i18n_eui_mapping.tsx                  | 14 ++++
 .../src/exception_items/index.tsx             |  6 +-
 .../src/types/index.ts                        |  4 +-
 src/dev/license_checker/config.ts             |  2 +-
 x-pack/packages/ml/data_grid/lib/types.ts     |  2 +-
 .../components/data_table/index.tsx           |  2 +-
 .../hooks/use_cloud_posture_table/utils.ts    |  2 +-
 .../latest_findings/latest_findings_table.tsx |  2 +-
 .../resource_findings_table.tsx               |  2 +-
 .../index_data_visualizer_view.tsx            |  1 -
 .../layout/account_header/account_header.tsx  |  4 +-
 .../heatmap_style_editor.test.tsx.snap        |  8 +-
 .../analytics_list/use_table_settings.ts      |  2 +-
 .../nav_control/nav_control_service.test.ts   |  4 +-
 .../components/exceptions_utility/index.tsx   |  2 +-
 .../components/list_exception_items/index.tsx |  2 +-
 .../hooks/use_list_exception_items/index.ts   |  2 +-
 .../side_panel/side_panel_flex_item.tsx       |  2 +-
 .../nav_control/nav_control_popover.test.tsx  | 10 +--
 ...ctions_connectors_event_log_list_table.tsx |  4 +-
 .../event_log/event_log_data_grid.tsx         |  2 +-
 .../event_log/event_log_pagination_status.tsx |  5 +-
 .../components/rule_error_log.tsx             |  2 +-
 .../components/rule_event_log_list_table.tsx  |  4 +-
 .../apps/aiops/change_point_detection.ts      |  4 +-
 yarn.lock                                     | 80 +++++++++++--------
 33 files changed, 125 insertions(+), 107 deletions(-)

diff --git a/examples/bfetch_explorer/public/components/page/index.tsx b/examples/bfetch_explorer/public/components/page/index.tsx
index 921f4b5fa1635c..6e282f528362b5 100644
--- a/examples/bfetch_explorer/public/components/page/index.tsx
+++ b/examples/bfetch_explorer/public/components/page/index.tsx
@@ -16,7 +16,7 @@ export interface PageProps {
 
 export const Page: React.FC<PageProps> = ({ title = 'Untitled', sidebar, children }) => {
   return (
-    <EuiPageTemplate panelled={true} offset={0} grow={true}>
+    <EuiPageTemplate offset={0} grow={true}>
       <EuiPageTemplate.Sidebar>{sidebar}</EuiPageTemplate.Sidebar>
       <EuiPageTemplate.Header>
         <EuiPageHeader pageTitle={title} />
diff --git a/package.json b/package.json
index e24f8094b95090..ba07ef6fe5c173 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "86.0.0",
+    "@elastic/eui": "87.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
index 319da409fe13ca..0f1b092c28d462 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
@@ -48,10 +48,10 @@ Array [
         data-fixed-header="true"
       >
         <div
-          class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+          class="euiHeaderSection emotion-euiHeaderSection"
         >
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           >
             <a
               aria-label="Elastic home"
@@ -88,23 +88,23 @@ Array [
           </div>
         </div>
         <div
-          class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+          class="euiHeaderSection emotion-euiHeaderSection"
         >
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           />
         </div>
         <div
-          class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+          class="euiHeaderSection emotion-euiHeaderSection"
         >
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           />
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           />
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           >
             <div
               class="euiPopover emotion-euiPopover"
@@ -118,7 +118,7 @@ Array [
                   aria-expanded="false"
                   aria-haspopup="true"
                   aria-label="Help menu"
-                  class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+                  class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiHeaderSectionItemButton"
                   type="button"
                 >
                   <span
@@ -128,7 +128,7 @@ Array [
                       class="eui-textTruncate euiButtonEmpty__text"
                     >
                       <span
-                        class="euiHeaderSectionItemButton__content"
+                        class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
                       >
                         <span
                           data-euiicon-type="help"
@@ -141,7 +141,7 @@ Array [
             </div>
           </div>
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           />
         </div>
       </div>
@@ -150,17 +150,17 @@ Array [
         data-fixed-header="true"
       >
         <div
-          class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+          class="euiHeaderSection emotion-euiHeaderSection"
         >
           <div
-            class="euiHeaderSectionItem euiHeaderSectionItem--borderRight header__toggleNavButtonSection"
+            class="euiHeaderSectionItem header__toggleNavButtonSection emotion-euiHeaderSectionItem"
           >
             <button
               aria-controls="generated-id"
               aria-expanded="false"
               aria-label="Toggle primary navigation"
               aria-pressed="false"
-              class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+              class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiHeaderSectionItemButton"
               data-test-subj="toggleNavButton"
               type="button"
             >
@@ -171,7 +171,7 @@ Array [
                   class="eui-textTruncate euiButtonEmpty__text"
                 >
                   <span
-                    class="euiHeaderSectionItemButton__content"
+                    class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
                   >
                     <span
                       data-euiicon-type="menu"
@@ -206,10 +206,10 @@ Array [
           </ol>
         </nav>
         <div
-          class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--right"
+          class="euiHeaderSection emotion-euiHeaderSection-right"
         >
           <div
-            class="euiHeaderSectionItem"
+            class="euiHeaderSectionItem emotion-euiHeaderSectionItem"
           >
             <div
               data-test-subj="headerAppActionMenu"
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx
index 3032f0353fbf5d..67ff9af5f5637e 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx
@@ -129,7 +129,6 @@ export function Header({
                     customBranding$={customBranding$}
                   />,
                 ],
-                borders: 'none',
               },
               {
                 ...(observables.navControlsCenter$ && {
@@ -139,7 +138,6 @@ export function Header({
                     </EuiShowFor>,
                   ],
                 }),
-                borders: 'none',
               },
               {
                 items: [
@@ -164,14 +162,13 @@ export function Header({
                   />,
                   <HeaderNavControls navControls$={observables.navControlsRight$} />,
                 ],
-                borders: 'none',
               },
             ]}
           />
 
           <EuiHeader position="fixed" className="header__secondBar">
             <EuiHeaderSection grow={false}>
-              <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
+              <EuiHeaderSectionItem className="header__toggleNavButtonSection">
                 <CollapsibleNav
                   appId$={application.currentAppId$}
                   id={navId}
@@ -230,7 +227,7 @@ export function Header({
             <HeaderBadge badge$={observables.badge$} />
 
             <EuiHeaderSection side="right">
-              <EuiHeaderSectionItem border="none">
+              <EuiHeaderSectionItem>
                 <HeaderActionMenu mounter={headerActionMenuMounter} />
               </EuiHeaderSectionItem>
             </EuiHeaderSection>
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss
index 37bfd2f61907de..6bdc0b8777ec78 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss
@@ -1,7 +1,7 @@
 .chrHeaderLogo {
   display: flex;
   align-items: center;
-  height: $euiHeaderChildSize;
+  height: $euiSizeXXL;
   padding-inline: $euiSizeS;
 }
 
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx
index 4d411beb181ee6..6ef44b08bddd04 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx
@@ -18,7 +18,7 @@ interface Props {
   side?: 'left' | 'right';
 }
 
-export function HeaderNavControls({ navControls$, side }: Props) {
+export function HeaderNavControls({ navControls$ }: Props) {
   const navControls = useObservable(navControls$, []);
 
   if (!navControls) {
@@ -30,10 +30,7 @@ export function HeaderNavControls({ navControls$, side }: Props) {
   return (
     <>
       {navControls.map((navControl: ChromeNavControl, index: number) => (
-        <EuiHeaderSectionItem
-          key={index}
-          border={side ? (side === 'left' ? 'right' : 'left') : 'none'}
-        >
+        <EuiHeaderSectionItem key={index}>
           <HeaderExtension extension={navControl.mount} />
         </EuiHeaderSectionItem>
       ))}
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
index a5e0bcc328783a..cff710351cd749 100644
--- a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
+++ b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiBottomBar.screenReaderAnnouncement": "There is a new region landmark with page level controls at the end of the document.",
           "euiBottomBar.screenReaderHeading": "Page level controls",
           "euiBreadcrumb.collapsedBadge.ariaLabel": "See collapsed breadcrumbs",
+          "euiBreadcrumb.popoverAriaLabel": "Clicking this button will toggle a popover dialog.",
           "euiBreadcrumbs.nav.ariaLabel": "Breadcrumbs",
           "euiCardSelect.select": "Select",
           "euiCardSelect.selected": "Selected",
@@ -32,6 +33,9 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiCodeBlockFullScreen.fullscreenCollapse": "Collapse",
           "euiCodeBlockFullScreen.fullscreenExpand": "Expand",
           "euiCollapsedItemActions.allActions": "All actions",
+          "euiCollapsibleNavBeta.ariaLabel": "Site menu",
+          "euiCollapsibleNavButton.ariaLabelClose": "Toggle navigation closed",
+          "euiCollapsibleNavButton.ariaLabelOpen": "Toggle navigation open",
           "euiColorPicker.alphaLabel": "Alpha channel (opacity) value",
           "euiColorPicker.closeLabel": "Press the down key to open a popover containing color options",
           "euiColorPicker.colorErrorMessage": "Invalid color value",
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
index 6e786f4205499a..c08df1f5a2bd8b 100644
--- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
+++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -103,6 +103,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Page level controls',
       description: 'Screen reader announcement about heading controls',
     }),
+    'euiBreadcrumb.popoverAriaLabel': i18n.translate('core.euiBreadcrumb.popoverAriaLabel', {
+      defaultMessage: 'Clicking this button will toggle a popover dialog.',
+    }),
     'euiBreadcrumb.collapsedBadge.ariaLabel': i18n.translate(
       'core.euiBreadcrumb.collapsedBadge.ariaLabel',
       {
@@ -158,6 +161,17 @@ export const getEuiContextMapping = (): EuiTokensObject => {
           'ARIA label and tooltip content describing a button that expands an actions menu',
       }
     ),
+    'euiCollapsibleNavBeta.ariaLabel': i18n.translate('core.euiCollapsibleNavBeta.ariaLabel', {
+      defaultMessage: 'Site menu',
+    }),
+    'euiCollapsibleNavButton.ariaLabelClose': i18n.translate(
+      'core.euiCollapsibleNavButton.ariaLabelClose',
+      { defaultMessage: 'Toggle navigation closed' }
+    ),
+    'euiCollapsibleNavButton.ariaLabelOpen': i18n.translate(
+      'core.euiCollapsibleNavButton.ariaLabelOpen',
+      { defaultMessage: 'Toggle navigation open' }
+    ),
     'euiColorPicker.alphaLabel': i18n.translate('core.euiColorPicker.alphaLabel', {
       defaultMessage: 'Alpha channel (opacity) value',
       description: 'Label describing color alpha channel',
diff --git a/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx b/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx
index b774b0d0609b04..d9085b08f536d5 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx
+++ b/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx
@@ -11,8 +11,6 @@ import { css } from '@emotion/react';
 import type { FC } from 'react';
 import { EuiCommentProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import type { Pagination as PaginationType } from '@elastic/eui';
-
 import type {
   CommentsArray,
   ExceptionListItemSchema,
@@ -20,7 +18,7 @@ import type {
 } from '@kbn/securitysolution-io-ts-list-types';
 
 import { euiThemeVars } from '@kbn/ui-theme';
-import { EmptyViewerState, ExceptionItemCard, Pagination } from '../..';
+import { EmptyViewerState, ExceptionItemCard, Pagination, PaginationProps } from '../..';
 
 import type {
   RuleReferences,
@@ -46,7 +44,7 @@ interface ExceptionItemsProps {
   exceptions: ExceptionListItemSchema[];
   listType: ExceptionListTypeEnum;
   ruleReferences: RuleReferences;
-  pagination: PaginationType;
+  pagination: PaginationProps['pagination'];
   editActionLabel?: string;
   deleteActionLabel?: string;
   dataTestSubj?: string;
diff --git a/packages/kbn-securitysolution-exception-list-components/src/types/index.ts b/packages/kbn-securitysolution-exception-list-components/src/types/index.ts
index 377779332c869d..070741687b0fd6 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/types/index.ts
+++ b/packages/kbn-securitysolution-exception-list-components/src/types/index.ts
@@ -12,7 +12,7 @@ import type { Pagination } from '@elastic/eui';
 import type { NamespaceType } from '@kbn/securitysolution-io-ts-list-types';
 
 export interface GetExceptionItemProps {
-  pagination?: Pagination;
+  pagination?: PaginationProps['pagination'];
   search?: string;
   filters?: string;
 }
@@ -20,7 +20,7 @@ export interface GetExceptionItemProps {
 export interface PaginationProps {
   dataTestSubj?: string;
   ariaLabel?: string;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   onPaginationChange: (arg: GetExceptionItemProps) => void;
 }
 
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index 552f98736a2ebf..f9b3a6d02e9eb7 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@86.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@87.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };
diff --git a/x-pack/packages/ml/data_grid/lib/types.ts b/x-pack/packages/ml/data_grid/lib/types.ts
index 0d856108bf83b8..2c1ab284d1c203 100644
--- a/x-pack/packages/ml/data_grid/lib/types.ts
+++ b/x-pack/packages/ml/data_grid/lib/types.ts
@@ -64,7 +64,7 @@ export interface RowCountInfo {
 /**
  * Type representing the pagination settings for an index.
  */
-export type IndexPagination = Pick<EuiDataGridPaginationProps, 'pageIndex' | 'pageSize'>;
+export type IndexPagination = Required<Pick<EuiDataGridPaginationProps, 'pageIndex' | 'pageSize'>>;
 
 /**
  * Type for callback function for changing items per page.
diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
index 0c95e320863b23..57d721c4099631 100644
--- a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
+++ b/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
@@ -92,7 +92,7 @@ interface BaseDataTableProps {
   rowRenderers: DeprecatedRowRenderer[];
   hasCrudPermissions?: boolean;
   unitCountText: string;
-  pagination: EuiDataGridPaginationProps;
+  pagination: EuiDataGridPaginationProps & { pageSize: number };
   totalItems: number;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   isEventRenderedView?: boolean;
diff --git a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts
index 4eae9a085e598d..2d3f9b1c7605cf 100644
--- a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts
+++ b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts
@@ -50,7 +50,7 @@ export const getPaginationTableParams = (
 export const getPaginationQuery = ({
   pageIndex,
   pageSize,
-}: Pick<Pagination, 'pageIndex' | 'pageSize'>) => ({
+}: Required<Pick<Pagination, 'pageIndex' | 'pageSize'>>) => ({
   from: pageIndex * pageSize,
   size: pageSize,
 });
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx
index f54548531434a7..3ad8deb3469989 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx
@@ -31,7 +31,7 @@ type TableProps = Required<EuiBasicTableProps<CspFinding>>;
 interface Props {
   loading: boolean;
   items: CspFinding[];
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sorting: TableProps['sorting'];
   setTableOptions(options: CriteriaWithPagination<CspFinding>): void;
   onAddFilter: OnAddFilter;
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx
index 0a1a23701774b4..09f046f504ea73 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx
@@ -29,7 +29,7 @@ import { EmptyState } from '../../../../components/empty_state';
 export interface ResourceFindingsTableProps {
   items: CspFinding[];
   loading: boolean;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sorting: Required<EuiBasicTableProps<CspFinding>>['sorting'];
   setTableOptions(options: CriteriaWithPagination<CspFinding>): void;
   onAddFilter: OnAddFilter;
diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
index b54121982381b1..256d77fec965b6 100644
--- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx
@@ -500,7 +500,6 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
       grow={false}
       data-test-subj="dataVisualizerIndexPage"
       paddingSize="none"
-      panelled={true}
     >
       <EuiPageTemplate.Section>
         <EuiPageTemplate.Header data-test-subj="dataVisualizerPageHeader" css={dvPageHeader}>
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/account_header/account_header.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/account_header/account_header.tsx
index 421f594fcfba86..c5119bd23ce936 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/account_header/account_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/account_header/account_header.tsx
@@ -68,11 +68,11 @@ export const AccountHeader: React.FC = () => {
   return (
     <EuiHeader>
       <EuiHeaderSection grow={false}>
-        <EuiHeaderSectionItem border="none">
+        <EuiHeaderSectionItem>
           <EuiHeaderLogo iconType="logoWorkplaceSearch" />
           <EuiText role="banner">{WORKPLACE_SEARCH_TITLE}</EuiText>
         </EuiHeaderSectionItem>
-        <EuiHeaderSectionItem border="none">
+        <EuiHeaderSectionItem>
           <EuiHeaderLinks>
             <EuiButtonEmptyTo to={PRIVATE_SOURCES_PATH}>{ACCOUNT_NAV.SOURCES}</EuiButtonEmptyTo>
           </EuiHeaderLinks>
diff --git a/x-pack/plugins/maps/public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap
index b549a3d7e57a90..997b558835281c 100644
--- a/x-pack/plugins/maps/public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap
+++ b/x-pack/plugins/maps/public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap
@@ -48,10 +48,10 @@ exports[`HeatmapStyleEditor is rendered 1`] = `
           "getPalette": [Function],
           "palette": Array [
             "#e0e4eb",
-            "#c2c9d5",
-            "#a6afbf",
-            "#8c95a5",
-            "#757c8b",
+            "#c3c9d4",
+            "#a8afbc",
+            "#8e95a3",
+            "#757c8a",
             "#5e6471",
             "#494d58",
             "#343741",
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts
index 457749df67035a..98bad60f8cd2e1 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts
@@ -32,7 +32,7 @@ export interface CriteriaWithPagination<T> extends Criteria<T> {
 
 interface UseTableSettingsReturnValue<T> {
   onTableChange: EuiBasicTableProps<T>['onChange'];
-  pagination: Pagination;
+  pagination: Required<Omit<Pagination, 'showPerPageOptions'>>;
   sorting: {
     sort: {
       field: keyof T;
diff --git a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
index 93f05e0b0eeb93..894fb1b9b804eb 100644
--- a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
+++ b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
@@ -90,7 +90,7 @@ describe('SecurityNavControlService', () => {
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-label="Account menu"
-                class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+                class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiHeaderSectionItemButton"
                 data-test-subj="userMenuButton"
                 style="line-height: normal;"
                 type="button"
@@ -102,7 +102,7 @@ describe('SecurityNavControlService', () => {
                     class="eui-textTruncate euiButtonEmpty__text"
                   >
                     <span
-                      class="euiHeaderSectionItemButton__content"
+                      class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
                     >
                       <span
                         aria-label="Loading"
diff --git a/x-pack/plugins/security_solution/public/exceptions/components/exceptions_utility/index.tsx b/x-pack/plugins/security_solution/public/exceptions/components/exceptions_utility/index.tsx
index bb6657d44bfa36..1974774e7f122a 100644
--- a/x-pack/plugins/security_solution/public/exceptions/components/exceptions_utility/index.tsx
+++ b/x-pack/plugins/security_solution/public/exceptions/components/exceptions_utility/index.tsx
@@ -37,7 +37,7 @@ const StyledCondition = styled.span`
 interface ExceptionsUtilityComponentProps {
   dataTestSubj?: string;
   exceptionsTitle?: string;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   // Corresponds to last time exception items were fetched
   lastUpdated: string | number | null;
 }
diff --git a/x-pack/plugins/security_solution/public/exceptions/components/list_exception_items/index.tsx b/x-pack/plugins/security_solution/public/exceptions/components/list_exception_items/index.tsx
index 1cebb1f5a22ee1..ee45e7414184fa 100644
--- a/x-pack/plugins/security_solution/public/exceptions/components/list_exception_items/index.tsx
+++ b/x-pack/plugins/security_solution/public/exceptions/components/list_exception_items/index.tsx
@@ -28,7 +28,7 @@ interface ListExceptionItemsProps {
   exceptions: ExceptionListItemSchema[];
   listType: ExceptionListTypeEnum;
   lastUpdated: string | number | null;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   emptyViewerTitle?: string;
   emptyViewerBody?: string;
   emptyViewerButtonText?: string;
diff --git a/x-pack/plugins/security_solution/public/exceptions/hooks/use_list_exception_items/index.ts b/x-pack/plugins/security_solution/public/exceptions/hooks/use_list_exception_items/index.ts
index 5a00d4f5fac9ae..9c466859334fe5 100644
--- a/x-pack/plugins/security_solution/public/exceptions/hooks/use_list_exception_items/index.ts
+++ b/x-pack/plugins/security_solution/public/exceptions/hooks/use_list_exception_items/index.ts
@@ -45,7 +45,7 @@ export const useListExceptionItems = ({
 
   const [exceptions, setExceptions] = useState<ExceptionListItemSchema[]>([]);
   const [exceptionListReferences, setExceptionListReferences] = useState<RuleReferences>({});
-  const [pagination, setPagination] = useState<Pagination>({
+  const [pagination, setPagination] = useState<Pagination & { pageSize: number }>({
     pageIndex: 0,
     pageSize: 0,
     totalItemCount: 0,
diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx b/x-pack/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx
index f2c1cc2f3e1929..74912078c82515 100644
--- a/x-pack/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx
@@ -12,7 +12,7 @@ import { SidePanelContentManager } from './side_panel_content_manager';
 import { useWithSidePanel } from '../../hooks/state_selectors/use_with_side_panel';
 
 const StyledEuiFlexItemWhite = styled(EuiFlexItem)`
-  background-color: ${({ theme: { eui } }) => eui.euiHeaderBackgroundColor} !important;
+  background-color: ${({ theme: { eui } }) => eui.euiColorEmptyShade} !important;
   border-radius: ${({ theme: { eui } }) => `0 ${eui.euiSizeXS} ${eui.euiSizeXS} 0`};
   box-shadow: 0 ${({ theme: { eui } }) => eui.euiSizeXS} ${({ theme: { eui } }) => eui.euiSizeXS}
     ${({ theme: { eui } }) => transparentize(eui.euiShadowColor, 0.04)};
diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.test.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.test.tsx
index 62e1c6d6e09ec5..54411b7ac85d5b 100644
--- a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.test.tsx
+++ b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.test.tsx
@@ -105,7 +105,7 @@ describe('NavControlPopover', () => {
       />
     );
 
-    wrapper.find(EuiHeaderSectionItemButton).simulate('click');
+    wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
 
     // Wait for `getSpaces` promise to resolve
     await waitFor(() => {
@@ -118,7 +118,7 @@ describe('NavControlPopover', () => {
     const wrapper = await setup(mockSpaces);
 
     await act(async () => {
-      wrapper.find(EuiHeaderSectionItemButton).simulate('click');
+      wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
     });
     wrapper.update();
 
@@ -167,7 +167,7 @@ describe('NavControlPopover', () => {
     const wrapper = await setup(eightSpaces);
 
     await act(async () => {
-      wrapper.find(EuiHeaderSectionItemButton).simulate('click');
+      wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
     });
     wrapper.update();
 
@@ -200,7 +200,7 @@ describe('NavControlPopover', () => {
     const wrapper = await setup(sevenSpaces);
 
     await act(async () => {
-      wrapper.find(EuiHeaderSectionItemButton).simulate('click');
+      wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
     });
     wrapper.update();
 
@@ -211,7 +211,7 @@ describe('NavControlPopover', () => {
     const wrapper = await setup(mockSpaces);
 
     await act(async () => {
-      wrapper.find(EuiHeaderSectionItemButton).simulate('click');
+      wrapper.find(EuiHeaderSectionItemButton).find('button').simulate('click');
     });
     wrapper.update();
     expect(wrapper.find(EuiPopover).props().isOpen).toEqual(true);
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_event_log_list_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_event_log_list_table.tsx
index ec8d0d305ba691..4f9a9bde60dbf7 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_event_log_list_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_event_log_list_table.tsx
@@ -15,7 +15,6 @@ import {
   EuiProgress,
   EuiSpacer,
   EuiDataGridSorting,
-  Pagination,
   EuiSuperDatePicker,
   OnTimeChangeProps,
   EuiSwitch,
@@ -38,6 +37,7 @@ import { RefineSearchPrompt } from '../../common/components/refine_search_prompt
 import { ConnectorEventLogListKPIWithApi as ConnectorEventLogListKPI } from './actions_connectors_event_log_list_kpi';
 import {
   EventLogDataGrid,
+  type EventLogDataGrid as EventLogDataGridProps,
   EventLogListStatusFilter,
   getIsColumnSortable,
 } from '../../common/components/event_log';
@@ -136,7 +136,7 @@ export const ConnectorEventLogListTable = <T extends ConnectorEventLogListOption
   const [sortingColumns, setSortingColumns] = useState<EuiDataGridSorting['columns']>([]);
   const [filter, setFilter] = useState<string[]>([]);
   const [actualTotalItemCount, setActualTotalItemCount] = useState<number>(0);
-  const [pagination, setPagination] = useState<Pagination>({
+  const [pagination, setPagination] = useState<EventLogDataGridProps['pagination']>({
     pageIndex: 0,
     pageSize: initialPageSize,
     totalItemCount: 0,
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx
index 3cc13e012f20ee..43199b924ba2dc 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx
@@ -55,7 +55,7 @@ type ExecutionLog = IExecutionLog | IConnectorsExecutionLog;
 export interface EventLogDataGrid {
   columns: EuiDataGridColumn[];
   logs: ExecutionLog[];
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sortingColumns: EuiDataGridSorting['columns'];
   visibleColumns: string[];
   dateFormat: string;
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_pagination_status.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_pagination_status.tsx
index f1968b6aa1666b..5cabde120700b7 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_pagination_status.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_pagination_status.tsx
@@ -9,9 +9,8 @@ import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { Pagination, EuiText } from '@elastic/eui';
 
-export type EventLogPaginationStatusProps = Pick<
-  Pagination,
-  'pageIndex' | 'pageSize' | 'totalItemCount'
+export type EventLogPaginationStatusProps = Required<
+  Pick<Pagination, 'pageIndex' | 'pageSize' | 'totalItemCount'>
 >;
 
 export const EventLogPaginationStatus = (props: EventLogPaginationStatusProps) => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_error_log.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_error_log.tsx
index f489a40af478d3..2d33a205e6e36c 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_error_log.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_error_log.tsx
@@ -112,7 +112,7 @@ export const RuleErrorLog = (props: RuleErrorLogProps) => {
 
   const isOnLastPage = useMemo(() => {
     const { pageIndex, pageSize } = pagination;
-    return (pageIndex + 1) * pageSize >= MAX_RESULTS;
+    return (pageIndex + 1) * pageSize! >= MAX_RESULTS;
   }, [pagination]);
 
   const formattedSort = useMemo(() => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_table.tsx
index aecab951b3b185..58125c1069396d 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_event_log_list_table.tsx
@@ -16,7 +16,6 @@ import {
   EuiProgress,
   EuiSpacer,
   EuiDataGridSorting,
-  Pagination,
   EuiSuperDatePicker,
   OnTimeChangeProps,
   EuiSwitch,
@@ -32,6 +31,7 @@ import {
 } from '../../../constants';
 import {
   EventLogDataGrid,
+  type EventLogDataGrid as EventLogDataGridProps,
   getIsColumnSortable,
   ColumnHeaderWithToolTip,
   numTriggeredActionsDisplay,
@@ -160,7 +160,7 @@ export const RuleEventLogListTable = <T extends RuleEventLogListOptions>(
   const [sortingColumns, setSortingColumns] = useState<EuiDataGridSorting['columns']>([]);
   const [filter, setFilter] = useState<string[]>([]);
   const [actualTotalItemCount, setActualTotalItemCount] = useState<number>(0);
-  const [pagination, setPagination] = useState<Pagination>({
+  const [pagination, setPagination] = useState<EventLogDataGridProps['pagination']>({
     pageIndex: 0,
     pageSize: initialPageSize,
     totalItemCount: 0,
diff --git a/x-pack/test/functional/apps/aiops/change_point_detection.ts b/x-pack/test/functional/apps/aiops/change_point_detection.ts
index a2a3c9b7ddf3a4..9b11431b2e7004 100644
--- a/x-pack/test/functional/apps/aiops/change_point_detection.ts
+++ b/x-pack/test/functional/apps/aiops/change_point_detection.ts
@@ -65,7 +65,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       await aiops.changePointDetectionPage.selectSplitField(0, 'geoip.city_name');
       await aiops.changePointDetectionPage.getTable(0).waitForTableToLoad();
       const result = await aiops.changePointDetectionPage.getTable(0).parseTable();
-      expect(result.length).to.eql(5);
+      expect(result.length).to.be(7);
       // assert asc sorting by p_value is applied
       expect(parseFloat(result[0].pValue)).to.be.lessThan(parseFloat(result[4].pValue));
     });
@@ -73,7 +73,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
     it('allows change point selection for detailed view', async () => {
       await aiops.changePointDetectionPage.getTable(0).selectAllRows();
       await aiops.changePointDetectionPage.viewSelected();
-      await aiops.changePointDetectionPage.assertDetailedView(5);
+      await aiops.changePointDetectionPage.assertDetailedView(6);
       await aiops.changePointDetectionPage.closeFlyout();
       // deselect
       await aiops.changePointDetectionPage.getTable(0).selectAllRows();
diff --git a/yarn.lock b/yarn.lock
index f7afb86583c80e..b4e6feab73a58d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1577,35 +1577,33 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@86.0.0":
-  version "86.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-86.0.0.tgz#52137f914b4b50566c5169c23a82bd4ed0f2ed0b"
-  integrity sha512-+0/BggLqlZFxYI/HPikfu8lh8ejl7RIOikgxVq1hQuXqjp+cqeJL5R2OcUHQVHBwYy/FdDiQkMHA0Vg/itp4Vw==
+"@elastic/eui@87.1.0":
+  version "87.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-87.1.0.tgz#1ef2c5634d2efafbdd3fde6a68c037f3cad2f30e"
+  integrity sha512-dnvgTveGqyDoWrG1DRE3LbTWMlDaChDEENs3hw6B5sO6koNOCfsNm7JwJje7ARQbk82/kuymy+zfQsnkOA3sTA==
   dependencies:
     "@hello-pangea/dnd" "^16.2.0"
-    "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.194"
     "@types/numeral" "^0.0.28"
     "@types/react-input-autosize" "^2.2.1"
-    "@types/react-virtualized-auto-sizer" "^1.0.1"
     "@types/react-window" "^1.8.5"
     "@types/refractor" "^3.0.0"
     "@types/resize-observer-browser" "^0.1.5"
     "@types/vfile-message" "^2.0.0"
-    chroma-js "^2.1.0"
-    classnames "^2.2.6"
+    chroma-js "^2.4.2"
+    classnames "^2.3.2"
     lodash "^4.17.21"
-    mdast-util-to-hast "^10.0.0"
+    mdast-util-to-hast "^10.2.0"
     numeral "^2.0.6"
     prop-types "^15.6.0"
-    react-dropzone "^11.5.3"
+    react-dropzone "^11.7.1"
     react-element-to-jsx-string "^14.3.4"
     react-focus-on "^3.9.1"
     react-input-autosize "^3.0.0"
     react-is "^17.0.2"
     react-remove-scroll-bar "^2.3.4"
-    react-virtualized-auto-sizer "^1.0.6"
-    react-window "^1.8.6"
+    react-virtualized-auto-sizer "^1.0.20"
+    react-window "^1.8.9"
     refractor "^3.5.0"
     rehype-raw "^5.0.0"
     rehype-react "^6.0.0"
@@ -1614,7 +1612,7 @@
     remark-emoji "^2.1.0"
     remark-parse-no-trim "^8.0.4"
     remark-rehype "^8.0.0"
-    tabbable "^5.2.1"
+    tabbable "^5.3.3"
     text-diff "^1.0.1"
     unified "^9.2.0"
     unist-util-visit "^2.0.3"
@@ -8491,11 +8489,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/chroma-js@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.0.0.tgz#b0fc98c8625d963f14e8138e0a7961103303ab22"
-  integrity sha512-iomunXsXjDxhm2y1OeJt8NwmgC7RyNkPAOddlYVGsbGoX8+1jYt84SG4/tf6RWcwzROLx1kPXPE95by1s+ebIg==
-
 "@types/chroma-js@^2.1.0":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-2.1.3.tgz#0b03d737ff28fad10eb884e0c6cedd5ffdc4ba0a"
@@ -9537,13 +9530,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized-auto-sizer@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
-  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-virtualized@^9.21.22":
   version "9.21.22"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.22.tgz#5ba39b29869200620a6bf2069b8393f258a9c1e2"
@@ -12556,6 +12542,11 @@ chroma-js@^2.1.0:
   dependencies:
     cross-env "^6.0.3"
 
+chroma-js@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.4.2.tgz#dffc214ed0c11fa8eefca2c36651d8e57cbfb2b0"
+  integrity sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -12632,6 +12623,11 @@ classnames@2.2.6, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -21438,6 +21434,20 @@ mdast-util-to-hast@10.0.1, mdast-util-to-hast@^10.0.0:
     unist-util-position "^3.0.0"
     unist-util-visit "^2.0.0"
 
+mdast-util-to-hast@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.2.0.tgz#61875526a017d8857b71abc9333942700b2d3604"
+  integrity sha512-JoPBfJ3gBnHZ18icCwHR50orC9kNH81tiR1gs01D8Q5YpV6adHNO9nKNuFBCJQ941/32PT1a63UF/DitmS3amQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    mdast-util-definitions "^4.0.0"
+    mdurl "^1.0.0"
+    unist-builder "^2.0.0"
+    unist-util-generated "^1.0.0"
+    unist-util-position "^3.0.0"
+    unist-util-visit "^2.0.0"
+
 mdast-util-to-markdown@^0.6.0, mdast-util-to-markdown@^0.6.1, mdast-util-to-markdown@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.1.tgz#0e07d3f871e056bffc38a0cf50c7298b56d9e0d6"
@@ -24900,7 +24910,7 @@ react-draggable@^4.0.0, react-draggable@^4.0.3:
     clsx "^1.1.1"
     prop-types "^15.6.0"
 
-react-dropzone@^11.5.3:
+react-dropzone@^11.7.1:
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
   integrity sha512-zxCMwhfPy1olUEbw3FLNPLhAm/HnaYH5aELIEglRbqabizKAdHs0h+WuyOpmA+v1JXn0++fpQDdNfUagWt5hJQ==
@@ -25343,10 +25353,10 @@ react-use@^15.3.8:
     ts-easing "^0.2.0"
     tslib "^2.0.0"
 
-react-virtualized-auto-sizer@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
-  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+react-virtualized-auto-sizer@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz#d9a907253a7c221c52fa57dc775a6ef40c182645"
+  integrity sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA==
 
 react-virtualized@^9.22.5:
   version "9.22.5"
@@ -25360,7 +25370,7 @@ react-virtualized@^9.22.5:
     prop-types "^15.7.2"
     react-lifecycles-compat "^3.0.4"
 
-react-window@^1.8.6, react-window@^1.8.9:
+react-window@^1.8.9:
   version "1.8.9"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.9.tgz#24bc346be73d0468cdf91998aac94e32bc7fa6a8"
   integrity sha512-+Eqx/fj1Aa5WnhRfj9dJg4VYATGwIUP2ItwItiJ6zboKWA6EX3lYDAXfGF2hyNqplEprhbtjbipiADEcwQ823Q==
@@ -28037,10 +28047,10 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
-tabbable@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
-  integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
+tabbable@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
+  integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
 
 table@^6.8.0:
   version "6.8.0"