react-dnd: v14.0.4 -> v16.0.1

Author: nosferatu500

package-lock.json

@@ -83,7 +83,7 @@
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
-    "react-dnd-touch-backend": "^14.1.1",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.53.3",
     "rollup-plugin-dts": "^6.2.3",
@@ -94,13 +94,13 @@
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "react-dnd": "14.0.4",
+    "react-dnd": "^16.0.1",
     "react-dom": "^18.3.1"
   },
   "dependencies": {
     "lodash.isequal": "^4.5.0",
-    "react-dnd": "14.0.4",
-    "react-dnd-html5-backend": "^14.1.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "virtua": "^0.38.5"
   },
   "browserslist": {

package.json

@@ -107,9 +107,10 @@ const NodeRendererDefault: React.FC<NodeRendererProps> = (props) => {
           </div>
         </div>
       ) : (
-        connectDragSource(<div className="rst__moveHandle" />, {
-          dropEffect: 'copy',
-        })
+        <div
+          ref={connectDragSource}
+          className="rst__moveHandle"
+        />
       )
   }
 
@@ -158,71 +159,70 @@ const NodeRendererDefault: React.FC<NodeRendererProps> = (props) => {
 
       <div className={classnames('rst__rowWrapper', rowDirectionClass ?? '')}>
         {/* Set the row preview to be used during drag and drop */}
-        {connectDragPreview(
+        <div
+          ref={connectDragPreview}
+          className={classnames(
+            'rst__row',
+            isLandingPadActive ? 'rst__rowLandingPad' : '',
+            isLandingPadActive && !canDrop ? 'rst__rowCancelPad' : '',
+            isSearchMatch ? 'rst__rowSearchMatch' : '',
+            isSearchFocus ? 'rst__rowSearchFocus' : '',
+            rowDirectionClass ?? '',
+            className ?? ''
+          )}
+          style={{
+            opacity: isDraggedDescendant ? 0.5 : 1,
+            ...style,
+          }}>
+          {handle}
+
           <div
             className={classnames(
-              'rst__row',
-              isLandingPadActive ? 'rst__rowLandingPad' : '',
-              isLandingPadActive && !canDrop ? 'rst__rowCancelPad' : '',
-              isSearchMatch ? 'rst__rowSearchMatch' : '',
-              isSearchFocus ? 'rst__rowSearchFocus' : '',
-              rowDirectionClass ?? '',
-              className ?? ''
-            )}
-            style={{
-              opacity: isDraggedDescendant ? 0.5 : 1,
-              ...style,
-            }}>
-            {handle}
-
+              'rst__rowContents',
+              canDrag ? '' : 'rst__rowContentsDragDisabled',
+              rowDirectionClass ?? ''
+            )}>
             <div
               className={classnames(
-                'rst__rowContents',
-                canDrag ? '' : 'rst__rowContentsDragDisabled',
+                'rst__rowLabel',
                 rowDirectionClass ?? ''
               )}>
-              <div
+              <span
                 className={classnames(
-                  'rst__rowLabel',
-                  rowDirectionClass ?? ''
+                  'rst__rowTitle',
+                  node.subtitle ? 'rst__rowTitleWithSubtitle' : ''
                 )}>
-                <span
-                  className={classnames(
-                    'rst__rowTitle',
-                    node.subtitle ? 'rst__rowTitleWithSubtitle' : ''
-                  )}>
-                  {typeof nodeTitle === 'function'
-                    ? nodeTitle({
-                        node,
-                        path,
-                        treeIndex,
-                      })
-                    : nodeTitle}
-                </span>
+                {typeof nodeTitle === 'function'
+                  ? nodeTitle({
+                    node,
+                    path,
+                    treeIndex,
+                  })
+                  : nodeTitle}
+              </span>
 
-                {nodeSubtitle && (
-                  <span className="rst__rowSubtitle">
-                    {typeof nodeSubtitle === 'function'
-                      ? nodeSubtitle({
-                          node,
-                          path,
-                          treeIndex,
-                        })
-                      : nodeSubtitle}
-                  </span>
-                )}
-              </div>
+              {nodeSubtitle && (
+                <span className="rst__rowSubtitle">
+                  {typeof nodeSubtitle === 'function'
+                    ? nodeSubtitle({
+                      node,
+                      path,
+                      treeIndex,
+                    })
+                    : nodeSubtitle}
+                </span>
+              )}
+            </div>
 
-              <div className="rst__rowToolbar">
-                {buttons?.map((btn, index) => (
-                  <div key={index} className="rst__toolbarButton">
-                    {btn}
-                  </div>
-                ))}
-              </div>
+            <div className="rst__rowToolbar">
+              {buttons?.map((btn, index) => (
+                <div key={index} className="rst__toolbarButton">
+                  {btn}
+                </div>
+              ))}
             </div>
           </div>
-        )}
+        </div>
       </div>
     </div>
   )

src/node-renderer-default.tsx

@@ -897,8 +897,6 @@ export type ReactSortableTreeProps = {
   // rtl support
   rowDirection?: string
 
-  debugMode?: boolean
-
   overscan?: number | { main: number; reverse: number }
 }
 
@@ -929,7 +927,6 @@ ReactSortableTree.defaultProps = {
   onDragStateChanged: () => { },
   onlyExpandSearchedNodes: false,
   rowDirection: 'ltr',
-  debugMode: false,
   overscan: 0,
   virtuaRef: undefined,
 }
@@ -950,7 +947,7 @@ export const SortableTreeWithoutDndContext = (
 
 export const SortableTree = (props: ReactSortableTreeProps) => {
   return (
-    <DndProvider debugMode={props.debugMode} backend={HTML5Backend}>
+    <DndProvider backend={HTML5Backend}>
       <SortableTreeWithoutDndContext {...props} />
     </DndProvider>
   )