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](https://github.com/elastic/eui/pull/7012))

**Deprecations**

- Deprecated `euiPaletteComplimentary`; Use `euiPaletteComplementary`
instead. ([#6992](https://github.com/elastic/eui/pull/6992))

**Breaking changes**

- Replaced the underlying drag-and-drop library from
`react-beautiful-dnd` to its fork `@hello-pangea/dnd`
([#7012](https://github.com/elastic/eui/pull/7012))
([#7012](https://github.com/elastic/eui/pull/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 <tomasz.kajtoch@elastic.co>
Co-authored-by: Tomasz Kajtoch <tomek@kajto.ch>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Drew Tate <andrew.tate@elastic.co>

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'],