Upgrade EUI to v93.4.0 (#178890)

`v93.3.0`⏩ `v93.4.0`

---

## [`v93.4.0`](https://github.com/elastic/eui/releases/v93.4.0)

- Added the following properties to `EuiButtonGroup`'s `options`
configs: `toolTipContent`, `toolTipProps`, and `title`. These new
properties allow wrapping buttons in `EuiToolTips`, and additionally
customizing or disabling the native browser `title` tooltip.
([#7461](elastic/eui#7461))
- Enhanced `EuiResizeObserver` and `useResizeObserver`'s performance to
not trigger page reflows on resize event
([#7575](elastic/eui#7575))
- Updated `EuiSuperUpdateButton` to support custom button text via an
optional `children` prop
([#7576](elastic/eui#7576))

**Bug fixes**

- Fixed `EuiFlyout` to not repeatedly remove/add a body class on resize
([#7462](elastic/eui#7462))
- Fixed `EuiToast` title text to wrap instead of overflowing out of the
container ([#7568](elastic/eui#7568))
- Fixed a visual bug with `EuiHeaderBreadcrumbs` with popovers
([#7580](elastic/eui#7580))

**Deprecations**

- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of
a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed`
([#7570](elastic/eui#7570))
- Deprecated all charts theme exports in favor of `@elastic/charts`
exports: ([#7572](elastic/eui#7572))
- Deprecated `EUI_CHARTS_THEME_<DARK|LIGHT>` in favor of
`<DARK|LIGHT>_THEME` from `@elastic/charts`.
([#7572](elastic/eui#7572))
- Deprecated `EUI_SPARKLINE_THEME_PARTIAL` in favor of
`useSparklineOverrides` theme from the kibana `charts` plugin `theme`
service.

**Accessibility**

- Updated `EuiModal` to set an `aria-modal` attribute and a default
`dialog` role ([#7564](elastic/eui#7564))
- Updated `EuiConfirmModal` to set a default `alertdialog` role
([#7564](elastic/eui#7564))
- Fixed `EuiModal` and `EuiConfirmModal` to properly trap
Safari+VoiceOver's virtual cursor
([#7564](elastic/eui#7564))

package.json

@@ -106,7 +106,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.12.2",
     "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "93.3.0",
+    "@elastic/eui": "93.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

src/core/public/styles/_base.scss

@@ -1,6 +1,5 @@
 // Charts themes available app-wide
 @import '@elastic/charts/dist/theme';
-@import '@elastic/eui/src/themes/charts/theme';
 
 // We apply brute force focus states to anything not coming from Eui
 // which has focus states designed at the component level.

src/dev/license_checker/config.ts

@@ -86,7 +86,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.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@93.3.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@93.4.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
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/plugins/charts/public/services/palettes/palettes.tsx

@@ -12,8 +12,8 @@ import {
   euiPaletteColorBlind,
   euiPaletteCool,
   euiPaletteGray,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteWarm,
   euiPaletteForStatus,
   euiPaletteForTemperature,
@@ -281,11 +281,11 @@ export const buildPalettes: (
     },
     negative: {
       title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }),
-      ...buildGradient('negative', euiPaletteNegative),
+      ...buildGradient('negative', euiPaletteRed),
     },
     positive: {
       title: i18n.translate('charts.palettes.positiveLabel', { defaultMessage: 'Positive' }),
-      ...buildGradient('positive', euiPalettePositive),
+      ...buildGradient('positive', euiPaletteGreen),
     },
     cool: {
       title: i18n.translate('charts.palettes.coolLabel', { defaultMessage: 'Cool' }),

src/plugins/dashboard/public/dashboard_top_nav/internal_dashboard_top_nav.tsx

@@ -19,7 +19,7 @@ import { ViewMode } from '@kbn/embeddable-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { TopNavMenuProps } from '@kbn/navigation-plugin/public';
 import { EuiHorizontalRule, EuiIcon, EuiToolTipProps } from '@elastic/eui';
-import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
+import type { EuiBreadcrumb } from '@elastic/eui';
 import { MountPoint } from '@kbn/core/public';
 import {
   getDashboardTitle,
@@ -40,7 +40,7 @@ import './_dashboard_top_nav.scss';
 import { DashboardRedirect } from '../dashboard_container/types';
 
 export interface InternalDashboardTopNavProps {
-  customLeadingBreadCrumbs?: EuiBreadcrumbProps[];
+  customLeadingBreadCrumbs?: EuiBreadcrumb[];
   embedSettings?: DashboardEmbedSettings;
   forceHideUnifiedSearch?: boolean;
   redirectTo: DashboardRedirect;

test/functional/apps/dashboard/group1/url_field_formatter.ts

@@ -65,6 +65,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await dashboard.waitForRenderComplete();
       const fieldLink = await visChart.getFieldLinkInVisTable(`${fieldName}: Descending`);
       const fieldValue = await fieldLink.getVisibleText();
+      await fieldLink.moveMouseTo();
       await fieldLink.click();
       await retry.try(async () => {
         await checkUrl(fieldValue);

x-pack/plugins/maps/public/classes/styles/color_palettes.ts

@@ -12,8 +12,8 @@ import {
   euiPaletteForTemperature,
   euiPaletteCool,
   euiPaletteWarm,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteGray,
   euiPaletteColorBlind,
   EuiColorPalettePickerPaletteProps,
@@ -59,9 +59,9 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
   {
     value: 'Greens',
     getPalette: (steps: number) => {
-      return euiPalettePositive(steps);
+      return euiPaletteGreen(steps);
     },
-    palette: euiPalettePositive(8),
+    palette: euiPaletteGreen(8),
     type: 'gradient',
   },
   {
@@ -75,9 +75,9 @@ const COLOR_PALETTES: COLOR_PALETTE[] = [
   {
     value: 'Reds',
     getPalette: (steps: number) => {
-      return euiPaletteNegative(steps);
+      return euiPaletteRed(steps);
     },
-    palette: euiPaletteNegative(8),
+    palette: euiPaletteRed(8),
     type: 'gradient',
   },
   {

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts

@@ -11,7 +11,7 @@ import type { TopLevelSpec } from 'vega-lite/build/vega-lite';
 
 import type { euiLightVars as euiThemeLight } from '@kbn/ui-theme';
 
-import { euiPaletteColorBlind, euiPaletteNegative, euiPalettePositive } from '@elastic/eui';
+import { euiPaletteColorBlind, euiPaletteRed, euiPaletteGreen } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
@@ -25,11 +25,11 @@ export const USER_SELECTION = 'user_selection';
 export const SINGLE_POINT_CLICK = 'single_point_click';
 
 export const COLOR_BLUR = '#bbb';
-export const COLOR_OUTLIER = euiPaletteNegative(2)[1];
+export const COLOR_OUTLIER = euiPaletteRed(2)[1];
 export const COLOR_SELECTION = euiPaletteColorBlind()[2];
 export const COLOR_RANGE_OUTLIER = [euiPaletteColorBlind()[1], euiPaletteColorBlind()[2]];
 export const COLOR_RANGE_NOMINAL = euiPaletteColorBlind({ rotations: 2 });
-export const COLOR_RANGE_QUANTITATIVE = euiPalettePositive(5);
+export const COLOR_RANGE_QUANTITATIVE = euiPaletteGreen(5);
 const CUSTOM_VIS_FIELDS_PATH = 'fields';
 
 export const getColorSpec = (

x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts

@@ -9,7 +9,7 @@ import {
   euiPaletteComplementary,
   euiPaletteForTemperature,
   euiPaletteGray,
-  euiPalettePositive,
+  euiPaletteGreen,
   euiPaletteWarm,
 } from '@elastic/eui';
 import type { MlSavedObjectType } from '../../../common/types/saved_objects';
@@ -21,7 +21,7 @@ export function getMemoryItemColor(typeIn: MemoryItem) {
     case 'anomaly-detector':
       return euiPaletteWarm(5)[1];
     case 'data-frame-analytics':
-      return euiPalettePositive(5)[2];
+      return euiPaletteGreen(5)[2];
     case 'trained-model':
       return euiPaletteForTemperature(5)[1];
     case 'estimated-available-memory':

x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/configurations/lens_attributes/heatmap_attributes.ts

@@ -7,7 +7,7 @@
 
 import { FormulaPublicApi, HeatmapVisualizationState } from '@kbn/lens-plugin/public';
 
-import { euiPaletteNegative } from '@elastic/eui';
+import { euiPaletteRed } from '@elastic/eui';
 import { ColorStop } from '@kbn/coloring';
 import { LayerConfig } from '../lens_attributes';
 import { SingleMetricLensAttributes } from './single_metric_attributes';
@@ -52,7 +52,7 @@ export class HeatMapLensAttributes extends SingleMetricLensAttributes {
   }
 
   getHeatmapState() {
-    const negativePalette = euiPaletteNegative(5);
+    const negativePalette = euiPaletteRed(5);
     const layerConfig = this.layerConfigs[0];
 
     return {

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/lib/get_color_palette.ts

@@ -9,8 +9,8 @@ import {
   euiPaletteCool,
   euiPaletteForStatus,
   euiPaletteForTemperature,
-  euiPaletteNegative,
-  euiPalettePositive,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteWarm,
 } from '@elastic/eui';
 import { InventoryColorPalette } from '../../../../lib/lib';
@@ -24,9 +24,9 @@ const createColorPalette = (name: InventoryColorPalette = 'cool', steps: number
     case 'warm':
       return euiPaletteWarm(steps);
     case 'positive':
-      return euiPalettePositive(steps);
+      return euiPaletteGreen(steps);
     case 'negative':
-      return euiPaletteNegative(steps);
+      return euiPaletteRed(steps);
     default:
       return euiPaletteCool(steps);
   }

x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import type { EuiDataGridSorting } from '@elastic/eui';
+import type { EuiDataGridSorting, EuiDataGridSchemaDetector } from '@elastic/eui';
 import { EuiButtonIcon, EuiCheckbox, EuiToolTip, useDataGridColumnSorting } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
 
@@ -64,6 +64,10 @@ const ActionsContainer = styled.div`
   display: flex;
 `;
 
+// Defined statically to reduce rerenders
+const emptySchema = {};
+const emptySchemaDetectors: EuiDataGridSchemaDetector[] = [];
+
 const HeaderActionsComponent: React.FC<HeaderActionProps> = ({
   width,
   browserFields,
@@ -193,7 +197,13 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = ({
     [columnHeaders, dispatch, timelineId, defaultColumns]
   );
 
-  const ColumnSorting = useDataGridColumnSorting(myColumns, sortedColumns, {}, [], displayValues);
+  const ColumnSorting = useDataGridColumnSorting({
+    columns: myColumns,
+    sorting: sortedColumns,
+    schema: emptySchema,
+    schemaDetectors: emptySchemaDetectors,
+    displayValues,
+  });
 
   return (
     <ActionsContainer>

x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/bulk_add_to_timeline.cy.ts

@@ -17,7 +17,10 @@ import {
   selectFirstPageEvents,
 } from '../../../tasks/common/event_table';
 import { waitForAlertsToPopulate } from '../../../tasks/create_new_rule';
-import { waitsForEventsToBeLoaded } from '../../../tasks/hosts/events';
+import {
+  waitsForEventsToBeLoaded,
+  waitForEventsDataGridToBeLoaded,
+} from '../../../tasks/hosts/events';
 import { openEvents, openSessions } from '../../../tasks/hosts/main';
 import { login } from '../../../tasks/login';
 import { visitWithTimeRange } from '../../../tasks/navigation';
@@ -70,6 +73,7 @@ describe('Bulk Investigate in Timeline', { tags: ['@ess', '@serverless'] }, () =
       visitWithTimeRange(hostsUrl('allHosts'));
       openEvents();
       waitsForEventsToBeLoaded();
+      waitForEventsDataGridToBeLoaded();
     });
 
     it('Adding multiple events to the timeline should be successful', () => {
@@ -101,6 +105,7 @@ describe('Bulk Investigate in Timeline', { tags: ['@ess', '@serverless'] }, () =
       visitWithTimeRange(hostsUrl('allHosts'));
       openSessions();
       waitsForEventsToBeLoaded();
+      waitForEventsDataGridToBeLoaded();
     });
 
     it('Adding multiple events to the timeline should be successful', () => {

x-pack/test/security_solution_cypress/cypress/screens/hosts/events.ts

@@ -30,3 +30,9 @@ export const SERVER_SIDE_EVENT_COUNT =
 
 export const EVENT_VIEWER_CHECKBOX =
   '[data-test-subj="dataGridHeaderCell-checkbox-control-column"]';
+
+export const SELECT_ALL_EVENTS_CHECKBOX = '[data-test-subj="select-all-events"]';
+
+export const EVENTS_LOADING_TRUE = '[data-test-subj="events-container-loading-true"]';
+
+export const EVENTS_LOADING_FALSE = '[data-test-subj="events-container-loading-false"]';

x-pack/test/security_solution_cypress/cypress/tasks/alerts.ts

@@ -464,8 +464,9 @@ export const sumAlertCountFromAlertCountTable = (callback?: (sumOfEachRow: numbe
 };
 
 export const selectFirstPageAlerts = () => {
-  cy.get(SELECT_ALL_VISIBLE_ALERTS).first().scrollIntoView();
-  cy.get(SELECT_ALL_VISIBLE_ALERTS).first().click({ force: true });
+  const ALERTS_DATA_GRID = '[data-test-subj="alertsTable"]';
+  cy.get(ALERTS_DATA_GRID).find(SELECT_ALL_VISIBLE_ALERTS).scrollIntoView();
+  cy.get(ALERTS_DATA_GRID).find(SELECT_ALL_VISIBLE_ALERTS).click({ force: true });
 };
 
 export const selectAllAlerts = () => {

x-pack/test/security_solution_cypress/cypress/tasks/common/event_table.ts

@@ -10,16 +10,16 @@ import {
   SELECT_ALL_EVENTS,
   SELECT_EVENTS_ACTION_ADD_BULK_TO_TIMELINE,
 } from '../../screens/common/controls';
-import { EVENT_VIEWER_CHECKBOX } from '../../screens/hosts/events';
+import { EVENT_VIEWER_CHECKBOX, SELECT_ALL_EVENTS_CHECKBOX } from '../../screens/hosts/events';
 
 export const selectFirstPageEvents = () => {
-  // eslint-disable-next-line cypress/unsafe-to-chain-command
-  cy.get(EVENT_VIEWER_CHECKBOX).first().scrollIntoView().click();
+  cy.get(EVENT_VIEWER_CHECKBOX).find(SELECT_ALL_EVENTS_CHECKBOX).scrollIntoView();
+  cy.get(EVENT_VIEWER_CHECKBOX).find(SELECT_ALL_EVENTS_CHECKBOX).click();
+  cy.get(SELECT_ALL_EVENTS_CHECKBOX).should('be.checked');
 };
 
 export const selectAllEvents = () => {
-  // eslint-disable-next-line cypress/unsafe-to-chain-command
-  cy.get(EVENT_VIEWER_CHECKBOX).first().scrollIntoView().click();
+  selectFirstPageEvents();
   cy.get(SELECT_ALL_EVENTS).click();
 };