Upgrade EUI to v92.1.1 (#174955)

`v92.0.0-backport.0`⏩ `v92.1.1`

---

## [`v92.1.1`](https://github.com/elastic/eui/releases/v92.1.1)

**Bug fixes**

- Minor `EuiDataGrid` cell performance fixes
([#7465](elastic/eui#7465))

## [`v92.1.0`](https://github.com/elastic/eui/releases/v92.1.0)

- Updated `EuiResizableButton` to allow customizing the `indicator`
style with either `handle` (default) or `border`
([#7455](elastic/eui#7455))
- Enhanced `EuiResizableContainer` to preserve the drag/resize event
when the user's mouse leaves the parent container and re-enters
([#7456](elastic/eui#7456))

**Bug fixes**

- Fixed an `EuiTreeView` JSX Typescript error
([#7452](elastic/eui#7452))
- Fixed a color console warning being generated by disabled `EuiStep`s
([#7454](elastic/eui#7454))

**Accessibility**

- `EuiDataGrid`'s keyboard/screenreader experience has been tweaked to
be more consistent for varying complex data:
([#7448](elastic/eui#7448))
- Headers are now always navigable by arrow key, regardless of whether
the header cells contain interactive content
- Non-expandable cells containing any amount of interactive content now
must be entered via Enter or F2 keypress
  - Expandable cells continue to be toggled via Enter or F2 keypress
- `EuiDataGrid` now provides a direct screen reader hint for Enter key
behavior for expandable & interactive cells
([#7448](elastic/eui#7448))

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.1",
-    "@elastic/eui": "92.0.0-backport.0",
+    "@elastic/eui": "92.1.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx

@@ -523,6 +523,14 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: '{columnId}, column {col}, row {row}',
         values: { columnId, row, col },
       }),
+    'euiDataGridCell.expansionEnterPrompt': i18n.translate(
+      'core.euiDataGridCell.expansionEnterPrompt',
+      { defaultMessage: 'Press the Enter key to expand this cell.' }
+    ),
+    'euiDataGridCell.focusTrapEnterPrompt': i18n.translate(
+      'core.euiDataGridCell.focusTrapEnterPrompt',
+      { defaultMessage: "Press the Enter key to interact with this cell's contents." }
+    ),
     'euiDataGridCellActions.expandButtonTitle': i18n.translate(
       'core.euiDataGridCellActions.expandButtonTitle',
       {

packages/kbn-resizable-layout/src/panels_resizable.tsx

@@ -6,12 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { EuiResizableContainer, useGeneratedHtmlId, useResizeObserver } from '@elastic/eui';
+import {
+  EuiResizableContainer,
+  useGeneratedHtmlId,
+  useResizeObserver,
+  useEuiTheme,
+  mathWithUnits,
+} from '@elastic/eui';
 import type { ResizeTrigger } from '@elastic/eui/src/components/resizable_container/types';
 import { css } from '@emotion/react';
 import { isEqual, round } from 'lodash';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
+import useLatest from 'react-use/lib/useLatest';
 import { ResizableLayoutDirection } from '../types';
 import { getContainerSize, percentToPixels, pixelsToPercent } from './utils';
 
@@ -47,41 +54,30 @@ export const PanelsResizable = ({
   onFixedPanelSizeChange?: (fixedPanelSize: number) => void;
   setPanelSizes: (panelSizes: { fixedPanelSizePct: number; flexPanelSizePct: number }) => void;
 }) => {
+  const { euiTheme } = useEuiTheme();
   const fixedPanelId = useGeneratedHtmlId({ prefix: 'fixedPanel' });
   const { height: containerHeight, width: containerWidth } = useResizeObserver(container);
   const containerSize = getContainerSize(direction, containerWidth, containerHeight);
 
-  // EuiResizableContainer doesn't work properly when used with react-reverse-portal and
-  // will cancel the resize. To work around this we keep track of when resizes start and
-  // end to toggle the rendering of a transparent overlay which prevents the cancellation.
-  // EUI issue: https://github.com/elastic/eui/issues/6199
-  const [resizeWithPortalsHackIsResizing, setResizeWithPortalsHackIsResizing] = useState(false);
-  const enableResizeWithPortalsHack = useCallback(
-    () => setResizeWithPortalsHackIsResizing(true),
-    []
-  );
-  const disableResizeWithPortalsHack = useCallback(
-    () => setResizeWithPortalsHackIsResizing(false),
-    []
-  );
-  const baseButtonCss = css`
-    background-color: transparent !important;
-    gap: 0 !important;
-
-    &:not(:hover):not(:focus) {
-      &:before,
-      &:after {
-        width: 0;
-      }
-    }
+  // The resize overlay makes it so that other mouse events (e.g. tooltip hovers, etc)
+  // don't occur when mouse dragging
+  const [isResizing, setIsResizing] = useState(false);
+
+  // Align the resizable button border to overlap exactly over existing panel/layout borders
+  const buttonBorderCss = css`
+    position: relative;
+    inset-${direction === 'horizontal' ? 'inline-start' : 'block-end'}: -${mathWithUnits(
+    euiTheme.border.width.thin,
+    (x) => x / 2
+  )};
   `;
   const defaultButtonCss = css`
     z-index: 3;
   `;
-  const resizeWithPortalsHackButtonCss = css`
+  const resizingButtonCss = css`
     z-index: 4;
   `;
-  const resizeWithPortalsHackOverlayCss = css`
+  const resizingOverlayCss = css`
     position: absolute;
     top: 0;
     left: 0;
@@ -158,34 +154,35 @@ export const PanelsResizable = ({
     setPanelSizes,
   ]);
 
-  const onResizeStart = useCallback(
-    (trigger: ResizeTrigger) => {
-      if (trigger !== 'pointer') {
-        return;
-      }
-
-      enableResizeWithPortalsHack();
-    },
-    [enableResizeWithPortalsHack]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    if (!resizeWithPortalsHackIsResizing) {
+  const onResizeStart = useCallback((trigger: ResizeTrigger) => {
+    if (trigger !== 'pointer') {
       return;
     }
+    setIsResizing(true);
+  }, []);
+
+  // EUI will call an outdated version of this callback when the resize ends,
+  // so we need to make sure on our end that the latest version is called.
+  const onResizeEndStable = useLatest(() => {
+    setIsResizing((_isResizing) => {
+      // We don't want the resize button to retain focus after the resize is complete,
+      // but EuiResizableContainer will force focus it onClick. To work around this we
+      // use setTimeout to wait until after onClick has been called before blurring.
+      if (_isResizing) {
+        if (document.activeElement instanceof HTMLElement) {
+          const button = document.activeElement;
+          setTimeout(() => {
+            button.blur();
+          });
+        }
+      }
+      return false;
+    });
+  });
 
-    // We don't want the resize button to retain focus after the resize is complete,
-    // but EuiResizableContainer will force focus it onClick. To work around this we
-    // use setTimeout to wait until after onClick has been called before blurring.
-    if (document.activeElement instanceof HTMLElement) {
-      const button = document.activeElement;
-      setTimeout(() => {
-        button.blur();
-      });
-    }
-
-    disableResizeWithPortalsHack();
-  }, [disableResizeWithPortalsHack, resizeWithPortalsHackIsResizing]);
+  const onResizeEnd = useCallback(() => {
+    onResizeEndStable.current();
+  }, [onResizeEndStable]);
 
   // Don't render EuiResizableContainer until we have have valid
   // panel sizes or it can cause the resize functionality to break.
@@ -218,10 +215,8 @@ export const PanelsResizable = ({
           </EuiResizablePanel>
           <EuiResizableButton
             className={resizeButtonClassName}
-            css={[
-              baseButtonCss,
-              resizeWithPortalsHackIsResizing ? resizeWithPortalsHackButtonCss : defaultButtonCss,
-            ]}
+            indicator="border"
+            css={[buttonBorderCss, isResizing ? resizingButtonCss : defaultButtonCss]}
             data-test-subj={`${dataTestSubj}ResizableButton`}
           />
           <EuiResizablePanel
@@ -232,7 +227,7 @@ export const PanelsResizable = ({
           >
             {flexPanel}
           </EuiResizablePanel>
-          {resizeWithPortalsHackIsResizing ? <div css={resizeWithPortalsHackOverlayCss} /> : <></>}
+          {isResizing ? <div css={resizingOverlayCss} /> : <></>}
         </>
       )}
     </EuiResizableContainer>

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.1': ['Elastic License 2.0'],
-  '@elastic/eui@92.0.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@92.1.1': ['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/vis_default_editor/public/_default.scss

@@ -32,6 +32,10 @@
  * Resizer
  */
 
+.visEditor__resizer {
+  height: auto;
+}
+
 .visEditor__resizer-isHidden {
   display: none;
 }

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -109,6 +109,7 @@ function DefaultEditor({
               </EuiResizablePanel>
 
               <EuiResizableButton
+                alignIndicator="start"
                 className={`visEditor__resizer ${isCollapsed ? 'visEditor__resizer-isHidden' : ''}`}
               />
 

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx

@@ -207,7 +207,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 
@@ -248,7 +248,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 
@@ -324,7 +324,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 
@@ -365,7 +365,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 

x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts

@@ -58,10 +58,9 @@ describe('ALL - Live Query', { tags: ['@ess', '@serverless'] }, () => {
       expect(interception.response?.body.data.queries[0]).to.have.property('timeout', 890);
     });
     checkResults();
-    cy.get('[data-gridcell-column-index="0"][data-gridcell-row-index="0"]').should('exist');
-    cy.get(
-      '[data-gridcell-column-index="0"][data-gridcell-row-index="0"] [data-datagrid-interactable="true"]'
-    ).click();
+    const firstCell = '[data-gridcell-column-index="0"][data-gridcell-row-index="0"]';
+    cy.get(firstCell).should('exist');
+    cy.get(firstCell).find('[data-euigrid-tab-managed="true"]').click();
     cy.url().should('include', 'app/fleet/agents/');
   });
 

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

@@ -52,15 +52,17 @@ export const getSavedQueriesComplexTest = () =>
 
         // hidden columns
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns35');
-        cy.getBySel('dataGridHeaderCell-osquery.cmdline').click();
-        cy.contains(/Hide column$/).click();
-        cy.getBySel('dataGridHeaderCell-osquery.cwd').click();
-
-        cy.contains(/Hide column$/).click();
-        cy.getBySel('dataGridHeaderCell-osquery.disk_bytes_written.number').click();
-
-        cy.contains(/Hide column$/).click();
+        cy.getBySel('dataGridColumnSelectorButton').click();
+        cy.get('[data-popover-open="true"]').should('be.visible');
+        cy.getBySel('dataGridColumnSelectorToggleColumnVisibility-osquery.cmdline').click();
+        cy.getBySel('dataGridColumnSelectorToggleColumnVisibility-osquery.cwd').click();
+        cy.getBySel(
+          'dataGridColumnSelectorToggleColumnVisibility-osquery.disk_bytes_written.number'
+        ).click();
+        cy.getBySel('dataGridColumnSelectorButton').click();
+        cy.get('[data-popover-open="true"]').should('not.exist');
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35');
+
         // change pagination
         cy.getBySel('pagination-button-next').click().wait(500).click();
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35');
@@ -72,8 +74,7 @@ export const getSavedQueriesComplexTest = () =>
         cy.getBySel(RESULTS_TABLE_BUTTON).click();
 
         // sorting
-        cy.getBySel('dataGridHeaderCell-osquery.egid').click();
-
+        cy.getBySel('dataGridHeaderCellActionButton-osquery.egid').click({ force: true });
         cy.contains(/Sort A-Z$/).click();
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35');
         cy.getBySel(RESULTS_TABLE_BUTTON).trigger('mouseover');

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

@@ -143,8 +143,9 @@ export const expandFirstAlertActions = () => {
 };
 
 export const expandFirstAlert = () => {
-  cy.get(EXPAND_ALERT_BTN).should('be.visible');
-  cy.get(EXPAND_ALERT_BTN).first().click();
+  cy.get(EXPAND_ALERT_BTN).first().should('be.visible');
+  // Cypress is flaky on clicking this button despite production not having that issue
+  cy.get(EXPAND_ALERT_BTN).first().trigger('click');
 };
 
 export const hideMessageTooltip = () => {

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

@@ -21,7 +21,9 @@ import { scrollAlertTableColumnIntoView } from '../alerts';
  * Find the first alert row in the alerts table then click on the host name to open the flyout
  */
 export const expandFirstAlertHostFlyout = () => {
-  cy.get(OPEN_HOST_FLYOUT_BUTTON).first().click();
+  // Cypress is flaky on clicking this button despite production not having that issue
+  // eslint-disable-next-line cypress/no-force
+  cy.get(OPEN_HOST_FLYOUT_BUTTON).first().click({ force: true });
 };
 
 /**

yarn.lock

@@ -1740,10 +1740,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@92.0.0-backport.0":
-  version "92.0.0-backport.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-92.0.0-backport.0.tgz#201757bef89141dad6f8f719976fa2a0b52be86a"
-  integrity sha512-ZliSke0YehCbCuHvYkY0BIMg32QeqTMZy+qgGYsh+Bp0UZ4CZn9j5e7LWavfal3+t8HMFCHTk0RUFFXrcepplA==
+"@elastic/eui@92.1.1":
+  version "92.1.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-92.1.1.tgz#f5713bfa12733a2c62df365e37f7983a7c08411e"
+  integrity sha512-kjUP+IewVcoJ59e84lHwtdy5OvGNSmlHvzn5uUmGTKnBGOxoYv5K9pyGujVWpxSCG9MNr3anMsNE7EX6usj37A==
   dependencies:
     "@hello-pangea/dnd" "^16.3.0"
     "@types/lodash" "^4.14.198"