refactor: DH-20098 React 19 support swap react-beautiful-dnd for @hello-pangea/dnd (#2548)

mattrunyon · web-flow · commit 28d637768ffe · 2025-10-10T09:59:04.000-05:00
This should be all that is needed for DH-20098 after #2534 This replaces `react-beautiful-dnd` with `@hello-pangea/dnd` which is a fork someone maintained after Atlassian stopped supporting `react-beautiful-dnd`. It fixes the remaining React 18 warnings we see in dev when rendering a `react-beautiful-dnd` list (default props not allowed on functional component). The rollup/aggregations menu should use these components as a test point. I've published an alpha build of this branch and a customer said it was working for them on React 19.
diff --git a/jest.setup.ts b/jest.setup.ts
@@ -14,7 +14,7 @@ Log.setLogLevel(logLevel);
 
 // disable annoying dnd-react warnings
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+window['__@hello-pangea/dnd-disable-dev-warnings'] = true;
 
 // Define the matchMedia property so we can mock out monaco properly
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,6 @@
     "@types/plotly.js": "^3.0.0",
     "@types/pouchdb-browser": "^6.1.3",
     "@types/react": "^18.3.12",
-    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.1",
     "@types/react-plotly.js": "^2.6.0",
diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json
@@ -39,6 +39,7 @@
     "@deephaven/utils": "file:../utils",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "event-target-shim": "^6.0.2",
@@ -52,7 +53,6 @@
     "pouchdb-browser": "^7.2.2",
     "pouchdb-find": "^7.2.2",
     "react": "^18.3.1",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.1",
     "react-redux": "^7.2.7",
     "react-router-dom": "^5.1.2",
diff --git a/packages/code-studio/src/AppRoot.tsx b/packages/code-studio/src/AppRoot.tsx
@@ -31,7 +31,7 @@ export function AppRoot(): JSX.Element {
     // disable annoying dnd-react warnings
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+    window['__@hello-pangea/dnd-disable-dev-warnings'] = true;
   }, []);
 
   return <AppRouter />;
diff --git a/packages/code-studio/src/styleguide/DraggableLists.tsx b/packages/code-studio/src/styleguide/DraggableLists.tsx
@@ -5,7 +5,7 @@ import {
   type DragStart,
   type DragUpdate,
   type DropResult,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import memoize from 'memoizee';
 import {
   DragUtils,
@@ -99,7 +99,7 @@ class DraggableLists extends Component<
     const isSameList = sourceListIndex === destinationListIndex;
     let destinationIndex = destination.index;
     if (isSameList && source.index < destination.index) {
-      // react-beautiful-dnd adjusts the index when dragging within a list already, however that only supports single selection
+      // @hello-pangea/dnd adjusts the index when dragging within a list already, however that only supports single selection
       // We need to change it back to the index we actually want it to drop at before adjusting for the removed source index, as
       // we adjust the index based on all the selected ranges, not just the source.index.
       destinationIndex += 1;
diff --git a/packages/code-studio/src/styleguide/StyleGuideRoot.tsx b/packages/code-studio/src/styleguide/StyleGuideRoot.tsx
@@ -21,7 +21,7 @@ export function StyleGuideRoot(): JSX.Element {
     // disable annoying dnd-react warnings
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+    window['__@hello-pangea/dnd-disable-dev-warnings'] = true;
   }, []);
 
   return (
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -31,6 +31,7 @@
     "@deephaven/utils": "file:../utils",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "@internationalized/date": "^3.5.5",
     "@react-spectrum/theme-default": "^3.5.1",
     "@react-spectrum/toast": "^3.0.0-beta.16",
@@ -48,7 +49,6 @@
     "memoizee": "^0.4.15",
     "nanoid": "^5.0.7",
     "popper.js": "^1.16.1",
-    "react-beautiful-dnd": "^13.1.1",
     "react-reverse-portal": "^2.3.0",
     "react-transition-group": "^4.4.2",
     "react-virtualized-auto-sizer": "1.0.7",
diff --git a/packages/components/src/DraggableItemList.scss b/packages/components/src/DraggableItemList.scss
@@ -145,7 +145,7 @@ $draggable-item-grip-color: $mid;
     }
   }
 
-  // Sometimes react-beautiful-dnd still adds the `is-dragging-over` class even though drop is disabled
+  // Sometimes @hello-pangea/dnd still adds the `is-dragging-over` class even though drop is disabled
   // only show the ants if drop isn't disabled
   &.is-dragging-over:not(.is-drop-disabled) {
     .item-list-scroll-pane {
diff --git a/packages/components/src/DraggableItemList.tsx b/packages/components/src/DraggableItemList.tsx
@@ -5,7 +5,7 @@ import {
   Draggable,
   Droppable,
   type DraggableChildrenFn,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsGripper } from '@deephaven/icons';
 import { RangeUtils, type Range } from '@deephaven/utils';
@@ -53,10 +53,10 @@ type DraggableItemListState = {
 
 /**
  * Show a draggable item list. It _must_ be used within a `DragDropContext`.
- * This implementation uses react-beautiful-dnd for handling dragging and dropping of items.
- * We use ItemList to handle selection for multi drag and drop (not built in to react-beautiful-dnd).
- * One caveat with the use of react-beautiful-dnd is that it doesn't allow a drag to be initiated while
- * using a modifier key: https://github.com/atlassian/react-beautiful-dnd/issues/1678
+ * This implementation uses @hello-pangea/dnd for handling dragging and dropping of items.
+ * We use ItemList to handle selection for multi drag and drop (not built in to @hello-pangea/dnd).
+ * One caveat with the use of @hello-pangea/dnd is that it doesn't allow a drag to be initiated while
+ * using a modifier key: https://github.com/atlassian/@hello-pangea/dnd/issues/1678
  */
 class DraggableItemList<T> extends PureComponent<
   DraggableItemListProps<T>,
diff --git a/packages/components/src/navigation/NavTab.test.tsx b/packages/components/src/navigation/NavTab.test.tsx
@@ -6,7 +6,7 @@ import {
   type DropResult,
   Droppable,
   type ResponderProvided,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import NavTab from './NavTab';
 
 const mockOnClose = jest.fn();
diff --git a/packages/components/src/navigation/NavTab.tsx b/packages/components/src/navigation/NavTab.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import classNames from 'classnames';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import { type IconDefinition, vsClose } from '@deephaven/icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { NavTabItem } from './NavTabList';
diff --git a/packages/components/src/navigation/NavTabList.tsx b/packages/components/src/navigation/NavTabList.tsx
@@ -11,7 +11,7 @@ import {
   DragDropContext,
   Droppable,
   type OnDragEndResponder,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { vsChevronRight, vsChevronLeft, vsChevronDown } from '@deephaven/icons';
diff --git a/packages/iris-grid/package.json b/packages/iris-grid/package.json
@@ -47,6 +47,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "classnames": "^2.3.1",
     "fast-deep-equal": "^3.1.3",
     "lodash.clamp": "^4.0.3",
@@ -56,7 +57,6 @@
     "memoizee": "^0.4.15",
     "monaco-editor": "^0.43.0",
     "nanoid": "^5.0.7",
-    "react-beautiful-dnd": "^13.1.1",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
diff --git a/packages/iris-grid/src/sidebar/CustomColumnBuilder.tsx b/packages/iris-grid/src/sidebar/CustomColumnBuilder.tsx
@@ -2,11 +2,7 @@ import React, { Component, type ReactElement } from 'react';
 import classNames from 'classnames';
 import { nanoid } from 'nanoid';
 import memoize from 'memoize-one';
-import {
-  DragDropContext,
-  Droppable,
-  type DropResult,
-} from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, type DropResult } from '@hello-pangea/dnd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, DragUtils, LoadingSpinner } from '@deephaven/components';
 import { dhNewCircleLargeFilled, vsWarning, vsPass } from '@deephaven/icons';
diff --git a/packages/iris-grid/src/sidebar/CustomColumnInput.test.tsx b/packages/iris-grid/src/sidebar/CustomColumnInput.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import CustomColumnInput, {
   type CustomColumnInputProps,
 } from './CustomColumnInput';
diff --git a/packages/iris-grid/src/sidebar/CustomColumnInput.tsx b/packages/iris-grid/src/sidebar/CustomColumnInput.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
 import { Button } from '@deephaven/components';
 import { vsTrash, vsGripper } from '@deephaven/icons';
 import { DbNameValidator } from '@deephaven/utils';
diff --git a/packages/iris-grid/src/sidebar/RollupRows.tsx b/packages/iris-grid/src/sidebar/RollupRows.tsx
@@ -13,7 +13,7 @@ import {
   type DragStart,
   Droppable,
   type DropResult,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import {
   Checkbox,
   DraggableItemList,
@@ -284,7 +284,7 @@ class RollupRows extends Component<RollupRowsProps, RollupRowsState> {
     const isSameList = source.droppableId === GROUPED_LIST_ID;
     let destinationIndex = destination.index;
     if (isSameList && source.index < destination.index) {
-      // react-beautiful-dnd adjusts the index when dragging within a list already, however that only supports single selection
+      // @hello-pangea/dnd adjusts the index when dragging within a list already, however that only supports single selection
       // We need to change it back to the index we actually want it to drop at before adjusting for the removed source index, as
       // we adjust the index based on all the selected ranges, not just the source.index.
       destinationIndex += 1;
diff --git a/packages/iris-grid/src/sidebar/aggregations/Aggregations.tsx b/packages/iris-grid/src/sidebar/aggregations/Aggregations.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { DragDropContext, type DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, type DropResult } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
diff --git a/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx b/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormattingMenu.tsx
@@ -4,7 +4,7 @@ import {
   Draggable,
   Droppable,
   type DropResult,
-} from 'react-beautiful-dnd';
+} from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhNewCircleLargeFilled, vsGripper, vsTrash } from '@deephaven/icons';
diff --git a/tests/table-operations.spec.ts b/tests/table-operations.spec.ts
diff --git a/tests/table-scroll.spec.ts b/tests/table-scroll.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ $draggable-item-grip-color: $mid;`
`145`	`145`	`}`
`146`	`146`	`}`
`147`	`147`
`148`		- // Sometimes react-beautiful-dnd still adds the `is-dragging-over` class even though drop is disabled
	`148`	+ // Sometimes @hello-pangea/dnd still adds the `is-dragging-over` class even though drop is disabled
`149`	`149`	`// only show the ants if drop isn't disabled`
`150`	`150`	`&.is-dragging-over:not(.is-drop-disabled) {`
`151`	`151`	`.item-list-scroll-pane {`