Upgrade EUI to v88.5.4 (#167555)

`v88.5.0`⏩`v88.5.4`

This EUI upgrade helps unblock the Shared UX team with some beta
serverless nav updates not listed in the below changelog
(elastic/eui#7228 and
elastic/eui#7248).

---

## [`88.5.4`](https://github.com/elastic/eui/tree/v88.5.4)

- This release contains internal changes to a beta component needed by
Kibana.

## [`88.5.3`](https://github.com/elastic/eui/tree/v88.5.3)

**Bug fixes**

- Fixed `EuiComboBox` search input width not resetting correctly on
selection ([#7240](elastic/eui#7240))

## [`88.5.2`](https://github.com/elastic/eui/tree/v88.5.2)

**Bug fixes**

- Fixed broken `EuiTextTruncate` testenv mocks
([#7234](elastic/eui#7234))

## [`88.5.1`](https://github.com/elastic/eui/tree/v88.5.1)

- Improved the performance of `EuiComboBox` by removing the
`react-autosizer-input` dependency
([#7215](elastic/eui#7215))

**Dependency updates**

- Updated `react-element-to-jsx-string` to v5.0.0
([#7214](elastic/eui#7214))
- Removed unused `@types/vfile-message` dependency
([#7214](elastic/eui#7214))

package.json

@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "88.5.0",
+    "@elastic/eui": "88.5.4",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-securitysolution-autocomplete/src/field/__tests__/index.test.tsx

@@ -110,9 +110,7 @@ describe('FieldComponent', () => {
     );
     const fieldAutocompleteComboBox = wrapper.getByTestId('comboBoxSearchInput');
     fireEvent.change(fieldAutocompleteComboBox, { target: { value: '_source' } });
-    await waitFor(() =>
-      expect(wrapper.getByTestId('fieldAutocompleteComboBox')).toHaveTextContent('_source')
-    );
+    expect(fieldAutocompleteComboBox).toHaveValue('_source');
   });
 
   it('it allows custom user input if "acceptsCustomOptions" is "true"', async () => {

packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx

@@ -11,7 +11,8 @@ import React, { FC, useEffect, useState } from 'react';
 import {
   EuiCollapsibleNavItem,
   EuiCollapsibleNavItemProps,
-  EuiCollapsibleNavSubItemGroupTitle,
+  EuiCollapsibleNavSubItemProps,
+  EuiTitle,
 } from '@elastic/eui';
 import { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser';
 import classnames from 'classnames';
@@ -22,7 +23,7 @@ import { isAbsoluteLink } from '../../utils';
 const navigationNodeToEuiItem = (
   item: ChromeProjectNavigationNode,
   { navigateToUrl, basePath }: { navigateToUrl: NavigateToUrlFn; basePath: BasePathService }
-): EuiCollapsibleNavSubItemGroupTitle | EuiCollapsibleNavItemProps => {
+): EuiCollapsibleNavSubItemProps => {
   const href = item.deepLink?.url ?? item.href;
   const id = item.path ? item.path.join('.') : item.id;
   const isExternal = Boolean(href) && isAbsoluteLink(href!);
@@ -33,9 +34,30 @@ const navigationNodeToEuiItem = (
     [`nav-item-isActive`]: isSelected,
   });
 
+  // Note: this can be replaced with an `isGroup` API or whatever you prefer
+  // Could also probably be pulled out to a separate component vs inlined
+  if (item.isGroupTitle) {
+    return {
+      renderItem: () => (
+        <EuiTitle
+          size="xxxs"
+          className="eui-textTruncate"
+          css={({ euiTheme }: any) => ({
+            marginTop: euiTheme.size.base,
+            paddingBlock: euiTheme.size.xs,
+            paddingInline: euiTheme.size.s,
+          })}
+        >
+          <div id={id} data-test-subj={dataTestSubj}>
+            {item.title}
+          </div>
+        </EuiTitle>
+      ),
+    };
+  }
+
   return {
     id,
-    isGroupTitle: item.isGroupTitle,
     title: item.title,
     isSelected,
     accordionProps: {

packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
+import { EuiCollapsibleNavBeta } from '@elastic/eui';
 import React, { FC } from 'react';
 
 interface Props {
@@ -22,10 +22,12 @@ export const NavigationUI: FC<Props> = ({ children, unstyled, footerChildren, da
         <>{children}</>
       ) : (
         <>
-          <EuiFlyoutBody scrollableTabIndex={-1} data-test-subj={dataTestSubj}>
+          <EuiCollapsibleNavBeta.Body data-test-subj={dataTestSubj}>
             {children}
-          </EuiFlyoutBody>
-          {footerChildren && <EuiFlyoutFooter>{footerChildren}</EuiFlyoutFooter>}
+          </EuiCollapsibleNavBeta.Body>
+          {footerChildren && (
+            <EuiCollapsibleNavBeta.Footer>{footerChildren}</EuiCollapsibleNavBeta.Footer>
+          )}
         </>
       )}
     </>