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>

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch@8.9.0",
     "@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;

packages/shared-ux/markdown/impl/__snapshots__/markdown.test.tsx.snap

@@ -209,7 +209,7 @@ exports[`shared ux markdown component renders for editor 1`] = `
         id="generated-id"
         placeholder=""
         rows="6"
-        style="height:100%;max-height:"
+        style="height:100%"
       />
       <div
         class="euiMarkdownEditorFooter"

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.4.0': ['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'],
   '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
 };

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 type { DropResult, ResponderProvided } from '@hello-pangea/dnd';
-import { DragDropContext } from 'react-beautiful-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,7 +85,6 @@ 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');
 
@@ -93,7 +92,6 @@ describe('CrawlRequestsTable', () => {
       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',

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.test.tsx

@@ -5,40 +5,17 @@
  * 2.0.
  */
 
-import '../../../../../__mocks__/shallow_useeffect.mock';
 import { setMockValues, setMockActions } from '../../../../../__mocks__/kea_logic';
 import { exampleResult } from '../../../../__mocks__/content_sources.mock';
 
-/**
- * Mocking necessary due to console warnings from react d-n-d, which EUI uses
- * https://stackoverflow.com/a/56674119/1949235
- */
-jest.mock('react-beautiful-dnd', () => ({
-  Droppable: ({ children }: { children: any }) =>
-    children(
-      {
-        draggableProps: {
-          style: {},
-        },
-        innerRef: jest.fn(),
-      },
-      {}
-    ),
-  Draggable: ({ children }: { children: any }) =>
-    children(
-      {
-        draggableProps: {
-          style: {},
-        },
-        innerRef: jest.fn(),
-      },
-      {}
-    ),
-  DragDropContext: ({ children }: { children: any }) => children,
-}));
-
 import React from 'react';
 
+import type {
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DroppableProvided,
+  DroppableStateSnapshot,
+} from '@hello-pangea/dnd';
 import { shallow, mount } from 'enzyme';
 
 import { EuiTextColor } from '@elastic/eui';
@@ -46,6 +23,62 @@ import { EuiTextColor } from '@elastic/eui';
 import { ExampleResultDetailCard } from './example_result_detail_card';
 import { ResultDetail } from './result_detail';
 
+import '../../../../../__mocks__/shallow_useeffect.mock';
+
+/**
+ * Mocking necessary due to console warnings from @hello-pangea/dnd, which EUI uses
+ * https://stackoverflow.com/a/56674119/1949235
+ */
+jest.mock('@hello-pangea/dnd', () => ({
+  Droppable: ({
+    children,
+  }: {
+    children: (a: DroppableProvided, b: DroppableStateSnapshot) => void;
+  }) =>
+    children(
+      {
+        droppableProps: {
+          'data-rfd-droppable-context-id': '123',
+          'data-rfd-droppable-id': '123',
+        },
+        innerRef: jest.fn(),
+        placeholder: null,
+      },
+      {
+        isDraggingOver: false,
+        draggingOverWith: null,
+        draggingFromThisWith: null,
+        isUsingPlaceholder: false,
+      }
+    ),
+  Draggable: ({
+    children,
+  }: {
+    children: (a: DraggableProvided, b: DraggableStateSnapshot) => void;
+  }) =>
+    children(
+      {
+        draggableProps: {
+          'data-rfd-draggable-context-id': '123',
+          'data-rfd-draggable-id': '123',
+        },
+        innerRef: jest.fn(),
+        dragHandleProps: null,
+      },
+      {
+        isDragging: false,
+        isDropAnimating: false,
+        isClone: false,
+        dropAnimation: null,
+        draggingOver: null,
+        combineWith: null,
+        combineTargetFor: null,
+        mode: null,
+      }
+    ),
+  DragDropContext: ({ children }: { children: React.ReactNode }) => children,
+}));
+
 describe('ResultDetail', () => {
   const { searchResultConfig, exampleDocuments } = exampleResult;
   const availableFieldOptions = [

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx

@@ -216,13 +216,14 @@ describe('when on the package policy create page', () => {
       beforeEach(async () => {
         await act(async () => {
           render();
+
           cancelLink = renderResult.getByTestId(
             'createPackagePolicy_cancelBackLink'
           ) as HTMLAnchorElement;
 
-          cancelButton = renderResult.getByTestId(
+          cancelButton = (await renderResult.findByTestId(
             'createPackagePolicyCancelButton'
-          ) as HTMLAnchorElement;
+          )) as HTMLAnchorElement;
         });
       });
 

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx

@@ -103,12 +103,12 @@ describe('<TemplateCreate />', () => {
     httpRequestsMockHelpers.setLoadNodesPluginsResponse([]);
 
     // disable all react-beautiful-dnd development warnings
-    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = true;
   });
 
   afterAll(() => {
     jest.useRealTimers();
-    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = false;
   });
 
   describe('composable index template', () => {

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx

@@ -14,6 +14,7 @@ import {
   EuiLink,
   EuiIcon,
   EuiToolTip,
+  DraggableProvidedDragHandleProps,
 } from '@elastic/eui';
 
 import { ComponentTemplateListItem } from '../../../../../common';
@@ -31,7 +32,7 @@ export interface Props {
   isSelected?: boolean | ((component: ComponentTemplateListItem) => boolean);
   onViewDetail: (component: ComponentTemplateListItem) => void;
   actions?: Action[];
-  dragHandleProps?: { [key: string]: any };
+  dragHandleProps?: DraggableProvidedDragHandleProps | null;
 }
 
 export const ComponentTemplatesListItem = ({

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '@elastic/eui';
 
 import { ComponentTemplateListItem } from '../../../../../common';
@@ -14,11 +14,6 @@ import {
   Props as ComponentTemplatesListItemProps,
 } from './component_templates_list_item';
 
-interface DraggableLocation {
-  droppableId: string;
-  index: number;
-}
-
 interface Props {
   components: ComponentTemplateListItem[];
   onReorder: (components: ComponentTemplateListItem[]) => void;
@@ -26,12 +21,9 @@ interface Props {
 }
 
 export const ComponentTemplatesSelection = ({ components, onReorder, listItemProps }: Props) => {
-  const onDragEnd = ({
+  const onDragEnd: ComponentProps<typeof EuiDragDropContext>['onDragEnd'] = ({
     source,
     destination,
-  }: {
-    source?: DraggableLocation;
-    destination?: DraggableLocation;
   }) => {
     if (source && destination) {
       const items = euiDragDropReorder(components, source.index, destination.index);

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts

@@ -19,13 +19,13 @@ describe('Processor: Grok', () => {
   beforeAll(() => {
     jest.useFakeTimers({ legacyFakeTimers: true });
     // disable all react-beautiful-dnd development warnings
-    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = true;
   });
 
   afterAll(() => {
     jest.useRealTimers();
     // enable all react-beautiful-dnd development warnings
-    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
+    (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = false;
   });
 
   beforeEach(async () => {

x-pack/plugins/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx

@@ -15,6 +15,7 @@ import {
   EuiListGroup,
   EuiRange,
   EuiSelect,
+  EuiComboBoxProps,
 } from '@elastic/eui';
 import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
 import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
@@ -87,6 +88,13 @@ jest.mock('@kbn/unified-field-list/src/hooks/use_existing_fields', () => ({
   }),
 }));
 
+const getFieldSelectComboBox = (wrapper: ReactWrapper) =>
+  wrapper
+    .find(EuiComboBox)
+    .filter('[data-test-subj="indexPattern-dimension-field"]') as ReactWrapper<
+    EuiComboBoxProps<string | number | string[] | undefined>
+  >;
+
 const fields = [
   {
     name: 'timestamp',
@@ -159,7 +167,7 @@ const bytesColumn: GenericIndexPatternColumn = {
 
 const services = coreMock.createStart() as unknown as LensAppServices;
 
-function mountWithServices(component: React.ReactElement) {
+function mountWithServices(component: React.ReactElement): ReactWrapper {
   return mount(component, {
     // This is an elegant way to wrap a component in Enzyme
     // preserving the root at the component level rather than
@@ -295,9 +303,7 @@ describe('FormBasedDimensionEditor', () => {
   it('should show field select', () => {
     wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
 
-    expect(
+    expect(getFieldSelectComboBox(wrapper)).toHaveLength(1);
-      wrapper.find(EuiComboBox).filter('[data-test-subj="indexPattern-dimension-field"]')
-    ).toHaveLength(1);
   });
 
   it('should not show field select on fieldless operation', () => {
@@ -318,9 +324,7 @@ describe('FormBasedDimensionEditor', () => {
       />
     );
 
-    expect(
+    expect(getFieldSelectComboBox(wrapper)).toHaveLength(0);
-      wrapper.find(EuiComboBox).filter('[data-test-subj="indexPattern-dimension-field"]')
-    ).toHaveLength(0);
   });
 
   it('should not show any choices if the filter returns false', () => {
@@ -332,21 +336,13 @@ describe('FormBasedDimensionEditor', () => {
       />
     );
 
-    expect(
+    expect(getFieldSelectComboBox(wrapper).prop('options')!).toHaveLength(0);
-      wrapper
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')!
-        .prop('options')!
-    ).toHaveLength(0);
   });
 
   it('should list all field names and document as a whole in prioritized order', () => {
     wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
 
-    const options = wrapper
+    const options = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
 
     expect(options).toHaveLength(3);
 
@@ -375,11 +371,7 @@ describe('FormBasedDimensionEditor', () => {
 
     wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
 
-    const options = wrapper
+    const options = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
-
     expect(options![1].options!.map(({ label }) => label)).toEqual(['timestampLabel', 'source']);
   });
 
@@ -391,10 +383,7 @@ describe('FormBasedDimensionEditor', () => {
       />
     );
 
-    const options = wrapper
+    const options = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
 
     expect(options![0]['data-test-subj']).toEqual('lns-fieldOptionIncompatible-___records___');
 
@@ -554,9 +543,7 @@ describe('FormBasedDimensionEditor', () => {
       <FormBasedDimensionEditorComponent {...defaultProps} state={initialState} />
     );
 
-    const comboBox = wrapper
+    const comboBox = getFieldSelectComboBox(wrapper);
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')!;
     const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'memory')!;
 
     await act(async () => {
@@ -589,9 +576,7 @@ describe('FormBasedDimensionEditor', () => {
   it('should switch operations when selecting a field that requires another operation', async () => {
     wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
 
-    const comboBox = wrapper
+    const comboBox = getFieldSelectComboBox(wrapper);
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')!;
     const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
 
     await act(async () => {
@@ -874,8 +859,6 @@ describe('FormBasedDimensionEditor', () => {
     });
 
     it('should leave error state when switching from incomplete state to fieldless operation', async () => {
-      // @ts-expect-error
-      window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593
       wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
 
       await act(async () => {
@@ -931,10 +914,7 @@ describe('FormBasedDimensionEditor', () => {
           .simulate('click');
       });
 
-      const options = wrapper
+      const options = getFieldSelectComboBox(wrapper).prop('options');
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')
-        .prop('options');
 
       expect(options![0]['data-test-subj']).toContain('Incompatible');
 
@@ -977,9 +957,7 @@ describe('FormBasedDimensionEditor', () => {
         },
       });
 
-      const comboBox = wrapper
+      const comboBox = getFieldSelectComboBox(wrapper);
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]');
       const options = comboBox.prop('options');
 
       // options[1][2] is a `source` field of type `string` which doesn't support `average` operation
@@ -1085,10 +1063,7 @@ describe('FormBasedDimensionEditor', () => {
       await act(async () => {
         await terms.simulate('click');
       });
-      const options = wrapper
+      const options = getFieldSelectComboBox(wrapper).prop('options');
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')
-        .prop('options');
       expect(options![0]['data-test-subj']).toContain('Incompatible');
       expect(
         options![1].options!.filter(({ label }) => label === 'timestampLabel')[0]['data-test-subj']
@@ -1105,9 +1080,7 @@ describe('FormBasedDimensionEditor', () => {
           .find('button[data-test-subj="lns-indexPatternDimension-terms incompatible"]')
           .simulate('click');
       });
-      const comboBox = wrapper
+      const comboBox = getFieldSelectComboBox(wrapper);
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')!;
       const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!;
       await act(async () => {
         await comboBox.prop('onChange')!([option]);
@@ -1884,9 +1857,7 @@ describe('FormBasedDimensionEditor', () => {
       },
     });
 
-    const comboBox = wrapper
+    const comboBox = getFieldSelectComboBox(wrapper);
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]');
     const options = comboBox.prop('options');
 
     await act(async () => {
@@ -1997,10 +1968,7 @@ describe('FormBasedDimensionEditor', () => {
       wrapper.find('button[data-test-subj="lns-indexPatternDimension-average"]').simulate('click');
     });
 
-    const options = wrapper
+    const options = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
 
     expect(options![0]['data-test-subj']).toContain('Incompatible');
 
@@ -2032,10 +2000,7 @@ describe('FormBasedDimensionEditor', () => {
       />
     );
 
-    const options = wrapper
+    const options = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
 
     expect(options![0]['data-test-subj']).not.toContain('Incompatible');
   });
@@ -2043,9 +2008,7 @@ describe('FormBasedDimensionEditor', () => {
   it('should not update when selecting the current field again', async () => {
     wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
 
-    const comboBox = wrapper
+    const comboBox = getFieldSelectComboBox(wrapper);
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]');
 
     const option = comboBox
       .prop('options')![1]
@@ -2096,9 +2059,7 @@ describe('FormBasedDimensionEditor', () => {
       <FormBasedDimensionEditorComponent {...defaultProps} columnId={'col2'} />
     );
 
-    const comboBox = wrapper
+    const comboBox = getFieldSelectComboBox(wrapper);
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')!;
     const option = comboBox.prop('options')![1].options![0];
 
     await act(async () => {
@@ -2158,12 +2119,8 @@ describe('FormBasedDimensionEditor', () => {
 
   it('should keep the latest valid dimension when removing the selection in field combobox', () => {
     wrapper = mountWithServices(<FormBasedDimensionEditorComponent {...defaultProps} />);
-
     act(() => {
-      wrapper
+      getFieldSelectComboBox(wrapper as ReactWrapper).prop('onChange')!([]);
-        .find(EuiComboBox)
-        .filter('[data-test-subj="indexPattern-dimension-field"]')
-        .prop('onChange')!([]);
     });
 
     expect(setState).not.toHaveBeenCalled();

x-pack/plugins/lens/public/datasources/form_based/dimension_panel/reference_editor.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { EuiComboBox } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps } from '@elastic/eui';
 import { mountWithIntl as mount } from '@kbn/test-jest-helpers';
 import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
@@ -40,6 +40,13 @@ jest.mock('@kbn/unified-field-list/src/hooks/use_existing_fields', () => ({
 
 jest.mock('../operations');
 
+const getFieldSelectComboBox = (wrapper: ReactWrapper) =>
+  wrapper
+    .find(EuiComboBox)
+    .filter('[data-test-subj="indexPattern-dimension-field"]') as ReactWrapper<
+    EuiComboBoxProps<string | number | string[] | undefined>
+  >;
+
 describe('reference editor', () => {
   let wrapper: ReactWrapper | ShallowWrapper;
   let paramEditorUpdater: jest.Mock<ReferenceEditorProps['paramEditorUpdater']>;
@@ -124,10 +131,7 @@ describe('reference editor', () => {
       expect.objectContaining({ 'data-test-subj': expect.stringContaining('Incompatible') })
     );
 
-    const fields = wrapper
+    const fields = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
 
     expect(fields![0].options).not.toContainEqual(
       expect.objectContaining({ 'data-test-subj': expect.stringContaining('Incompatible') })
@@ -163,10 +167,7 @@ describe('reference editor', () => {
       />
     );
 
-    const fields = wrapper
+    const fields = getFieldSelectComboBox(wrapper).prop('options');
-      .find(EuiComboBox)
-      .filter('[data-test-subj="indexPattern-dimension-field"]')
-      .prop('options');
 
     const findFieldDataTestSubj = (l: string) => {
       return fields![0].options!.find(({ label }) => label === l)!['data-test-subj'];
@@ -207,9 +208,9 @@ describe('reference editor', () => {
       .filter('[data-test-subj="indexPattern-reference-function"]')
       .prop('options');
 
-    expect(functions.find(({ label }) => label === 'Average')!['data-test-subj']).toContain(
+    expect(
-      'incompatible'
+      functions.find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!['data-test-subj']
-    );
+    ).toContain('incompatible');
   });
 
   it('should not update when selecting the same operation', () => {
@@ -241,7 +242,9 @@ describe('reference editor', () => {
     const comboBox = wrapper
       .find(EuiComboBox)
       .filter('[data-test-subj="indexPattern-reference-function"]');
-    const option = comboBox.prop('options')!.find(({ label }) => label === 'Average')!;
+    const option = comboBox
+      .prop('options')!
+      .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!;
 
     act(() => {
       comboBox.prop('onChange')!([option]);
@@ -280,7 +283,9 @@ describe('reference editor', () => {
     const comboBox = wrapper
       .find(EuiComboBox)
       .filter('[data-test-subj="indexPattern-reference-function"]');
-    const option = comboBox.prop('options')!.find(({ label }) => label === 'Maximum')!;
+    const option = comboBox
+      .prop('options')!
+      .find(({ label }: EuiComboBoxOptionOption) => label === 'Maximum')!;
 
     act(() => {
       comboBox.prop('onChange')!([option]);
@@ -325,7 +330,9 @@ describe('reference editor', () => {
     const comboBox = wrapper
       .find(EuiComboBox)
       .filter('[data-test-subj="indexPattern-reference-function"]');
-    const option = comboBox.prop('options')!.find(({ label }) => label === 'Average')!;
+    const option = comboBox
+      .prop('options')!
+      .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!;
 
     act(() => {
       comboBox.prop('onChange')!([option]);

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/filters/filters.test.tsx

@@ -292,7 +292,7 @@ describe('filters', () => {
 
   describe('popover param editor', () => {
     // @ts-expect-error
-    window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593
+    window['__@hello-pangea/dnd-disable-dev-warnings'] = true; // issue with enzyme & @hello-pangea/dnd throwing errors: https://github.com/hello-pangea/dnd/issues/644
     jest.mock('@kbn/unified-search-plugin/public', () => ({
       QueryStringInput: () => {
         return 'QueryStringInput';

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/ranges/ranges.test.tsx

@@ -497,7 +497,7 @@ describe('ranges', () => {
 
     describe('Specify range intervals manually', () => {
       // @ts-expect-error
-      window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593
+      window['__@hello-pangea/dnd-disable-dev-warnings'] = true; // issue with enzyme & @hello-pangea/dnd throwing errors: https://github.com/hello-pangea/dnd/issues/644
 
       beforeEach(() => setToRangeMode());
 

x-pack/plugins/lens/public/datasources/form_based/operations/definitions/terms/terms.test.tsx

@@ -8,7 +8,14 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { shallow, mount } from 'enzyme';
-import { EuiButtonGroup, EuiComboBox, EuiFieldNumber, EuiSelect, EuiSwitch } from '@elastic/eui';
+import {
+  EuiButtonGroup,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFieldNumber,
+  EuiSelect,
+  EuiSwitch,
+} from '@elastic/eui';
 import type { IUiSettingsClient, HttpSetup } from '@kbn/core/public';
 import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
 import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
@@ -1225,7 +1232,7 @@ describe('terms', () => {
 
   describe('field input', () => {
     // @ts-expect-error
-    window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593
+    window['__@hello-pangea/dnd-disable-dev-warnings'] = true; // issue with enzyme & @hello-pangea/dnd throwing errors: https://github.com/hello-pangea/dnd/issues/644
 
     const defaultFieldInputProps = {
       indexPattern: defaultProps.indexPattern,
@@ -2477,7 +2484,9 @@ describe('terms', () => {
       const functionComboBox = refEditor
         .find(EuiComboBox)
         .filter('[data-test-subj="indexPattern-reference-function"]');
-      const option = functionComboBox.prop('options')!.find(({ label }) => label === 'Average')!;
+      const option = functionComboBox
+        .prop('options')!
+        .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!;
 
       act(() => {
         functionComboBox.prop('onChange')!([option]);
@@ -2546,7 +2555,7 @@ describe('terms', () => {
 
       const option = fieldComboBox
         .prop('options')[0]
-        .options!.find(({ label }) => label === 'memory')!;
+        .options!.find(({ label }: EuiComboBoxOptionOption) => label === 'memory')!;
       act(() => {
         fieldComboBox.prop('onChange')!([option]);
       });
@@ -2627,7 +2636,9 @@ describe('terms', () => {
       const functionComboBox = comboBoxes.filter(
         '[data-test-subj="indexPattern-reference-function"]'
       );
-      const option = functionComboBox.prop('options')!.find(({ label }) => label === 'Average')!;
+      const option = functionComboBox
+        .prop('options')!
+        .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!;
       act(() => {
         functionComboBox.prop('onChange')!([option]);
       });

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

@@ -18,6 +18,7 @@ import type {
   DatatableColumn,
   DatatableColumnMeta,
 } from '@kbn/expressions-plugin/common';
+import { EuiDataGridColumnCellAction } from '@elastic/eui/src/components/datagrid/data_grid_types';
 import type { FormatFactory } from '../../../../common/types';
 import type { ColumnConfig } from '../../../../common/expressions';
 import { LensCellValueAction } from '../../../types';
@@ -79,7 +80,7 @@ export const createGridColumns = (
 
     const columnArgs = columnConfig.columns.find(({ columnId }) => columnId === field);
 
-    const cellActions = [];
+    const cellActions: EuiDataGridColumnCellAction[] = [];
     if (filterable && handleFilterClick && !columnArgs?.oneClickFilter) {
       cellActions.push(
         ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
@@ -104,20 +105,22 @@ export const createGridColumns = (
             }
           );
 
+          if (!contentsIsDefined) {
+            return null;
+          }
+
           return (
-            contentsIsDefined && (
+            <Component
-              <Component
+              aria-label={filterForAriaLabel}
-                aria-label={filterForAriaLabel}
+              data-test-subj="lensDatatableFilterFor"
-                data-test-subj="lensDatatableFilterFor"
+              onClick={() => {
-                onClick={() => {
+                handleFilterClick(field, rowValue, colIndex, rowIndex);
-                  handleFilterClick(field, rowValue, colIndex, rowIndex);
+                closeCellPopover?.();
-                  closeCellPopover?.();
+              }}
-                }}
+              iconType="plusInCircle"
-                iconType="plusInCircle"
+            >
-              >
+              {filterForText}
-                {filterForText}
+            </Component>
-              </Component>
-            )
           );
         },
         ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
@@ -142,20 +145,22 @@ export const createGridColumns = (
             }
           );
 
+          if (!contentsIsDefined) {
+            return null;
+          }
+
           return (
-            contentsIsDefined && (
+            <Component
-              <Component
+              data-test-subj="lensDatatableFilterOut"
-                data-test-subj="lensDatatableFilterOut"
+              aria-label={filterOutAriaLabel}
-                aria-label={filterOutAriaLabel}
+              onClick={() => {
-                onClick={() => {
+                handleFilterClick(field, rowValue, colIndex, rowIndex, true);
-                  handleFilterClick(field, rowValue, colIndex, rowIndex, true);
+                closeCellPopover?.();
-                  closeCellPopover?.();
+              }}
-                }}
+              iconType="minusInCircle"
-                iconType="minusInCircle"
+            >
-              >
+              {filterOutText}
-                {filterOutText}
+            </Component>
-              </Component>
-            )
           );
         }
       );
@@ -171,20 +176,23 @@ export const createGridColumns = (
           value: rowValue,
           columnMeta,
         };
+
+        if (rowValue == null) {
+          return null;
+        }
+
         return (
-          rowValue != null && (
+          <Component
-            <Component
+            aria-label={action.displayName}
-              aria-label={action.displayName}
+            data-test-subj={`lensDatatableCellAction-${action.id}`}
-              data-test-subj={`lensDatatableCellAction-${action.id}`}
+            onClick={() => {
-              onClick={() => {
+              action.execute([data]);
-                action.execute([data]);
+              closeCellPopover?.();
-                closeCellPopover?.();
+            }}
-              }}
+            iconType={action.iconType}
-              iconType={action.iconType}
+          >
-            >
+            {action.displayName}
-              {action.displayName}
+          </Component>
-            </Component>
-          )
         );
       });
     });

x-pack/plugins/maps/public/components/tooltip_selector/tooltip_selector.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Component, Fragment } from 'react';
+import React, { Component, ComponentProps, Fragment } from 'react';
 import classNames from 'classnames';
 import {
   EuiButtonIcon,
@@ -144,12 +144,9 @@ export class TooltipSelector extends Component<Props, State> {
     }
   };
 
-  _onDragEnd = ({
+  _onDragEnd: ComponentProps<typeof EuiDragDropContext>['onDragEnd'] = ({
     source,
     destination,
-  }: {
-    source: { index: number };
-    destination?: { index: number };
   }) => {
     // Dragging item out of EuiDroppable results in destination of null
     if (!destination) {

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx

@@ -6,8 +6,8 @@
  */
 
 import _ from 'lodash';
-import React, { Component } from 'react';
+import React, { Component, ComponentProps } from 'react';
-import { DropResult, EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui';
+import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui';
 import { TOCEntry } from './toc_entry';
 import { isLayerGroup } from '../../../../classes/layers/layer_group';
 import { ILayer } from '../../../../classes/layers/layer';
@@ -72,13 +72,17 @@ export class LayerTOC extends Component<Props> {
     return [...this._getForebearers(parentLayer), parentId];
   }
 
-  _onDragStart = ({ source }: DropResult) => {
+  _onDragStart: ComponentProps<typeof EuiDragDropContext>['onDragStart'] = ({ source }) => {
     const sourceIndex = this._reverseIndex(source.index);
     const sourceLayer = this.props.layerList[sourceIndex];
     this.setState({ ...CLEAR_DND_STATE, sourceLayer });
   };
 
-  _onDragUpdate = ({ combine, destination, source }: DropResult) => {
+  _onDragUpdate: ComponentProps<typeof EuiDragDropContext>['onDragUpdate'] = ({
+    combine,
+    destination,
+    source,
+  }) => {
     const sourceIndex = this._reverseIndex(source.index);
     const sourceLayer = this.props.layerList[sourceIndex];
 
@@ -128,7 +132,7 @@ export class LayerTOC extends Component<Props> {
     });
   };
 
-  _onDragEnd = () => {
+  _onDragEnd: ComponentProps<typeof EuiDragDropContext>['onDragEnd'] = () => {
     const { combineLayer, isOwnAncestor, sourceLayer, newRightSiblingLayer } = this.state;
     this.setState({ ...CLEAR_DND_STATE });
 

x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx

@@ -7,7 +7,7 @@
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -46,7 +46,7 @@ export interface ReduxDispatchProps {
 export interface OwnProps {
   depth: number;
   layer: ILayer;
-  dragHandleProps?: DraggableProvidedDragHandleProps;
+  dragHandleProps?: DraggableProvidedDragHandleProps | null;
   isDragging?: boolean;
   isDraggingOver?: boolean;
   isCombineLayer?: boolean;

x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  euiPaletteComplimentary,
+  euiPaletteComplementary,
   euiPaletteForTemperature,
   euiPaletteGray,
   euiPalettePositive,
@@ -27,7 +27,7 @@ export function getMemoryItemColor(typeIn: MemoryItem) {
     case 'estimated-available-memory':
       return euiPaletteGray(5)[0];
     case 'jvm-heap-size':
-      return euiPaletteComplimentary(5)[4];
+      return euiPaletteComplementary(5)[4];
     default:
       return euiPaletteGray(5)[4];
   }

x-pack/plugins/observability_shared/public/components/page_template/page_template.tsx

@@ -29,13 +29,7 @@ import { NavNameWithBetaBadge } from './nav_name_with_beta_badge';
 
 export type WrappedPageTemplateProps = Pick<
   KibanaPageTemplateProps,
-  | 'children'
+  'children' | 'data-test-subj' | 'pageHeader' | 'restrictWidth' | 'isEmptyState' | 'noDataConfig'
-  | 'data-test-subj'
-  | 'paddingSize'
-  | 'pageHeader'
-  | 'restrictWidth'
-  | 'isEmptyState'
-  | 'noDataConfig'
 > & {
   showSolutionNav?: boolean;
   isPageDataLoaded?: boolean;

x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context.tsx

@@ -7,7 +7,7 @@
 
 // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/40309
 
-import type { MovementMode, DraggableId } from 'react-beautiful-dnd';
+import type { MovementMode, DraggableId } from '@hello-pangea/dnd';
 
 export interface BeforeCapture {
   draggableId: DraggableId;

x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx

@@ -7,8 +7,8 @@
 
 import { noop, pick } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
-import type { DropResult } from 'react-beautiful-dnd';
+import type { DropResult } from '@hello-pangea/dnd';
-import { DragDropContext } from 'react-beautiful-dnd';
+import { DragDropContext } from '@hello-pangea/dnd';
 import { useDispatch } from 'react-redux';
 import type { Dispatch } from 'redux';
 import deepEqual from 'fast-deep-equal';
@@ -44,7 +44,7 @@ import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 import { defaultAlertsHeaders } from '../events_viewer/default_alert_headers';
 
 // @ts-expect-error
-window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+window['__@hello-pangea/dnd-disable-dev-warnings'] = true;
 
 interface Props {
   browserFields: BrowserFields;

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/helpers.ts

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import type { FluidDragActions, Position } from 'react-beautiful-dnd';
+import type { Position } from 'css-box-model';
+import type { FluidDragActions } from '@hello-pangea/dnd';
 import { KEYBOARD_DRAG_OFFSET } from '@kbn/securitysolution-t-grid';
 
 import { stopPropagationAndPreventDefault } from '@kbn/timelines-plugin/public';

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/index.tsx

@@ -7,7 +7,7 @@
 
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
-import type { FluidDragActions } from 'react-beautiful-dnd';
+import type { FluidDragActions } from '@hello-pangea/dnd';
 import { useKibana } from '../../../lib/kibana';
 import { draggableKeyDownHandler } from './helpers';
 

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -8,7 +8,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import React from 'react';
-import type { DraggableStateSnapshot, DraggingStyle } from 'react-beautiful-dnd';
+import type { DraggableStateSnapshot, DraggingStyle } from '@hello-pangea/dnd';
 
 import '../../mock/match_media';
 import { mockBrowserFields } from '../../containers/source/mock';
@@ -265,6 +265,12 @@ describe('ConditionalPortal', () => {
       const snapshot: DraggableStateSnapshot = {
         isDragging: true,
         isDropAnimating: false, // <-- NOT drop animating
+        isClone: false,
+        dropAnimation: null,
+        draggingOver: null,
+        combineWith: null,
+        combineTargetFor: null,
+        mode: null,
       };
 
       expect(getStyle(style, snapshot)).not.toHaveProperty('transitionDuration');
@@ -274,6 +280,12 @@ describe('ConditionalPortal', () => {
       const snapshot: DraggableStateSnapshot = {
         isDragging: true,
         isDropAnimating: true, // <-- it is drop animating
+        isClone: false,
+        dropAnimation: null,
+        draggingOver: null,
+        combineWith: null,
+        combineTargetFor: null,
+        mode: null,
       };
 
       expect(getStyle(style, snapshot)).toHaveProperty('transitionDuration', '0.00000001s');

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx

@@ -13,8 +13,8 @@ import type {
   DraggableStateSnapshot,
   DraggingStyle,
   NotDraggingStyle,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Draggable, Droppable } from '@hello-pangea/dnd';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
@@ -39,7 +39,7 @@ export const DragEffects = styled.div``;
 DragEffects.displayName = 'DragEffects';
 
 /**
- * Wraps the `react-beautiful-dnd` error boundary. See also:
+ * Wraps the `@hello-pangea/dnd` error boundary. See also:
  * https://github.com/atlassian/react-beautiful-dnd/blob/v12.0.0/docs/guides/setup-problem-detection-and-error-recovery.md
  *
  * NOTE: This extends from `PureComponent` because, at the time of this
@@ -355,13 +355,31 @@ const DraggableWrapperComponent: React.FC<Props> = ({
       >
         {truncate ? (
           <TruncatableText data-test-subj="render-truncatable-content">
-            {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
+            {render(dataProvider, null, {
+              isDragging: false,
+              isDropAnimating: false,
+              isClone: false,
+              dropAnimation: null,
+              draggingOver: null,
+              combineWith: null,
+              combineTargetFor: null,
+              mode: null,
+            })}
           </TruncatableText>
         ) : (
           <ProviderContentWrapper
             data-test-subj={`render-content-${dataProvider.queryMatch.field}`}
           >
-            {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
+            {render(dataProvider, null, {
+              isDragging: false,
+              isDropAnimating: false,
+              isClone: false,
+              dropAnimation: null,
+              draggingOver: null,
+              combineWith: null,
+              combineTargetFor: null,
+              mode: null,
+            })}
           </ProviderContentWrapper>
         )}
       </div>

x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx

@@ -7,8 +7,8 @@
 
 import { rgba } from 'polished';
 import React, { useCallback } from 'react';
-import type { DraggableChildrenFn } from 'react-beautiful-dnd';
+import type { DraggableChildrenFn } from '@hello-pangea/dnd';
-import { Droppable } from 'react-beautiful-dnd';
+import { Droppable } from '@hello-pangea/dnd';
 import styled from 'styled-components';
 
 interface Props {

x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.test.ts

@@ -6,7 +6,7 @@
  */
 
 import { omit } from 'lodash/fp';
-import type { DropResult } from 'react-beautiful-dnd';
+import type { DropResult } from '@hello-pangea/dnd';
 
 import type { IdToDataProvider } from '../../store/drag_and_drop/model';
 
@@ -86,6 +86,7 @@ describe('helpers', () => {
           source: { index: 0, droppableId: getDroppableId('2119990039033485') },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -99,6 +100,7 @@ describe('helpers', () => {
           source: { index: 0, droppableId: `${droppableIdPrefix}.somethingElse.2119990039033485` },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -197,6 +199,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -216,6 +219,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -237,6 +241,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -244,7 +249,7 @@ describe('helpers', () => {
     test('it returns false when the destination is undefined', () => {
       expect(
         destinationIsTimelineProviders({
-          destination: undefined,
+          destination: null,
           draggableId: getDraggableId('685260508808089'),
           reason: 'DROP',
           source: {
@@ -253,6 +258,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -272,6 +278,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -293,6 +300,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -300,7 +308,7 @@ describe('helpers', () => {
     test('it returns returns false when the destination is undefined', () => {
       expect(
         destinationIsTimelineColumns({
-          destination: undefined,
+          destination: null,
           draggableId: getDraggableFieldId({ contextId: 'test', fieldId: 'event.action' }),
           reason: 'DROP',
           source: {
@@ -309,6 +317,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -328,6 +337,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -349,6 +359,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -356,7 +367,7 @@ describe('helpers', () => {
     test('it returns false when the destination is undefined', () => {
       expect(
         destinationIsTimelineButton({
-          destination: undefined,
+          destination: null,
           draggableId: getDraggableId('685260508808089'),
           reason: 'DROP',
           source: {
@@ -365,6 +376,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -384,6 +396,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -404,6 +417,7 @@ describe('helpers', () => {
         },
         type: 'DEFAULT',
         mode: 'FLUID',
+        combine: null,
       });
       const expected = '2119990039033485';
 
@@ -426,6 +440,7 @@ describe('helpers', () => {
         },
         type: 'DEFAULT',
         mode: 'FLUID',
+        combine: null,
       });
       const expected = 'event.action';
 
@@ -449,6 +464,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -468,6 +484,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -475,7 +492,7 @@ describe('helpers', () => {
     test('it returns false when the draggable is NOT content', () => {
       expect(
         providerWasDroppedOnTimeline({
-          destination: undefined,
+          destination: null,
           draggableId: `${draggableIdPrefix}.timeline.timeline.dataProvider.685260508808089`,
           reason: 'DROP',
           source: {
@@ -484,6 +501,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -497,6 +515,7 @@ describe('helpers', () => {
           source: { index: 0, droppableId: `${droppableIdPrefix}.somethingElse.2119990039033485` },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -516,6 +535,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -537,6 +557,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(true);
     });
@@ -556,6 +577,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -575,6 +597,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -594,6 +617,7 @@ describe('helpers', () => {
           },
           type: 'DEFAULT',
           mode: 'FLUID',
+          combine: null,
         })
       ).toEqual(false);
     });
@@ -777,6 +801,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(true);
@@ -791,6 +816,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.1' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(true);
@@ -798,12 +824,14 @@ describe('helpers', () => {
 
     test('it returns false when destination is undefined', () => {
       const result: DropResult = {
+        destination: null,
         draggableId:
           'draggableId.timelineProviders.timeline-1.group.0.port-default-draggable-netflow-renderer-timeline-1-Ib4zD3IBbNV0npT21btr-Ib4zD3IBbNV0npT21btr-source_port-57828',
         mode: 'FLUID',
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.1' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false);
@@ -818,6 +846,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-2.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false);
@@ -832,6 +861,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false);
@@ -846,6 +876,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.otherProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false);
@@ -862,6 +893,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(userIsReArrangingProviders(result)).toBe(true);
@@ -876,6 +908,7 @@ describe('helpers', () => {
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(userIsReArrangingProviders(result)).toBe(false);
@@ -890,6 +923,7 @@ describe('helpers', () => {
         reason: 'CANCEL',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(userIsReArrangingProviders(result)).toBe(false);
@@ -904,6 +938,7 @@ describe('helpers', () => {
         reason: 'CANCEL',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(userIsReArrangingProviders(result)).toBe(false);
@@ -911,12 +946,14 @@ describe('helpers', () => {
 
     test('it returns false when reason IS DROP, but destination is undefined', () => {
       const result: DropResult = {
+        destination: null,
         draggableId:
           'draggableId.timelineProviders.timeline-1.group.0.port-default-draggable-netflow-renderer-timeline-1-Ib4zD3IBbNV0npT21btr-Ib4zD3IBbNV0npT21btr-source_port-57828',
         mode: 'FLUID',
         reason: 'DROP',
         source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.1' },
         type: 'DEFAULT',
+        combine: null,
       };
 
       expect(userIsReArrangingProviders(result)).toBe(false);
@@ -931,6 +968,7 @@ describe('helpers', () => {
       reason: 'DROP',
       source: { index: 0, droppableId: 'droppableId.content.hosts-table-hostName-ENDPOINT-W-0-01' },
       type: 'DEFAULT',
+      combine: null,
     };
 
     test('it dispatches the expected UPDATE_PROVIDERS action when the provider to add exists in the `dataProviders` collection of `id -> `DataProvider`', () => {

x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { isString, keyBy } from 'lodash/fp';
-import type { DropResult } from 'react-beautiful-dnd';
+import type { DropResult } from '@hello-pangea/dnd';
 import type { Dispatch } from 'redux';
 import type { ActionCreator } from 'typescript-fsa';
 

x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx

@@ -7,7 +7,7 @@
 
 import { EuiFocusTrap, EuiScreenReaderOnly } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { DraggableId } from 'react-beautiful-dnd';
+import type { DraggableId } from '@hello-pangea/dnd';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 

x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx

@@ -7,7 +7,7 @@
 
 import { EuiContextMenuItem } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
-import type { DraggableId } from 'react-beautiful-dnd';
+import type { DraggableId } from '@hello-pangea/dnd';
 
 import { isEmpty } from 'lodash';
 

x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useMemo, useState, useRef, useContext } from 'react';
-import type { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
+import type { DraggableProvided, DraggableStateSnapshot } from '@hello-pangea/dnd';
 import { TimelineContext } from '../../../timelines/components/timeline';
 import { HoverActions } from '.';
 
@@ -102,7 +102,16 @@ export const useHoverActions = ({
         <ProviderContentWrapper
           data-test-subj={`draggable-link-content-${dataProvider.queryMatch.field}`}
         >
-          {render(dataProvider, null, { isDragging: false, isDropAnimating: false })}
+          {render(dataProvider, null, {
+            isDragging: false,
+            isDropAnimating: false,
+            isClone: false,
+            dropAnimation: null,
+            draggingOver: null,
+            combineWith: null,
+            combineTargetFor: null,
+            mode: null,
+          })}
         </ProviderContentWrapper>
       ) : null;
 

x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.test.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import type { EuiDataGridColumn } from '@elastic/eui';
+import type { EuiDataGridColumn, EuiDataGridColumnCellAction } from '@elastic/eui';
 import type { ColumnHeaderType, DataTableCellAction } from '../../../../common/types';
 import { TableId } from '@kbn/securitysolution-data-table';
 import type {
@@ -43,7 +43,7 @@ describe('default cell actions', () => {
           header: columnHeaders.find((h) => h.id === header.id),
           pageSize,
           scopeId: tableId,
-        });
+        }) as EuiDataGridColumnCellAction;
 
       return {
         ...header,
@@ -76,7 +76,7 @@ describe('default cell actions', () => {
             header: [columnHeaders].find((h) => h.id === header.id),
             pageSize,
             scopeId: tableId,
-          });
+          }) as EuiDataGridColumnCellAction;
 
         return {
           ...header,

x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts

@@ -10,10 +10,10 @@ import type {
   DraggableStateSnapshot,
   DroppableProvided,
   DroppableStateSnapshot,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import type React from 'react';
 
-jest.mock('react-beautiful-dnd', () => ({
+jest.mock('@hello-pangea/dnd', () => ({
   Droppable: ({
     children,
   }: {
@@ -22,13 +22,16 @@ jest.mock('react-beautiful-dnd', () => ({
     children(
       {
         droppableProps: {
-          'data-rbd-droppable-context-id': '123',
+          'data-rfd-droppable-context-id': '123',
-          'data-rbd-droppable-id': '123',
+          'data-rfd-droppable-id': '123',
         },
         innerRef: jest.fn(),
+        placeholder: null,
       },
       {
         isDraggingOver: false,
+        draggingOverWith: null,
+        draggingFromThisWith: null,
         isUsingPlaceholder: false,
       }
     ),
@@ -40,14 +43,21 @@ jest.mock('react-beautiful-dnd', () => ({
     children(
       {
         draggableProps: {
-          'data-rbd-draggable-context-id': '123',
+          'data-rfd-draggable-context-id': '123',
-          'data-rbd-draggable-id': '123',
+          'data-rfd-draggable-id': '123',
         },
         innerRef: jest.fn(),
+        dragHandleProps: null,
       },
       {
         isDragging: false,
         isDropAnimating: false,
+        isClone: false,
+        dropAnimation: null,
+        draggingOver: null,
+        combineWith: null,
+        combineTargetFor: null,
+        mode: null,
       }
     ),
   DragDropContext: ({ children }: { children: React.ReactNode }) => children,

x-pack/plugins/security_solution/public/common/mock/test_providers.tsx

@@ -9,8 +9,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 type { DropResult, ResponderProvided } from '@hello-pangea/dnd';
-import { DragDropContext } from 'react-beautiful-dnd';
+import { DragDropContext } from '@hello-pangea/dnd';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import type { Store } from 'redux';
 import { BehaviorSubject } from 'rxjs';

x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap

@@ -229,8 +229,8 @@ tr:hover .c3:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
+                          data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -239,12 +239,12 @@ tr:hover .c3:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c3"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
+                              data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -307,8 +307,8 @@ tr:hover .c3:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
+                          data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -317,12 +317,12 @@ tr:hover .c3:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c3"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
+                              data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -394,8 +394,8 @@ tr:hover .c3:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
+                          data-rfd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -404,12 +404,12 @@ tr:hover .c3:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c3"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
+                              data-rfd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -466,8 +466,8 @@ tr:hover .c3:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
+                          data-rfd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -476,12 +476,12 @@ tr:hover .c3:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c3"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
+                              data-rfd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -534,8 +534,8 @@ tr:hover .c3:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
+                          data-rfd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -544,12 +544,12 @@ tr:hover .c3:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c3"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
+                              data-rfd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -616,8 +616,8 @@ tr:hover .c3:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
+                              data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -626,12 +626,12 @@ tr:hover .c3:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c3"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
+                                  data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -694,8 +694,8 @@ tr:hover .c3:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
+                              data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -704,12 +704,12 @@ tr:hover .c3:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c3"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
+                                  data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -767,8 +767,8 @@ tr:hover .c3:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.network-default-draggable-test-abcd-network_bytes-100"
+                              data-rfd-droppable-id="droppableId.content.network-default-draggable-test-abcd-network_bytes-100"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -777,12 +777,12 @@ tr:hover .c3:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c3"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_bytes-100"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_bytes-100"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_bytes-100"
+                                  data-rfd-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_bytes-100"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -833,8 +833,8 @@ tr:hover .c3:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.network-default-draggable-test-abcd-network_packets-3"
+                              data-rfd-droppable-id="droppableId.content.network-default-draggable-test-abcd-network_packets-3"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -843,12 +843,12 @@ tr:hover .c3:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c3"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_packets-3"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_packets-3"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_packets-3"
+                                  data-rfd-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_packets-3"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -899,8 +899,8 @@ tr:hover .c3:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
+                              data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -909,12 +909,12 @@ tr:hover .c3:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c3"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
+                                  data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -972,8 +972,8 @@ tr:hover .c3:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
+                              data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -982,12 +982,12 @@ tr:hover .c3:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c3"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
+                                  data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -1092,8 +1092,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
+                                                data-rfd-droppable-id="droppableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1102,12 +1102,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
+                                                    data-rfd-draggable-id="draggableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -1221,8 +1221,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1231,12 +1231,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -1289,8 +1289,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1299,12 +1299,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -1367,8 +1367,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1377,12 +1377,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -1435,8 +1435,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1445,12 +1445,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -1503,8 +1503,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1513,12 +1513,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -1589,8 +1589,8 @@ tr:hover .c3:focus::before {
                                   data-test-subj="draggableWrapperDiv"
                                 >
                                   <div
-                                    data-rbd-droppable-context-id="0"
+                                    data-rfd-droppable-context-id="0"
-                                    data-rbd-droppable-id="droppableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
+                                    data-rfd-droppable-id="droppableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
                                   >
                                     <div
                                       class="draggable-keyboard-wrapper"
@@ -1599,12 +1599,12 @@ tr:hover .c3:focus::before {
                                       tabindex="0"
                                     >
                                       <div
-                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                         class="c3"
-                                        data-rbd-drag-handle-context-id="0"
+                                        data-rfd-drag-handle-context-id="0"
-                                        data-rbd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
+                                        data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
-                                        data-rbd-draggable-context-id="0"
+                                        data-rfd-draggable-context-id="0"
-                                        data-rbd-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
+                                        data-rfd-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
                                         data-test-subj="providerContainer"
                                         draggable="false"
                                         role="button"
@@ -1668,8 +1668,8 @@ tr:hover .c3:focus::before {
                                   data-test-subj="draggableWrapperDiv"
                                 >
                                   <div
-                                    data-rbd-droppable-context-id="0"
+                                    data-rfd-droppable-context-id="0"
-                                    data-rbd-droppable-id="droppableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
+                                    data-rfd-droppable-id="droppableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
                                   >
                                     <div
                                       class="draggable-keyboard-wrapper"
@@ -1678,12 +1678,12 @@ tr:hover .c3:focus::before {
                                       tabindex="0"
                                     >
                                       <div
-                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                         class="c3"
-                                        data-rbd-drag-handle-context-id="0"
+                                        data-rfd-drag-handle-context-id="0"
-                                        data-rbd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
+                                        data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
-                                        data-rbd-draggable-context-id="0"
+                                        data-rfd-draggable-context-id="0"
-                                        data-rbd-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
+                                        data-rfd-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
                                         data-test-subj="providerContainer"
                                         draggable="false"
                                         role="button"
@@ -1776,8 +1776,8 @@ tr:hover .c3:focus::before {
                                   data-test-subj="draggableWrapperDiv"
                                 >
                                   <div
-                                    data-rbd-droppable-context-id="0"
+                                    data-rfd-droppable-context-id="0"
-                                    data-rbd-droppable-id="droppableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
+                                    data-rfd-droppable-id="droppableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
                                   >
                                     <div
                                       class="draggable-keyboard-wrapper"
@@ -1786,12 +1786,12 @@ tr:hover .c3:focus::before {
                                       tabindex="0"
                                     >
                                       <div
-                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                         class="c3"
-                                        data-rbd-drag-handle-context-id="0"
+                                        data-rfd-drag-handle-context-id="0"
-                                        data-rbd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
+                                        data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
-                                        data-rbd-draggable-context-id="0"
+                                        data-rfd-draggable-context-id="0"
-                                        data-rbd-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
+                                        data-rfd-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
                                         data-test-subj="providerContainer"
                                         draggable="false"
                                         role="button"
@@ -1855,8 +1855,8 @@ tr:hover .c3:focus::before {
                                   data-test-subj="draggableWrapperDiv"
                                 >
                                   <div
-                                    data-rbd-droppable-context-id="0"
+                                    data-rfd-droppable-context-id="0"
-                                    data-rbd-droppable-id="droppableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
+                                    data-rfd-droppable-id="droppableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
                                   >
                                     <div
                                       class="draggable-keyboard-wrapper"
@@ -1865,12 +1865,12 @@ tr:hover .c3:focus::before {
                                       tabindex="0"
                                     >
                                       <div
-                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                         class="c3"
-                                        data-rbd-drag-handle-context-id="0"
+                                        data-rfd-drag-handle-context-id="0"
-                                        data-rbd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
+                                        data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
-                                        data-rbd-draggable-context-id="0"
+                                        data-rfd-draggable-context-id="0"
-                                        data-rbd-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
+                                        data-rfd-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
                                         data-test-subj="providerContainer"
                                         draggable="false"
                                         role="button"
@@ -1971,8 +1971,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
+                                                data-rfd-droppable-id="droppableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -1981,12 +1981,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
+                                                    data-rfd-draggable-id="draggableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -2100,8 +2100,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -2110,12 +2110,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -2168,8 +2168,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -2178,12 +2178,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -2246,8 +2246,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -2256,12 +2256,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -2314,8 +2314,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -2324,12 +2324,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -2382,8 +2382,8 @@ tr:hover .c3:focus::before {
                                               data-test-subj="draggableWrapperDiv"
                                             >
                                               <div
-                                                data-rbd-droppable-context-id="0"
+                                                data-rfd-droppable-context-id="0"
-                                                data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
+                                                data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
                                               >
                                                 <div
                                                   class="draggable-keyboard-wrapper"
@@ -2392,12 +2392,12 @@ tr:hover .c3:focus::before {
                                                   tabindex="0"
                                                 >
                                                   <div
-                                                    aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                    aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                     class="c3"
-                                                    data-rbd-drag-handle-context-id="0"
+                                                    data-rfd-drag-handle-context-id="0"
-                                                    data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
+                                                    data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
-                                                    data-rbd-draggable-context-id="0"
+                                                    data-rfd-draggable-context-id="0"
-                                                    data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
+                                                    data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
                                                     data-test-subj="providerContainer"
                                                     draggable="false"
                                                     role="button"
@@ -2464,8 +2464,8 @@ tr:hover .c3:focus::before {
                     data-test-subj="draggableWrapperDiv"
                   >
                     <div
-                      data-rbd-droppable-context-id="0"
+                      data-rfd-droppable-context-id="0"
-                      data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
+                      data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
                     >
                       <div
                         class="draggable-keyboard-wrapper"
@@ -2474,12 +2474,12 @@ tr:hover .c3:focus::before {
                         tabindex="0"
                       >
                         <div
-                          aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                          aria-describedby="rfd-hidden-text-0-hidden-text-0"
                           class="c3"
-                          data-rbd-drag-handle-context-id="0"
+                          data-rfd-drag-handle-context-id="0"
-                          data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
+                          data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
-                          data-rbd-draggable-context-id="0"
+                          data-rfd-draggable-context-id="0"
-                          data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
+                          data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
                           data-test-subj="providerContainer"
                           draggable="false"
                           role="button"
@@ -2566,8 +2566,8 @@ tr:hover .c3:focus::before {
                     data-test-subj="draggableWrapperDiv"
                   >
                     <div
-                      data-rbd-droppable-context-id="0"
+                      data-rfd-droppable-context-id="0"
-                      data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
+                      data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
                     >
                       <div
                         class="draggable-keyboard-wrapper"
@@ -2576,12 +2576,12 @@ tr:hover .c3:focus::before {
                         tabindex="0"
                       >
                         <div
-                          aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                          aria-describedby="rfd-hidden-text-0-hidden-text-0"
                           class="c3"
-                          data-rbd-drag-handle-context-id="0"
+                          data-rfd-drag-handle-context-id="0"
-                          data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
+                          data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
-                          data-rbd-draggable-context-id="0"
+                          data-rfd-draggable-context-id="0"
-                          data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
+                          data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
                           data-test-subj="providerContainer"
                           draggable="false"
                           role="button"
@@ -2668,8 +2668,8 @@ tr:hover .c3:focus::before {
                     data-test-subj="draggableWrapperDiv"
                   >
                     <div
-                      data-rbd-droppable-context-id="0"
+                      data-rfd-droppable-context-id="0"
-                      data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
+                      data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
                     >
                       <div
                         class="draggable-keyboard-wrapper"
@@ -2678,12 +2678,12 @@ tr:hover .c3:focus::before {
                         tabindex="0"
                       >
                         <div
-                          aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                          aria-describedby="rfd-hidden-text-0-hidden-text-0"
                           class="c3"
-                          data-rbd-drag-handle-context-id="0"
+                          data-rfd-drag-handle-context-id="0"
-                          data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
+                          data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
-                          data-rbd-draggable-context-id="0"
+                          data-rfd-draggable-context-id="0"
-                          data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
+                          data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
                           data-test-subj="providerContainer"
                           draggable="false"
                           role="button"

x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/column_header.tsx

@@ -8,7 +8,7 @@
 import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
 import { EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import type { ResizeCallback } from 're-resizable';
 import { Resizable } from 're-resizable';
 import { useDispatch } from 'react-redux';

x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import type { DraggableChildrenFn } from 'react-beautiful-dnd';
+import type { DraggableChildrenFn } from '@hello-pangea/dnd';
-import { Droppable } from 'react-beautiful-dnd';
+import { Droppable } from '@hello-pangea/dnd';
 
 import { useDispatch } from 'react-redux';
 import type { ControlColumnProps, HeaderActionProps } from '../../../../../../common/types';

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import type { Store } from 'redux';
 import { mount } from 'enzyme';
 import { waitFor } from '@testing-library/react';
-import type { DroppableProps, DraggableProps } from 'react-beautiful-dnd';
 
 import { useKibana, useCurrentUser } from '../../../../common/lib/kibana';
 import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
@@ -38,6 +37,12 @@ import { defaultRowRenderers } from './renderers';
 import type { State } from '../../../../common/store';
 import { createStore } from '../../../../common/store';
 import type { UseFieldBrowserOptionsProps } from '../../fields_browser';
+import type {
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DroppableProvided,
+  DroppableStateSnapshot,
+} from '@hello-pangea/dnd';
 
 jest.mock('../../../../common/hooks/use_app_toasts');
 jest.mock(
@@ -171,52 +176,55 @@ jest.mock(
   }
 );
 
-jest.mock('react-beautiful-dnd', () => {
+jest.mock('@hello-pangea/dnd', () => ({
-  const original = jest.requireActual('react-beautiful-dnd');
+  Droppable: ({
-  return {
+    children,
-    ...original,
+  }: {
-    Droppable: ({ children }: { children: DroppableProps['children'] }) =>
+    children: (a: DroppableProvided, b: DroppableStateSnapshot) => void;
-      children(
+  }) =>
-        {
+    children(
-          droppableProps: {
+      {
-            'data-rbd-droppable-context-id': '',
+        droppableProps: {
-            'data-rbd-droppable-id': '',
+          'data-rfd-droppable-context-id': '123',
-          },
+          'data-rfd-droppable-id': '123',
-          innerRef: jest.fn(),
         },
-        {
+        innerRef: jest.fn(),
-          isDraggingOver: false,
+        placeholder: null,
-          isUsingPlaceholder: false,
+      },
-        }
+      {
-      ),
+        isDraggingOver: false,
-    Draggable: ({ children }: { children: DraggableProps['children'] }) =>
+        draggingOverWith: null,
-      children(
+        draggingFromThisWith: null,
-        {
+        isUsingPlaceholder: false,
-          draggableProps: {
+      }
-            'data-rbd-draggable-context-id': '',
+    ),
-            'data-rbd-draggable-id': '',
+  Draggable: ({
-          },
+    children,
-          innerRef: jest.fn(),
+  }: {
+    children: (a: DraggableProvided, b: DraggableStateSnapshot) => void;
+  }) =>
+    children(
+      {
+        draggableProps: {
+          'data-rfd-draggable-context-id': '123',
+          'data-rfd-draggable-id': '123',
         },
-        {
+        innerRef: jest.fn(),
-          isDragging: false,
+        dragHandleProps: null,
-          isDropAnimating: false,
+      },
-        },
+      {
-        {
+        isDragging: false,
-          draggableId: '',
+        isDropAnimating: false,
-          mode: 'SNAP',
+        isClone: false,
-          source: {
+        dropAnimation: null,
-            droppableId: '',
+        draggingOver: null,
-            index: 0,
+        combineWith: null,
-          },
+        combineTargetFor: null,
-        }
+        mode: null,
-      ),
+      }
-    DraggableProvided: () => <></>,
+    ),
-    DraggableStateSnapshot: () => <></>,
+  DragDropContext: ({ children }: { children: React.ReactNode }) => children,
-    DraggingStyle: () => <></>,
+}));
-    NotDraggingStyle: () => <></>,
-  };
-});
 
 describe('Body', () => {
   const getWrapper = async (childrenComponent: JSX.Element, store?: { store: Store<State> }) => {

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap

@@ -253,8 +253,8 @@ tr:hover .c5:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
+                              data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -263,12 +263,12 @@ tr:hover .c5:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c5"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
+                                  data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -341,8 +341,8 @@ tr:hover .c5:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
+                              data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -351,12 +351,12 @@ tr:hover .c5:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c5"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
+                                  data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -438,8 +438,8 @@ tr:hover .c5:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
+                              data-rfd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -448,12 +448,12 @@ tr:hover .c5:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c5"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
+                                  data-rfd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -520,8 +520,8 @@ tr:hover .c5:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
+                              data-rfd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -530,12 +530,12 @@ tr:hover .c5:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c5"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
+                                  data-rfd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -598,8 +598,8 @@ tr:hover .c5:focus::before {
                             data-test-subj="draggableWrapperDiv"
                           >
                             <div
-                              data-rbd-droppable-context-id="0"
+                              data-rfd-droppable-context-id="0"
-                              data-rbd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
+                              data-rfd-droppable-id="droppableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
                             >
                               <div
                                 class="draggable-keyboard-wrapper"
@@ -608,12 +608,12 @@ tr:hover .c5:focus::before {
                                 tabindex="0"
                               >
                                 <div
-                                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                   class="c5"
-                                  data-rbd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-context-id="0"
-                                  data-rbd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
+                                  data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
-                                  data-rbd-draggable-context-id="0"
+                                  data-rfd-draggable-context-id="0"
-                                  data-rbd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
+                                  data-rfd-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
                                   data-test-subj="providerContainer"
                                   draggable="false"
                                   role="button"
@@ -690,8 +690,8 @@ tr:hover .c5:focus::before {
                                 data-test-subj="draggableWrapperDiv"
                               >
                                 <div
-                                  data-rbd-droppable-context-id="0"
+                                  data-rfd-droppable-context-id="0"
-                                  data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
+                                  data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
                                 >
                                   <div
                                     class="draggable-keyboard-wrapper"
@@ -700,12 +700,12 @@ tr:hover .c5:focus::before {
                                     tabindex="0"
                                   >
                                     <div
-                                      aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                      aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                       class="c5"
-                                      data-rbd-drag-handle-context-id="0"
+                                      data-rfd-drag-handle-context-id="0"
-                                      data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
+                                      data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
-                                      data-rbd-draggable-context-id="0"
+                                      data-rfd-draggable-context-id="0"
-                                      data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
+                                      data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
                                       data-test-subj="providerContainer"
                                       draggable="false"
                                       role="button"
@@ -778,8 +778,8 @@ tr:hover .c5:focus::before {
                                 data-test-subj="draggableWrapperDiv"
                               >
                                 <div
-                                  data-rbd-droppable-context-id="0"
+                                  data-rfd-droppable-context-id="0"
-                                  data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
+                                  data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
                                 >
                                   <div
                                     class="draggable-keyboard-wrapper"
@@ -788,12 +788,12 @@ tr:hover .c5:focus::before {
                                     tabindex="0"
                                   >
                                     <div
-                                      aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                      aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                       class="c5"
-                                      data-rbd-drag-handle-context-id="0"
+                                      data-rfd-drag-handle-context-id="0"
-                                      data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
+                                      data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
-                                      data-rbd-draggable-context-id="0"
+                                      data-rfd-draggable-context-id="0"
-                                      data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
+                                      data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
                                       data-test-subj="providerContainer"
                                       draggable="false"
                                       role="button"
@@ -861,8 +861,8 @@ tr:hover .c5:focus::before {
                                 data-test-subj="draggableWrapperDiv"
                               >
                                 <div
-                                  data-rbd-droppable-context-id="0"
+                                  data-rfd-droppable-context-id="0"
-                                  data-rbd-droppable-id="droppableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
+                                  data-rfd-droppable-id="droppableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
                                 >
                                   <div
                                     class="draggable-keyboard-wrapper"
@@ -871,12 +871,12 @@ tr:hover .c5:focus::before {
                                     tabindex="0"
                                   >
                                     <div
-                                      aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                      aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                       class="c5"
-                                      data-rbd-drag-handle-context-id="0"
+                                      data-rfd-drag-handle-context-id="0"
-                                      data-rbd-drag-handle-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
+                                      data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
-                                      data-rbd-draggable-context-id="0"
+                                      data-rfd-draggable-context-id="0"
-                                      data-rbd-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
+                                      data-rfd-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
                                       data-test-subj="providerContainer"
                                       draggable="false"
                                       role="button"
@@ -937,8 +937,8 @@ tr:hover .c5:focus::before {
                                 data-test-subj="draggableWrapperDiv"
                               >
                                 <div
-                                  data-rbd-droppable-context-id="0"
+                                  data-rfd-droppable-context-id="0"
-                                  data-rbd-droppable-id="droppableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
+                                  data-rfd-droppable-id="droppableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
                                 >
                                   <div
                                     class="draggable-keyboard-wrapper"
@@ -947,12 +947,12 @@ tr:hover .c5:focus::before {
                                     tabindex="0"
                                   >
                                     <div
-                                      aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                      aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                       class="c5"
-                                      data-rbd-drag-handle-context-id="0"
+                                      data-rfd-drag-handle-context-id="0"
-                                      data-rbd-drag-handle-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
+                                      data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
-                                      data-rbd-draggable-context-id="0"
+                                      data-rfd-draggable-context-id="0"
-                                      data-rbd-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
+                                      data-rfd-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
                                       data-test-subj="providerContainer"
                                       draggable="false"
                                       role="button"
@@ -1013,8 +1013,8 @@ tr:hover .c5:focus::before {
                                 data-test-subj="draggableWrapperDiv"
                               >
                                 <div
-                                  data-rbd-droppable-context-id="0"
+                                  data-rfd-droppable-context-id="0"
-                                  data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
+                                  data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
                                 >
                                   <div
                                     class="draggable-keyboard-wrapper"
@@ -1023,12 +1023,12 @@ tr:hover .c5:focus::before {
                                     tabindex="0"
                                   >
                                     <div
-                                      aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                      aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                       class="c5"
-                                      data-rbd-drag-handle-context-id="0"
+                                      data-rfd-drag-handle-context-id="0"
-                                      data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
+                                      data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
-                                      data-rbd-draggable-context-id="0"
+                                      data-rfd-draggable-context-id="0"
-                                      data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
+                                      data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
                                       data-test-subj="providerContainer"
                                       draggable="false"
                                       role="button"
@@ -1096,8 +1096,8 @@ tr:hover .c5:focus::before {
                                 data-test-subj="draggableWrapperDiv"
                               >
                                 <div
-                                  data-rbd-droppable-context-id="0"
+                                  data-rfd-droppable-context-id="0"
-                                  data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
+                                  data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
                                 >
                                   <div
                                     class="draggable-keyboard-wrapper"
@@ -1106,12 +1106,12 @@ tr:hover .c5:focus::before {
                                     tabindex="0"
                                   >
                                     <div
-                                      aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                      aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                       class="c5"
-                                      data-rbd-drag-handle-context-id="0"
+                                      data-rfd-drag-handle-context-id="0"
-                                      data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
+                                      data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
-                                      data-rbd-draggable-context-id="0"
+                                      data-rfd-draggable-context-id="0"
-                                      data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
+                                      data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
                                       data-test-subj="providerContainer"
                                       draggable="false"
                                       role="button"
@@ -1226,8 +1226,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
+                                                    data-rfd-droppable-id="droppableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -1236,12 +1236,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
+                                                        data-rfd-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -1319,8 +1319,8 @@ tr:hover .c5:focus::before {
                                                       data-test-subj="draggableWrapperDiv"
                                                     >
                                                       <div
-                                                        data-rbd-droppable-context-id="0"
+                                                        data-rfd-droppable-context-id="0"
-                                                        data-rbd-droppable-id="droppableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
+                                                        data-rfd-droppable-id="droppableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
                                                       >
                                                         <div
                                                           class="draggable-keyboard-wrapper"
@@ -1329,12 +1329,12 @@ tr:hover .c5:focus::before {
                                                           tabindex="0"
                                                         >
                                                           <div
-                                                            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                            aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                             class="c5"
-                                                            data-rbd-drag-handle-context-id="0"
+                                                            data-rfd-drag-handle-context-id="0"
-                                                            data-rbd-drag-handle-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
+                                                            data-rfd-drag-handle-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
-                                                            data-rbd-draggable-context-id="0"
+                                                            data-rfd-draggable-context-id="0"
-                                                            data-rbd-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
+                                                            data-rfd-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
                                                             data-test-subj="providerContainer"
                                                             draggable="false"
                                                             role="button"
@@ -1430,8 +1430,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -1440,12 +1440,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -1508,8 +1508,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -1518,12 +1518,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -1596,8 +1596,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -1606,12 +1606,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -1674,8 +1674,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -1684,12 +1684,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -1752,8 +1752,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -1762,12 +1762,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -1848,8 +1848,8 @@ tr:hover .c5:focus::before {
                                       data-test-subj="draggableWrapperDiv"
                                     >
                                       <div
-                                        data-rbd-droppable-context-id="0"
+                                        data-rfd-droppable-context-id="0"
-                                        data-rbd-droppable-id="droppableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
+                                        data-rfd-droppable-id="droppableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
                                       >
                                         <div
                                           class="draggable-keyboard-wrapper"
@@ -1858,12 +1858,12 @@ tr:hover .c5:focus::before {
                                           tabindex="0"
                                         >
                                           <div
-                                            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                            aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                             class="c5"
-                                            data-rbd-drag-handle-context-id="0"
+                                            data-rfd-drag-handle-context-id="0"
-                                            data-rbd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
+                                            data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
-                                            data-rbd-draggable-context-id="0"
+                                            data-rfd-draggable-context-id="0"
-                                            data-rbd-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
+                                            data-rfd-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
                                             data-test-subj="providerContainer"
                                             draggable="false"
                                             role="button"
@@ -1937,8 +1937,8 @@ tr:hover .c5:focus::before {
                                       data-test-subj="draggableWrapperDiv"
                                     >
                                       <div
-                                        data-rbd-droppable-context-id="0"
+                                        data-rfd-droppable-context-id="0"
-                                        data-rbd-droppable-id="droppableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
+                                        data-rfd-droppable-id="droppableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
                                       >
                                         <div
                                           class="draggable-keyboard-wrapper"
@@ -1947,12 +1947,12 @@ tr:hover .c5:focus::before {
                                           tabindex="0"
                                         >
                                           <div
-                                            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                            aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                             class="c5"
-                                            data-rbd-drag-handle-context-id="0"
+                                            data-rfd-drag-handle-context-id="0"
-                                            data-rbd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
+                                            data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
-                                            data-rbd-draggable-context-id="0"
+                                            data-rfd-draggable-context-id="0"
-                                            data-rbd-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
+                                            data-rfd-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
                                             data-test-subj="providerContainer"
                                             draggable="false"
                                             role="button"
@@ -2055,8 +2055,8 @@ tr:hover .c5:focus::before {
                                       data-test-subj="draggableWrapperDiv"
                                     >
                                       <div
-                                        data-rbd-droppable-context-id="0"
+                                        data-rfd-droppable-context-id="0"
-                                        data-rbd-droppable-id="droppableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
+                                        data-rfd-droppable-id="droppableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
                                       >
                                         <div
                                           class="draggable-keyboard-wrapper"
@@ -2065,12 +2065,12 @@ tr:hover .c5:focus::before {
                                           tabindex="0"
                                         >
                                           <div
-                                            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                            aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                             class="c5"
-                                            data-rbd-drag-handle-context-id="0"
+                                            data-rfd-drag-handle-context-id="0"
-                                            data-rbd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
+                                            data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
-                                            data-rbd-draggable-context-id="0"
+                                            data-rfd-draggable-context-id="0"
-                                            data-rbd-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
+                                            data-rfd-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
                                             data-test-subj="providerContainer"
                                             draggable="false"
                                             role="button"
@@ -2144,8 +2144,8 @@ tr:hover .c5:focus::before {
                                       data-test-subj="draggableWrapperDiv"
                                     >
                                       <div
-                                        data-rbd-droppable-context-id="0"
+                                        data-rfd-droppable-context-id="0"
-                                        data-rbd-droppable-id="droppableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
+                                        data-rfd-droppable-id="droppableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
                                       >
                                         <div
                                           class="draggable-keyboard-wrapper"
@@ -2154,12 +2154,12 @@ tr:hover .c5:focus::before {
                                           tabindex="0"
                                         >
                                           <div
-                                            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                            aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                             class="c5"
-                                            data-rbd-drag-handle-context-id="0"
+                                            data-rfd-drag-handle-context-id="0"
-                                            data-rbd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
+                                            data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
-                                            data-rbd-draggable-context-id="0"
+                                            data-rfd-draggable-context-id="0"
-                                            data-rbd-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
+                                            data-rfd-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
                                             data-test-subj="providerContainer"
                                             draggable="false"
                                             role="button"
@@ -2270,8 +2270,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
+                                                    data-rfd-droppable-id="droppableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -2280,12 +2280,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
+                                                        data-rfd-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -2363,8 +2363,8 @@ tr:hover .c5:focus::before {
                                                       data-test-subj="draggableWrapperDiv"
                                                     >
                                                       <div
-                                                        data-rbd-droppable-context-id="0"
+                                                        data-rfd-droppable-context-id="0"
-                                                        data-rbd-droppable-id="droppableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
+                                                        data-rfd-droppable-id="droppableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
                                                       >
                                                         <div
                                                           class="draggable-keyboard-wrapper"
@@ -2373,12 +2373,12 @@ tr:hover .c5:focus::before {
                                                           tabindex="0"
                                                         >
                                                           <div
-                                                            aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                            aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                             class="c5"
-                                                            data-rbd-drag-handle-context-id="0"
+                                                            data-rfd-drag-handle-context-id="0"
-                                                            data-rbd-drag-handle-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
+                                                            data-rfd-drag-handle-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
-                                                            data-rbd-draggable-context-id="0"
+                                                            data-rfd-draggable-context-id="0"
-                                                            data-rbd-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
+                                                            data-rfd-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
                                                             data-test-subj="providerContainer"
                                                             draggable="false"
                                                             role="button"
@@ -2474,8 +2474,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -2484,12 +2484,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -2552,8 +2552,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -2562,12 +2562,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -2640,8 +2640,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -2650,12 +2650,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -2718,8 +2718,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -2728,12 +2728,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -2796,8 +2796,8 @@ tr:hover .c5:focus::before {
                                                   data-test-subj="draggableWrapperDiv"
                                                 >
                                                   <div
-                                                    data-rbd-droppable-context-id="0"
+                                                    data-rfd-droppable-context-id="0"
-                                                    data-rbd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
+                                                    data-rfd-droppable-id="droppableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
                                                   >
                                                     <div
                                                       class="draggable-keyboard-wrapper"
@@ -2806,12 +2806,12 @@ tr:hover .c5:focus::before {
                                                       tabindex="0"
                                                     >
                                                       <div
-                                                        aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                                                        aria-describedby="rfd-hidden-text-0-hidden-text-0"
                                                         class="c5"
-                                                        data-rbd-drag-handle-context-id="0"
+                                                        data-rfd-drag-handle-context-id="0"
-                                                        data-rbd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
+                                                        data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
-                                                        data-rbd-draggable-context-id="0"
+                                                        data-rfd-draggable-context-id="0"
-                                                        data-rbd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
+                                                        data-rfd-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
                                                         data-test-subj="providerContainer"
                                                         draggable="false"
                                                         role="button"
@@ -2888,8 +2888,8 @@ tr:hover .c5:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
+                          data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -2898,12 +2898,12 @@ tr:hover .c5:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c5"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
+                              data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -3000,8 +3000,8 @@ tr:hover .c5:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
+                          data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -3010,12 +3010,12 @@ tr:hover .c5:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c5"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
+                              data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"
@@ -3112,8 +3112,8 @@ tr:hover .c5:focus::before {
                         data-test-subj="draggableWrapperDiv"
                       >
                         <div
-                          data-rbd-droppable-context-id="0"
+                          data-rfd-droppable-context-id="0"
-                          data-rbd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
+                          data-rfd-droppable-id="droppableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
                         >
                           <div
                             class="draggable-keyboard-wrapper"
@@ -3122,12 +3122,12 @@ tr:hover .c5:focus::before {
                             tabindex="0"
                           >
                             <div
-                              aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
                               class="c5"
-                              data-rbd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-context-id="0"
-                              data-rbd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
+                              data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
-                              data-rbd-draggable-context-id="0"
+                              data-rfd-draggable-context-id="0"
-                              data-rbd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
+                              data-rfd-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
                               data-test-subj="providerContainer"
                               draggable="false"
                               role="button"

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/helpers.test.tsx

@@ -181,8 +181,8 @@ describe('helpers', () => {
   });
 
   describe('isValidDestination', () => {
-    test('it returns false when destination is undefined', () => {
+    test('it returns false when destination is null', () => {
-      expect(isValidDestination(undefined)).toBe(false);
+      expect(isValidDestination(null)).toBe(false);
     });
 
     test('it returns true when the type guard matches as DraggableLocation ', () => {
@@ -861,7 +861,7 @@ describe('helpers', () => {
 
       addProviderToGroup({
         dataProviders,
-        destination: undefined,
+        destination: null,
         dispatch,
         onAddedToTimeline,
         providerToAdd,
@@ -877,7 +877,7 @@ describe('helpers', () => {
 
       addProviderToGroup({
         dataProviders,
-        destination: undefined,
+        destination: null,
         dispatch,
         onAddedToTimeline,
         providerToAdd,

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/helpers.tsx

@@ -6,7 +6,7 @@
  */
 
 import { omit } from 'lodash/fp';
-import type { DraggableLocation } from 'react-beautiful-dnd';
+import type { DraggableLocation } from '@hello-pangea/dnd';
 import type { Dispatch } from 'redux';
 
 import { updateProviders } from '../../../store/timeline/actions';
@@ -64,7 +64,7 @@ export const move = ({
 };
 
 export const isValidDestination = (
-  destination: DraggableLocation | undefined
+  destination: DraggableLocation | null
 ): destination is DraggableLocation => destination != null;
 
 export const sourceAndDestinationAreSameDroppable = ({
@@ -232,7 +232,7 @@ export const reArrangeProviders = ({
   timelineId,
 }: {
   dataProviders: DataProvider[];
-  destination: DraggableLocation | undefined;
+  destination: DraggableLocation | null;
   dispatch: Dispatch;
   source: DraggableLocation;
   timelineId: string;
@@ -271,7 +271,7 @@ export const addProviderToGroup = ({
   timelineId,
 }: {
   dataProviders: DataProvider[];
-  destination: DraggableLocation | undefined;
+  destination: DraggableLocation | null;
   dispatch: Dispatch;
   onAddedToTimeline: (fieldOrValue: string) => void;
   providerToAdd: DataProvider;
@@ -325,7 +325,7 @@ export const addContentToTimeline = ({
   timelineId,
 }: {
   dataProviders: DataProvider[];
-  destination: DraggableLocation | undefined;
+  destination: DraggableLocation | null;
   dispatch: Dispatch;
   onAddedToTimeline: (fieldOrValue: string) => void;
   providerToAdd: DataProvider;

x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx

@@ -8,8 +8,8 @@
 import { EuiFlexGroup, EuiFlexItem, EuiFormHelpText, EuiSpacer } from '@elastic/eui';
 import { rgba } from 'polished';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import type { DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';
+import type { DraggingStyle, NotDraggingStyle } from '@hello-pangea/dnd';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Draggable, Droppable } from '@hello-pangea/dnd';
 import styled from 'styled-components';
 import { useDispatch } from 'react-redux';
 

x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx

@@ -7,7 +7,7 @@
 
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { EuiContextMenuItem, EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { DraggableId } from 'react-beautiful-dnd';
+import { DraggableId } from '@hello-pangea/dnd';
 import { isEmpty } from 'lodash';
 
 import { useDispatch } from 'react-redux';

x-pack/plugins/timelines/public/hooks/use_add_to_timeline.ts

@@ -4,10 +4,11 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import type { Position } from 'css-box-model';
 import { range } from 'd3-array';
 import { interpolate } from 'd3-interpolate';
 import { useCallback } from 'react';
-import type { DraggableId, FluidDragActions, Position, SensorAPI } from 'react-beautiful-dnd';
+import type { DraggableId, FluidDragActions, SensorAPI } from '@hello-pangea/dnd';
 
 import {
   EMPTY_PROVIDERS_GROUP_CLASS_NAME,
@@ -19,7 +20,7 @@ let _sensorApiSingleton: SensorAPI;
 
 /**
  * This hook is passed (in an array) to the `sensors` prop of the
- * `react-beautiful-dnd` `DragDropContext` component. Example:
+ * `@hello-pangea/dnd` `DragDropContext` component. Example:
  *
  * ```
        <DragDropContext onDragEnd={onDragEnd} sensors={[useAddToTimelineSensor]}>

x-pack/plugins/timelines/public/types.ts

@@ -6,7 +6,7 @@
  */
 
 import { ReactElement } from 'react';
-import type { SensorAPI } from 'react-beautiful-dnd';
+import type { SensorAPI } from '@hello-pangea/dnd';
 import { Store } from 'redux';
 import { CoreStart } from '@kbn/core/public';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_badge.test.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { RuleTagBadge } from './rule_tag_badge';
 
@@ -32,28 +33,26 @@ describe('RuleTagBadge', () => {
   });
 
   it('can open and close the popover', () => {
-    const wrapper = mountWithIntl(
+    const { rerender, baseElement } = render(
       <RuleTagBadge isOpen={false} tags={tags} onClick={onClickMock} onClose={onCloseMock} />
     );
 
-    expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-a"]').exists()).toBeFalsy();
+    expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-a"]')).toBe(null);
-    expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-b"]').exists()).toBeFalsy();
+    expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-b"]')).toBe(null);
-    expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-c"]').exists()).toBeFalsy();
+    expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-c"]')).toBe(null);
-
-    wrapper.find('[data-test-subj="ruleTagBadge"]').at(1).simulate('click');
 
+    fireEvent.click(baseElement.querySelector('[data-test-subj="ruleTagBadge"]')!);
     expect(onClickMock).toHaveBeenCalledTimes(1);
 
-    wrapper.setProps({
+    rerender(
-      isOpen: true,
+      <RuleTagBadge isOpen={true} tags={tags} onClick={onClickMock} onClose={onCloseMock} />
-    });
+    );
 
-    expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-a"]').exists()).toBeTruthy();
+    expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-a"]')).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-b"]').exists()).toBeTruthy();
+    expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-b"]')).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-c"]').exists()).toBeTruthy();
+    expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-c"]')).toBeTruthy();
-
-    wrapper.find('[data-test-subj="ruleTagBadge"]').at(1).simulate('click');
 
+    fireEvent.click(baseElement.querySelector('[data-test-subj="ruleTagBadge"]')!);
     expect(onClickMock).toHaveBeenCalledTimes(2);
   });
 

yarn.lock

@@ -1195,13 +1195,20 @@
     pirates "^4.0.5"
     source-map-support "^0.5.16"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
   integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.19.4":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -1570,15 +1577,15 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@85.1.0":
+"@elastic/eui@86.0.0":
-  version "85.1.0"
+  version "86.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.1.0.tgz#cad3113223992b3a857b8054440ce4f499eaf897"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-86.0.0.tgz#52137f914b4b50566c5169c23a82bd4ed0f2ed0b"
-  integrity sha512-G2pBPJrNbO92/ttRowlxGczuAQEkcXlco4LJWWesWBqKxOW6ypF8LJxlC7J7tIBWAOUEQFSVUGELqPnynMVoew==
+  integrity sha512-+0/BggLqlZFxYI/HPikfu8lh8ejl7RIOikgxVq1hQuXqjp+cqeJL5R2OcUHQVHBwYy/FdDiQkMHA0Vg/itp4Vw==
   dependencies:
+    "@hello-pangea/dnd" "^16.2.0"
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.194"
     "@types/numeral" "^0.0.28"
-    "@types/react-beautiful-dnd" "^13.1.2"
     "@types/react-input-autosize" "^2.2.1"
     "@types/react-virtualized-auto-sizer" "^1.0.1"
     "@types/react-window" "^1.8.5"
@@ -1591,7 +1598,6 @@
     mdast-util-to-hast "^10.0.0"
     numeral "^2.0.6"
     prop-types "^15.6.0"
-    react-beautiful-dnd "^13.1.0"
     react-dropzone "^11.5.3"
     react-element-to-jsx-string "^14.3.4"
     react-focus-on "^3.9.1"
@@ -2514,6 +2520,32 @@
     "@hapi/bourne" "2.x.x"
     "@hapi/hoek" "9.x.x"
 
+"@hello-pangea/dnd@^16.2.0":
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.2.0.tgz#58cbadeb56f8c7a381da696bb7aa3bfbb87876ec"
+  integrity sha512-inACvMcvvLr34CG0P6+G/3bprVKhwswxjcsFUSJ+fpOGjhvDj9caiA9X3clby0lgJ6/ILIJjyedHZYECB7GAgA==
+  dependencies:
+    "@babel/runtime" "^7.19.4"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.0.4"
+    redux "^4.2.0"
+    use-memo-one "^1.1.3"
+
+"@hello-pangea/dnd@^16.3.0":
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.3.0.tgz#3776212f812df4e8e69c42831ec8ab7ff3a087d6"
+  integrity sha512-RYQ/K8shtJoyNPvFWz0gfXIK7HF3P3mL9UZFGMuHB0ljRSXVgMjVFI/FxcZmakMzw6tO7NflWLriwTNBow/4vw==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.1.1"
+    redux "^4.2.1"
+    use-memo-one "^1.1.3"
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -8883,7 +8915,7 @@
   resolved "https://registry.yarnpkg.com/@types/hjson/-/hjson-2.4.2.tgz#fd0288a5b6778cda993c978e43cc978ddc8f22e9"
   integrity sha512-MSKTfEyR8DbzJTOAY47BIJBD72ol4cu6BOw5inda0q1eEtEmurVHL4OmYB3Lxa4/DwXbWidkddvtoygbGQEDIw==
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -9419,13 +9451,6 @@
   resolved "https://registry.yarnpkg.com/@types/rbush/-/rbush-3.0.0.tgz#b6887d99b159e87ae23cd14eceff34f139842aa6"
   integrity sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg==
 
-"@types/react-beautiful-dnd@^13.0.0", "@types/react-beautiful-dnd@^13.1.2":
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130"
-  integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-dom@<18.0.0", "@types/react-dom@^17.0.17":
   version "17.0.17"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
@@ -9807,6 +9832,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/uuid@^9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.0.tgz#53ef263e5239728b56096b0a869595135b7952d2"
@@ -13445,10 +13475,10 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.1:
-  version "1.2.0"
+  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.0.tgz#3a26377b4162b3200d2ede4b064ec5b6a75186d0"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
-  integrity sha512-lri0br+jSNV0kkkiGEp9y9y3Njq2PmpqbeGWRFQJuZteZzY9iC9GZhQ8Y4WpPwM/2YocjHePxy14igJY7YKzkA==
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
   dependencies:
     tiny-invariant "^1.0.6"
 
@@ -21494,7 +21524,7 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.3"
 
-"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0, memoize-one@^5.1.1:
+"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
@@ -24679,10 +24709,10 @@ quote-unquote@^1.0.0:
   resolved "https://registry.yarnpkg.com/quote-unquote/-/quote-unquote-1.0.0.tgz#67a9a77148effeaf81a4d428404a710baaac8a0b"
   integrity sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.3:
-  version "4.0.2"
+  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
-  integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
+  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
 raf@^3.4.1:
   version "3.4.1"
@@ -24822,19 +24852,6 @@ react-ace@^7.0.5:
     lodash.isequal "^4.5.0"
     prop-types "^15.7.2"
 
-react-beautiful-dnd@^13.1.0:
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d"
-  integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -25077,7 +25094,7 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-redux@^7.1.0, react-redux@^7.2.0, react-redux@^7.2.8:
+react-redux@^7.1.0, react-redux@^7.2.8:
   version "7.2.8"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de"
   integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==
@@ -25089,6 +25106,30 @@ react-redux@^7.1.0, react-redux@^7.2.0, react-redux@^7.2.8:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+react-redux@^8.0.4:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
+  integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
+react-redux@^8.1.1:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"
+  integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -25579,6 +25620,13 @@ redux@^4.0.0, redux@^4.0.4, redux@^4.1.2, redux@^4.2.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+redux@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 refractor@^3.2.0, refractor@^3.5.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
@@ -25620,7 +25668,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
@@ -29297,10 +29345,10 @@ use-latest@^1.2.1:
   dependencies:
     use-isomorphic-layout-effect "^1.1.1"
 
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.3:
-  version "1.1.2"
+  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
-  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
 use-resize-observer@^9.1.0:
   version "9.1.0"