Upgrade EUI to v26.3.1

package.json

@@ -127,7 +127,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.8.0",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "24.1.0",
+    "@elastic/eui": "26.3.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",

packages/kbn-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "19.8.1",
-    "@elastic/eui": "24.1.0",
+    "@elastic/eui": "26.3.1",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",

src/core/public/chrome/chrome_service.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Breadcrumb as EuiBreadcrumb, IconType } from '@elastic/eui';
+import { EuiBreadcrumb, IconType } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { BehaviorSubject, combineLatest, merge, Observable, of, ReplaySubject } from 'rxjs';

src/core/public/chrome/ui/header/_index.scss

@@ -1,3 +1,5 @@
+@include euiHeaderAffordForFixed;
+
 // TODO #64541
 // Delete this block
 .chrHeaderWrapper:not(.headerWrapper) {

src/core/public/public.api.md

@@ -6,7 +6,6 @@
 
 import { Action } from 'history';
 import Boom from 'boom';
-import { Breadcrumb } from '@elastic/eui';
 import { BulkIndexDocumentsParams } from 'elasticsearch';
 import { CatAliasesParams } from 'elasticsearch';
 import { CatAllocationParams } from 'elasticsearch';
@@ -37,6 +36,7 @@ import { DeleteDocumentByQueryParams } from 'elasticsearch';
 import { DeleteDocumentParams } from 'elasticsearch';
 import { DeleteScriptParams } from 'elasticsearch';
 import { DeleteTemplateParams } from 'elasticsearch';
+import { EuiBreadcrumb } from '@elastic/eui';
 import { EuiButtonEmptyProps } from '@elastic/eui';
 import { EuiConfirmModalProps } from '@elastic/eui';
 import { EuiGlobalToastListToast } from '@elastic/eui';
@@ -334,7 +334,7 @@ export interface ChromeBrand {
 }
 
 // @public (undocumented)
-export type ChromeBreadcrumb = Breadcrumb;
+export type ChromeBreadcrumb = EuiBreadcrumb;
 
 // @public
 export interface ChromeDocTitle {

src/core/public/rendering/_base.scss

@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/global_styling/variables/header';
 @import '@elastic/eui/src/components/nav_drawer/variables';
 
 /**

src/legacy/core_plugins/timelion/public/_app.scss

@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/global_styling/variables/header';
 
 .timApp {
   position: relative;

src/legacy/core_plugins/timelion/public/directives/timelion_expression_input.js

@@ -51,7 +51,7 @@ import {
   suggest,
   insertAtLocation,
 } from './timelion_expression_input_helpers';
-import { comboBoxKeyCodes } from '@elastic/eui';
+import { comboBoxKeys } from '@elastic/eui';
 import { npStart } from 'ui/new_platform';
 
 const Parser = PEG.generate(grammar);
@@ -178,9 +178,9 @@ export function TimelionExpInput($http, $timeout) {
         });
       }
 
-      function isNavigationalKey(keyCode) {
-        const keyCodes = _.values(comboBoxKeyCodes);
-        return keyCodes.includes(keyCode);
+      function isNavigationalKey(key) {
+        const keyCodes = _.values(comboBoxKeys);
+        return keyCodes.includes(key);
       }
 
       scope.onFocusInput = () => {
@@ -196,12 +196,12 @@ export function TimelionExpInput($http, $timeout) {
       scope.onKeyDownInput = (e) => {
         // If we've pressed any non-navigational keys, then the user has typed something and we
         // can exit early without doing any navigation. The keyup handler will pull up suggestions.
-        if (!isNavigationalKey(e.keyCode)) {
+        if (!isNavigationalKey(e.key)) {
           return;
         }
 
         switch (e.keyCode) {
-          case comboBoxKeyCodes.UP:
+          case comboBoxKeys.ARROW_UP:
             if (scope.suggestions.isVisible) {
               // Up and down keys navigate through suggestions.
               e.preventDefault();
@@ -210,7 +210,7 @@ export function TimelionExpInput($http, $timeout) {
             }
             break;
 
-          case comboBoxKeyCodes.DOWN:
+          case comboBoxKeys.ARROW_DOWN:
             if (scope.suggestions.isVisible) {
               // Up and down keys navigate through suggestions.
               e.preventDefault();
@@ -219,7 +219,7 @@ export function TimelionExpInput($http, $timeout) {
             }
             break;
 
-          case comboBoxKeyCodes.TAB:
+          case comboBoxKeys.TAB:
             // If there are no suggestions or none is selected, the user tabs to the next input.
             if (scope.suggestions.isEmpty() || scope.suggestions.index < 0) {
               // Before letting the tab be handled to focus the next element
@@ -234,7 +234,7 @@ export function TimelionExpInput($http, $timeout) {
             insertSuggestionIntoExpression(scope.suggestions.index);
             break;
 
-          case comboBoxKeyCodes.ENTER:
+          case comboBoxKeys.ENTER:
             if (e.metaKey || e.ctrlKey) {
               // Re-render the chart when the user hits CMD+ENTER.
               e.preventDefault();
@@ -246,7 +246,7 @@ export function TimelionExpInput($http, $timeout) {
             }
             break;
 
-          case comboBoxKeyCodes.ESCAPE:
+          case comboBoxKeys.ESCAPE:
             e.preventDefault();
             scope.suggestions.hide();
             break;
@@ -255,7 +255,7 @@ export function TimelionExpInput($http, $timeout) {
 
       scope.onKeyUpInput = (e) => {
         // If the user isn't navigating, then we should update the suggestions based on their input.
-        if (!isNavigationalKey(e.keyCode)) {
+        if (!isNavigationalKey(e.key)) {
           getSuggestions();
         }
       };

src/legacy/ui/public/accessibility/__tests__/kbn_accessible_click.js

@@ -22,7 +22,7 @@ import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import '../kbn_accessible_click';
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 describe('kbnAccessibleClick directive', () => {
   let $compile;
@@ -112,14 +112,14 @@ describe('kbnAccessibleClick directive', () => {
 
     it(`on ENTER keyup`, () => {
       const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
-      e.keyCode = keyCodes.ENTER;
+      e.key = keys.ENTER;
       element.trigger(e);
       sinon.assert.calledOnce(scope.handleClick);
     });
 
     it(`on SPACE keyup`, () => {
       const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
-      e.keyCode = keyCodes.SPACE;
+      e.key = keys.SPACE;
       element.trigger(e);
       sinon.assert.calledOnce(scope.handleClick);
     });

src/legacy/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js

@@ -22,7 +22,7 @@ import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import '../kbn_ui_ace_keyboard_mode';
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 describe('kbnUiAceKeyboardMode directive', () => {
   let element;
@@ -48,7 +48,7 @@ describe('kbnUiAceKeyboardMode directive', () => {
       const textarea = element.find('textarea');
       sinon.spy(textarea[0], 'focus');
       const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
-      ev.keyCode = keyCodes.ENTER;
+      ev.key = keys.ENTER;
       element.find('.kbnUiAceKeyboardHint').trigger(ev);
       expect(textarea[0].focus.called).to.be(true);
       expect(
@@ -61,7 +61,7 @@ describe('kbnUiAceKeyboardMode directive', () => {
       const hint = element.find('.kbnUiAceKeyboardHint');
       sinon.spy(hint[0], 'focus');
       const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
-      ev.keyCode = keyCodes.ESCAPE;
+      ev.key = keys.ESCAPE;
       textarea.trigger(ev);
       expect(hint[0].focus.called).to.be(true);
       expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false);
@@ -101,7 +101,7 @@ describe('kbnUiAceKeyboardModeService', () => {
       const textarea = element.find('textarea');
       sinon.spy(textarea[0], 'focus');
       const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
-      ev.keyCode = keyCodes.ENTER;
+      ev.key = keys.ENTER;
       element.find('.kbnUiAceKeyboardHint').trigger(ev);
       expect(textarea[0].focus.called).to.be(true);
       expect(
@@ -114,7 +114,7 @@ describe('kbnUiAceKeyboardModeService', () => {
       const hint = element.find('.kbnUiAceKeyboardHint');
       sinon.spy(hint[0], 'focus');
       const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
-      ev.keyCode = keyCodes.ESCAPE;
+      ev.key = keys.ESCAPE;
       textarea.trigger(ev);
       expect(hint[0].focus.called).to.be(true);
       expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false);

src/legacy/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js

@@ -33,7 +33,7 @@
 
 import angular from 'angular';
 import { uiModules } from '../modules';
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 let aceKeyboardModeId = 0;
 
@@ -72,7 +72,7 @@ uiModules
       }
 
       hint.keydown((ev) => {
-        if (ev.keyCode === keyCodes.ENTER) {
+        if (ev.key === keys.ENTER) {
           ev.preventDefault();
           startEditing();
         }
@@ -103,7 +103,7 @@ uiModules
       );
 
       uiAceTextbox.keydown((ev) => {
-        if (ev.keyCode === keyCodes.ESCAPE) {
+        if (ev.key === keys.ESCAPE) {
           // If the autocompletion context menu is open then we want to let ESC close it but
           // **not** exit out of editing mode.
           if (!isAutoCompleterOpen) {

src/legacy/ui/public/exit_full_screen/exit_full_screen_button.test.js

@@ -33,7 +33,7 @@ import chrome from 'ui/chrome';
 
 import { ExitFullScreenButton } from './exit_full_screen_button';
 
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 test('is rendered', () => {
   const component = renderWithIntl(<ExitFullScreenButton onExitFullScreenMode={() => {}} />);
@@ -57,7 +57,7 @@ describe('onExitFullScreenMode', () => {
 
     mountWithIntl(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
 
-    const escapeKeyEvent = new KeyboardEvent('keydown', { keyCode: keyCodes.ESCAPE });
+    const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE });
     document.dispatchEvent(escapeKeyEvent);
 
     sinon.assert.calledOnce(onExitHandler);

src/plugins/advanced_settings/public/management_app/components/form/_form.scss

@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/global_styling/variables/header';
 @import '@elastic/eui/src/components/nav_drawer/variables';
 
 // TODO #64541