Upgrade EUI to v86.0.0 (#163088)

`85.1.0` ➡️ `86.0.0`

⚠️ The biggest change in this PR is migrating the `react-beautiful-dnd`
dependency to it's open-source forked successor, `@hello-pangea/dnd`.
This new fork has better typescript support and additionally supports
both React 17 and React 18.

## [`86.0.0`](https://github.com/elastic/eui/tree/v86.0.0)

- Added React 18 support (StrictMode not yet supported).
([#7012](elastic/eui#7012))

**Deprecations**

- Deprecated `euiPaletteComplimentary`; Use `euiPaletteComplementary`
instead. ([#6992](elastic/eui#6992))

**Breaking changes**

- Replaced the underlying drag-and-drop library from
`react-beautiful-dnd` to its fork `@hello-pangea/dnd`
([#7012](elastic/eui#7012))
([#7012](elastic/eui#7012))
- No code updates are needed if using only `<EuiDragDropContext>`,
`<EuiDroppable>` and `<EuiDraggable>` with no direct imports from
`react-beautiful-dnd`. In case you were importing things from
`react-beautiful-dnd` and using them together with EUI components, you
need to switch to `@hello-pangea/dnd` which has cross-compatible API.

---------

Co-authored-by: Tomasz Kajtoch <[email protected]>
Co-authored-by: Tomasz Kajtoch <[email protected]>
Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Drew Tate <[email protected]>

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "85.1.0",
+    "@elastic/eui": "86.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -123,6 +123,7 @@
     "@hapi/hoek": "^9.2.1",
     "@hapi/inert": "^6.0.4",
     "@hapi/wreck": "^17.1.0",
+    "@hello-pangea/dnd": "^16.3.0",
     "@juggle/resize-observer": "^3.4.0",
     "@kbn/aad-fixtures-plugin": "link:x-pack/test/alerting_api_integration/common/plugins/aad",
     "@kbn/ace": "link:packages/kbn-ace",
@@ -825,6 +826,7 @@
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.31.0",
     "cronstrue": "^1.51.0",
+    "css-box-model": "^1.2.1",
     "cuid": "^2.1.8",
     "cytoscape": "^3.10.0",
     "cytoscape-dagre": "^2.2.2",
@@ -944,7 +946,6 @@
     "re2": "1.20.1",
     "react": "^17.0.2",
     "react-ace": "^7.0.5",
-    "react-beautiful-dnd": "^13.1.0",
     "react-color": "^2.13.8",
     "react-dom": "^17.0.2",
     "react-dropzone": "^4.2.9",
@@ -1330,7 +1331,6 @@
     "@types/prop-types": "^15.7.5",
     "@types/rbush": "^3.0.0",
     "@types/react": "^17.0.45",
-    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.17",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-intl": "^2.3.15",

packages/core/integrations/core-integrations-browser-internal/src/styles/disable_animations.css

@@ -1,5 +1,5 @@
 /**
- * `react-beautiful-dnd` relies on `transition` for functionality
+ * `@hello-pangea/dnd` relies on `transition` for functionality
  * https://github.com/elastic/kibana/issues/95133
  */
 *:not(.essentialAnimation):not([data-rbd-draggable-context-id]):not([data-rbd-droppable-context-id]),

packages/kbn-securitysolution-t-grid/src/utils/drag_and_drop/index.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { DropResult } from 'react-beautiful-dnd';
+import type { DropResult } from '@hello-pangea/dnd';
 
 export const draggableIdPrefix = 'draggableId';
 

packages/kbn-ui-shared-deps-npm/BUILD.bazel

@@ -24,6 +24,8 @@ SRCS = glob(
 
 # deps needed when importing this module from another location
 RUNTIME_DEPS = [
+  "@npm//babel-loader",
+  "@npm//@babel/plugin-proposal-optional-chaining",
   "@npm//loader-utils",
   "@npm//val-loader",
   "//packages/kbn-repo-info",
@@ -40,6 +42,7 @@ RUNTIME_DEPS = [
   "@npm//@elastic/numeral",
   "@npm//@emotion/cache",
   "@npm//@emotion/react",
+  "@npm//@hello-pangea/dnd",
   "@npm//@tanstack/react-query",
   "@npm//@tanstack/react-query-devtools",
   "@npm//classnames",
@@ -49,7 +52,6 @@ RUNTIME_DEPS = [
   "@npm//lodash",
   "@npm//moment-timezone",
   "@npm//react-ace",
-  "@npm//react-beautiful-dnd",
   "@npm//react-dom",
   "@npm//react-router-dom",
   "@npm//react-router-dom-v5-compat",

packages/kbn-ui-shared-deps-npm/webpack.config.js

@@ -83,6 +83,7 @@ module.exports = (_, argv) => {
         '@elastic/numeral',
         '@emotion/cache',
         '@emotion/react',
+        '@hello-pangea/dnd/dist/dnd.js',
         '@tanstack/react-query',
         '@tanstack/react-query-devtools',
         'classnames',
@@ -96,7 +97,6 @@ module.exports = (_, argv) => {
         'moment-timezone/data/packed/latest.json',
         'moment',
         'react-ace',
-        'react-beautiful-dnd',
         'react-dom',
         'react-dom/server',
         'react-router-dom',
@@ -138,6 +138,19 @@ module.exports = (_, argv) => {
             },
           ],
         },
+        // @hello-pangea/dnd emits optional chaining that confuses webpack.
+        // We need to transform it using babel before going further
+        {
+          test: /@hello-pangea\/dnd\/dist\/dnd\.js$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                plugins: [require.resolve('@babel/plugin-proposal-optional-chaining')],
+              },
+            },
+          ],
+        },
         {
           test: /\.css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],

packages/kbn-ui-shared-deps-src/src/definitions.js

@@ -72,7 +72,7 @@ const externals = {
   '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
 
   // transient dep of eui
-  'react-beautiful-dnd': '__kbnSharedDeps__.ReactBeautifulDnD',
+  '@hello-pangea/dnd': '__kbnSharedDeps__.HelloPangeaDnd',
   lodash: '__kbnSharedDeps__.Lodash',
   'lodash/fp': '__kbnSharedDeps__.LodashFp',
   fflate: '__kbnSharedDeps__.Fflate',

packages/kbn-ui-shared-deps-src/src/entry.js

@@ -46,7 +46,7 @@ export const ElasticEuiLibServices = require('@elastic/eui/optimize/es/services'
 export const ElasticEuiLibServicesFormat = require('@elastic/eui/optimize/es/services/format');
 export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');
 export const KbnDatemath = require('@kbn/datemath');
-export const ReactBeautifulDnD = require('react-beautiful-dnd');
+export const HelloPangeaDnd = require('@hello-pangea/dnd/dist/dnd');
 
 export const Lodash = require('lodash');
 export const LodashFp = require('lodash/fp');

packages/kbn-visualization-ui-components/components/drag_drop_bucket/types.ts

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { DraggableProvided } from 'react-beautiful-dnd';
+import type { DraggableProvided } from '@hello-pangea/dnd';
 
 export interface BucketContainerProps {
   children: React.ReactNode;

src/dev/license_checker/config.ts

@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@85.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@86.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };

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

@@ -17,7 +17,7 @@ import {
   euiPaletteWarm,
   euiPaletteForStatus,
   euiPaletteForTemperature,
-  euiPaletteComplimentary,
+  euiPaletteComplementary,
   euiPaletteColorBlindBehindText,
 } from '@elastic/eui';
 import type { ChartColorConfiguration, PaletteDefinition, SeriesLayer } from '@kbn/coloring';
@@ -277,7 +277,7 @@ export const buildPalettes: (
       title: i18n.translate('charts.palettes.complimentaryLabel', {
         defaultMessage: 'Complimentary',
       }),
-      ...buildGradient('complimentary', euiPaletteComplimentary),
+      ...buildGradient('complimentary', euiPaletteComplementary),
     },
     negative: {
       title: i18n.translate('charts.palettes.negativeLabel', { defaultMessage: 'Negative' }),

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

@@ -10,7 +10,7 @@ import { I18nProvider } from '@kbn/i18n-react';
 import { DeprecatedCellValueElementProps } from '@kbn/timelines-plugin/common';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import { DragDropContext, DropResult, ResponderProvided } from 'react-beautiful-dnd';
+import { DragDropContext, DropResult, ResponderProvided } from '@hello-pangea/dnd';
 // eslint-disable-next-line @kbn/eslint/module_migration
 import { ThemeProvider } from 'styled-components';
 import { Provider as ReduxStoreProvider } from 'react-redux';

x-pack/packages/security-solution/data_table/mock/test_providers.tsx

@@ -11,8 +11,8 @@ import { euiDarkVars } from '@kbn/ui-theme';
 import { I18nProvider } from '@kbn/i18n-react';
 
 import React from 'react';
-import type { DropResult, ResponderProvided } from 'react-beautiful-dnd';
-import { DragDropContext } from 'react-beautiful-dnd';
+import type { DropResult, ResponderProvided } from '@hello-pangea/dnd';
+import { DragDropContext } from '@hello-pangea/dnd';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import type { Store } from 'redux';
 import { ThemeProvider } from 'styled-components';

x-pack/plugins/apm/public/components/fleet_integration/apm_agents/runtime_attachment/discovery_rule.tsx

@@ -24,7 +24,7 @@ interface Props {
   operation: string;
   type: string;
   probe: string;
-  providedDragHandleProps?: DraggableProvidedDragHandleProps;
+  providedDragHandleProps?: DraggableProvidedDragHandleProps | null;
   onDelete: (discoveryItemId: string) => void;
   onEdit: (discoveryItemId: string) => void;
   operationTypes: Operation[];

x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawl_requests_table.test.tsx

@@ -85,15 +85,13 @@ describe('CrawlRequestsTable', () => {
       const table = wrapper.find(EuiBasicTable);
       const columns = table.prop('columns');
 
-      // @ts-expect-error 4.3.5 upgrade
       const crawlID = shallow(columns[0].render('618d0e66abe97bc688328900', { stage: 'crawl' }));
       expect(crawlID.text()).toContain('618d0e66abe97bc688328900');
 
       crawlID.simulate('click');
       expect(actions.fetchCrawlRequest).toHaveBeenCalledWith('618d0e66abe97bc688328900');
       expect(actions.openFlyout).toHaveBeenCalled();
 
-      // @ts-expect-error 4.3.5 upgrade
       const processCrawlID = shallow(columns[0].render('54325423aef7890543', { stage: 'process' }));
       expect(processCrawlID.text()).toContain('54325423aef7890543');
     });

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.test.tsx

@@ -8,7 +8,8 @@
 import { setMockValues } from '../../../../../__mocks__/kea_logic';
 
 import React from 'react';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+
+import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.tsx

@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+
+import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 
 import { useValues } from 'kea';
 
@@ -18,7 +19,7 @@ import { ResultAction } from '../../../result/types';
 
 interface Props {
   actions: ResultAction[];
-  dragHandleProps?: DraggableProvidedDragHandleProps;
+  dragHandleProps?: DraggableProvidedDragHandleProps | null;
   result: SearchResult;
   index?: number;
 }

x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/ignored_queries_panel/ignored_queries_panel.test.tsx

@@ -68,7 +68,6 @@ describe('IgnoredQueriesPanel', () => {
   });
 
   it('show a query', () => {
-    // @ts-expect-error 4.3.5 upgrade
     const column = getColumn(0).render('test query');
     expect(column).toEqual('test query');
   });

x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx

@@ -8,7 +8,8 @@
 import { mockKibanaValues } from '../../../__mocks__/kea_logic';
 
 import React from 'react';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+
+import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 
 import { shallow, ShallowWrapper } from 'enzyme';
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx

@@ -6,7 +6,8 @@
  */
 
 import React, { useState, useMemo } from 'react';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+
+import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 
 import './result.scss';
 
@@ -34,7 +35,7 @@ interface Props {
   shouldLinkToDetailPage?: boolean;
   schemaForTypeHighlights?: Schema | AdvancedSchema;
   actions?: ResultAction[];
-  dragHandleProps?: DraggableProvidedDragHandleProps;
+  dragHandleProps?: DraggableProvidedDragHandleProps | null;
   showClick?: boolean;
 }
 

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/client_libraries_popover/popover.test.tsx

@@ -10,7 +10,7 @@ import '../../../../../shared/doc_links/__mocks__/doc_links.mock';
 
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 
 import { EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 
@@ -85,11 +85,11 @@ describe('ClientLibrariesPopover', () => {
       wrapper
         .find(EuiContextMenuPanel)
         .prop('items')
-        ?.map((item) => shallow(<div>{item}</div>)) || [];
+        ?.map((item: HTMLElement) => shallow(<div>{item}</div>)) || [];
 
     expect(contextMenuItems.length > 0).toBeTruthy();
 
-    contextMenuItems.forEach((item, index) => {
+    contextMenuItems.forEach((item: ShallowWrapper, index: number) => {
       const menuItem = item.find(EuiContextMenuItem);
       expect(menuItem.prop('href')).toEqual(librariesList[index].href);
     });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawl_requests_panel/crawl_requests_table.test.tsx

@@ -83,14 +83,12 @@ describe('CrawlRequestsTable', () => {
       const table = wrapper.find(EuiBasicTable);
       const columns = table.prop('columns');
 
-      // @ts-expect-error 4.3.5 upgrade
       const crawlID = shallow(columns[0].render('618d0e66abe97bc688328900', { stage: 'crawl' }));
       expect(crawlID.text()).toContain('618d0e66abe97bc688328900');
 
       crawlID.simulate('click');
       expect(actions.fetchCrawlRequest).toHaveBeenCalledWith('618d0e66abe97bc688328900');
 
-      // @ts-expect-error 4.3.5 upgrade
       const processCrawlID = shallow(columns[0].render('54325423aef7890543', { stage: 'process' }));
       expect(processCrawlID.text()).toContain('54325423aef7890543');
     });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/multi_field_selector.test.tsx

@@ -11,7 +11,13 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiBasicTable, EuiButton, EuiComboBox, EuiFieldText } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiButton,
+  EuiComboBox,
+  EuiFieldText,
+} from '@elastic/eui';
 
 import { MultiFieldMapping, SelectedFieldMappings } from './multi_field_selector';
 
@@ -180,7 +186,7 @@ describe('SelectedFieldMappings', () => {
 
     expect(wrapper.find(EuiBasicTable)).toHaveLength(1);
     const table = wrapper.find(EuiBasicTable);
-    expect(table.prop('columns').map((c) => c.name)).toEqual([
+    expect(table.prop('columns').map((c: EuiBasicTableColumn<{}>) => c.name)).toEqual([
       'Source text field',
       '',
       'Target field',