Upgrade EUI to v89.1.0

package.json

@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.5.0",
-    "@elastic/eui": "89.0.0",
+    "@elastic/eui": "89.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-unified-data-table/src/components/data_table.scss

@@ -22,10 +22,6 @@
   font-size: $euiFontSizeS;
 }
 
-.euiDataGridRowCell__definedHeight {
-  white-space: pre-wrap;
-}
-
 .unifiedDataTable__inner {
   display: flex;
   flex-direction: column;
@@ -51,7 +47,7 @@
   }
 
   .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
     background-color: tintOrShade($euiColorLightShade, 50%, 0);
   }
 }
@@ -110,14 +106,14 @@
 .unifiedDataTable__rowControl {
   // fine-tuning the vertical alignment with the text for any row height setting
   margin-top: -3px;
-  .euiDataGridRowCell__truncate & { // "Single line" row height setting
+  .euiDataGridRowCell__defaultHeight & { // "Single line" row height setting
     margin-top: 0;
   }
 }
 
 .unifiedDataTable__descriptionList {
   // force the content truncation when "Single line" row height setting is active
-  .euiDataGridRowCell__truncate & {
+  .euiDataGridRowCell__defaultHeight & {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;

packages/react/kibana_context/root/eui_provider.tsx

@@ -10,7 +10,7 @@ import React, { FC, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
 
-import { EuiProvider, EuiProviderProps } from '@elastic/eui';
+import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
 import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
 import { ThemeServiceStart } from '@kbn/react-kibana-context-common';
@@ -25,18 +25,23 @@ export interface KibanaEuiProviderProps extends Pick<EuiProviderProps<{}>, 'modi
 
 // Set up the caches.
 // https://eui.elastic.co/#/utilities/provider#cache-location
+const stylisPlugins = [euiStylisPrefixer]; // https://emotion.sh/docs/@emotion/cache#stylisplugins
+
 const emotionCache = createCache({
   key: 'css',
+  stylisPlugins,
   container: document.querySelector('meta[name="emotion"]') as HTMLElement,
 });
 
 const globalCache = createCache({
   key: EUI_STYLES_GLOBAL,
+  stylisPlugins,
   container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
 });
 
 const utilitiesCache = createCache({
   key: EUI_STYLES_UTILS,
+  stylisPlugins,
   container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
 });
 

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.5.0': ['Elastic License 2.0'],
-  '@elastic/eui@89.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@89.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
 };

x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx

@@ -149,7 +149,7 @@ describe('DataTable', () => {
         wrapper
           .find('[data-test-subj="dataGridRowCell"]')
           .at(0)
-          .find('.euiDataGridRowCell__truncate')
+          .find('.euiDataGridRowCell__content')
           .childAt(0)
           .text()
       ).toEqual(mockTimelineData[0].ecs.timestamp);

x-pack/packages/security-solution/data_table/components/data_table/index.tsx

@@ -118,11 +118,11 @@ const EuiDataGridContainer = styled.div<{ hideLastPage: boolean }>`
       ${({ hideLastPage }) => `${hideLastPage ? 'display:none' : ''}`};
     }
   }
-  div .euiDataGridRowCell__contentByHeight {
-    height: auto;
-    align-self: center;
+  div .euiDataGridRowCell__contentWrapper {
+    display: flex;
+    align-items: center;
   }
-  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
+  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
     flex-grow: 0;
     width: 100%;
   }

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts

@@ -46,14 +46,15 @@ export const useStyles = () => {
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
     }
-    & .euiDataGridRowCell__expandActions > [data-test-subj='euiDataGridCellExpandButton'] {
+    & .euiDataGridRowCell__actions > [data-test-subj='euiDataGridCellExpandButton'] {
       display: none;
     }
-    & .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+    & .euiDataGridRowCell__actions--overlay {
       padding: 0;
     }
 
-    & .euiDataGridRowCell__expandFlex {
+    & .euiDataGridRowCell__contentWrapper {
+      display: flex;
       align-items: center;
     }
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {

x-pack/plugins/osquery/cypress/tasks/integrations.ts

@@ -13,6 +13,7 @@ import {
   CONFIRM_MODAL_BTN_SEL,
   CREATE_PACKAGE_POLICY_SAVE_BTN,
   DATA_COLLECTION_SETUP_STEP,
+  DATE_PICKER_ABSOLUTE_TAB,
   DATE_PICKER_ABSOLUTE_TAB_SEL,
   TOAST_CLOSE_BTN,
   TOAST_CLOSE_BTN_SEL,
@@ -98,7 +99,7 @@ export function closeModalIfVisible() {
 export function closeDateTabIfVisible() {
   cy.get('body').then(($body) => {
     if ($body.find(DATE_PICKER_ABSOLUTE_TAB_SEL).length) {
-      cy.getBySel(DATE_PICKER_ABSOLUTE_TAB_SEL).clickOutside();
+      cy.getBySel(DATE_PICKER_ABSOLUTE_TAB).clickOutside();
     }
   });
 }

x-pack/plugins/security/server/prompt_page.tsx

@@ -6,7 +6,7 @@
  */
 
 import 'css.escape'; // Polyfill required to render `EuiPageTemplate` server-side
-import { EuiPageTemplate, EuiProvider } from '@elastic/eui';
+import { EuiPageTemplate, EuiProvider, euiStylisPrefixer } from '@elastic/eui';
 // @ts-expect-error no definitions in component folder
 import { icon as EuiIconWarning } from '@elastic/eui/lib/components/icon/assets/warning';
 // @ts-expect-error no definitions in component folder
@@ -32,7 +32,7 @@ appendIconComponentCache({
   warning: EuiIconWarning,
 });
 
-const emotionCache = createCache({ key: 'eui' });
+const emotionCache = createCache({ key: 'eui', stylisPlugins: [euiStylisPrefixer] });
 
 interface Props {
   buildNumber: number;

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -71,11 +71,11 @@ const EuiDataGridContainer = styled.div<GridContainerProps>`
       }};
     }
   }
-  div .euiDataGridRowCell__contentByHeight {
-    height: auto;
-    align-self: center;
+  div .euiDataGridRowCell__contentWrapper {
+    display: flex;
+    align-items: center;
   }
-  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
+  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
     flex-grow: 0;
     width: 100%;
   }

x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_event_log_list_table.test.tsx

@@ -93,25 +93,22 @@ describe('actions_connectors_event_log_list_table', () => {
     expect(wrapper.find('[data-test-subj="connectorEventLogListProgressBar"]')).toEqual({});
     expect(
       wrapper
-        .find('[data-gridcell-column-id="timestamp"] .euiDataGridRowCell__truncate')
+        .find('[data-gridcell-column-id="timestamp"] .euiDataGridRowCell__content')
         .first()
         .text()
     ).toBeTruthy();
     expect(
-      wrapper
-        .find('[data-gridcell-column-id="status"] .euiDataGridRowCell__truncate')
-        .first()
-        .text()
+      wrapper.find('[data-gridcell-column-id="status"] .euiDataGridRowCell__content').first().text()
     ).toEqual('succeeded');
     expect(
       wrapper
-        .find('[data-gridcell-column-id="connector_name"] .euiDataGridRowCell__truncate')
+        .find('[data-gridcell-column-id="connector_name"] .euiDataGridRowCell__content')
         .first()
         .text()
     ).toEqual('test connector');
     expect(
       wrapper
-        .find('[data-gridcell-column-id="message"] .euiDataGridRowCell__truncate')
+        .find('[data-gridcell-column-id="message"] .euiDataGridRowCell__content')
         .first()
         .text()
     ).toEqual('action executed: .server-log:86020b10-9b3b-11ed-8422-2f5a388a317d: test');

x-pack/test/examples/triggers_actions_ui_examples/alerts_table.ts

@@ -169,18 +169,18 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         const $ = await euiDataGridRow.parseDomContent();
         rows.push({
           status: $.findTestSubjects('dataGridRowCell')
-            .find('[data-gridcell-column-id="event.action"] .euiDataGridRowCell__truncate')
+            .find('[data-gridcell-column-id="event.action"] .euiDataGridRowCell__content')
             .text(),
           lastUpdated: $.findTestSubjects('dataGridRowCell')
-            .find('[data-gridcell-column-id="@timestamp"] .euiDataGridRowCell__truncate')
+            .find('[data-gridcell-column-id="@timestamp"] .euiDataGridRowCell__content')
             .text(),
           duration: $.findTestSubjects('dataGridRowCell')
             .find(
-              '[data-gridcell-column-id="kibana.alert.duration.us"] .euiDataGridRowCell__truncate'
+              '[data-gridcell-column-id="kibana.alert.duration.us"] [data-datagrid-cellcontent]'
             )
             .text(),
           reason: $.findTestSubjects('dataGridRowCell')
-            .find('[data-gridcell-column-id="kibana.alert.reason"] .euiDataGridRowCell__truncate')
+            .find('[data-gridcell-column-id="kibana.alert.reason"] [data-datagrid-cellcontent]')
             .text(),
         });
       }

yarn.lock

@@ -1625,10 +1625,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@89.0.0":
-  version "89.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-89.0.0.tgz#673c1aeecd875ea2ad51dffade4ffea2d3cea4c0"
-  integrity sha512-wE3GaGjPVGHNeuCsJ3lXwDlbTeXPQvz69I00EWkHyoJoKDXk/2i7sRGIXYlTNWZ9ppwloBCPyPAKW71jiN8JBQ==
+"@elastic/eui@89.1.0":
+  version "89.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-89.1.0.tgz#25aa9a59515102221286780ab559c3cff91a3753"
+  integrity sha512-vvSfP+kMUeQlfmxnRZhdX7r3rxpmjc3PkWC0KrMTf+NlXEao1imvlMHJNIJ58z5YjUBSMN5jtXkNkjHGI86KDw==
   dependencies:
     "@hello-pangea/dnd" "^16.3.0"
     "@types/lodash" "^4.14.198"
@@ -27141,7 +27141,7 @@ semver@5.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
   integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
 
-semver@7.5.4:
+semver@7.5.4, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.0, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -27153,13 +27153,6 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.0, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"