Upgrade to [email protected]

__mocks__/react-dnd-html5-backend.js

@@ -1,4 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import TestBackend from 'react-dnd-test-backend';
+import { TestBackend } from 'react-dnd-test-backend';
 
-module.exports = TestBackend;
+module.exports = { HTML5Backend: TestBackend };

package.json

@@ -3,13 +3,12 @@
   "version": "2.7.1",
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "scripts": {
-    "start": "parcel website/index.html",
     "prebuild": "yarn run lint && yarn run clean",
     "build": "rollup -c",
     "build:storybook": "build-storybook -o build",
     "clean": "rimraf dist",
     "clean:storybook": "rimraf build",
-    "lint": "eslint src website",
+    "lint": "eslint src",
     "prettier": "prettier --write \"{src,example/src,stories}/**/*.{js,css,md}\"",
     "prepublishOnly": "yarn run test && yarn run build",
     "release": "standard-version",
@@ -69,8 +68,8 @@
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "lodash.isequal": "^4.5.0",
     "prop-types": "^15.6.1",
-    "react-dnd": "^9.4.0",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.21.2"
   },
@@ -112,7 +111,7 @@
     "prettier": "^1.19.1",
     "react": "^16.11.0",
     "react-addons-shallow-compare": "^15.6.2",
-    "react-dnd-test-backend": "^10.0.2",
+    "react-dnd-test-backend": "^11.1.3",
     "react-dnd-touch-backend": "^9.4.0",
     "react-dom": "^16.11.0",
     "react-hot-loader": "^4.12.17",

src/react-sortable-tree.js

@@ -1,41 +1,41 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { AutoSizer, List } from 'react-virtualized';
-import isEqual from 'lodash.isequal';
 import withScrolling, {
+  createHorizontalStrength,
   createScrollingComponent,
   createVerticalStrength,
-  createHorizontalStrength,
 } from 'frontend-collective-react-dnd-scrollzone';
-import { DndProvider, DndContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import isEqual from 'lodash.isequal';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { DndContext, DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { polyfill } from 'react-lifecycles-compat';
+import { AutoSizer, List } from 'react-virtualized';
 import 'react-virtualized/styles.css';
-import TreeNode from './tree-node';
 import NodeRendererDefault from './node-renderer-default';
-import TreePlaceholder from './tree-placeholder';
 import PlaceholderRendererDefault from './placeholder-renderer-default';
-import {
-  walk,
-  changeNodeAtPath,
-  removeNode,
-  insertNode,
-  find,
-  toggleExpandedForAll,
-} from './utils/tree-data-utils';
-import {
-  memoizedInsertNode,
-  memoizedGetFlatDataFromTree,
-  memoizedGetDescendantCount,
-} from './utils/memoized-tree-data-utils';
-import { slideRows } from './utils/generic-utils';
+import './react-sortable-tree.css';
+import TreeNode from './tree-node';
+import TreePlaceholder from './tree-placeholder';
+import classnames from './utils/classnames';
 import {
   defaultGetNodeKey,
   defaultSearchMethod,
 } from './utils/default-handlers';
 import DndManager from './utils/dnd-manager';
-import classnames from './utils/classnames';
-import './react-sortable-tree.css';
+import { slideRows } from './utils/generic-utils';
+import {
+  memoizedGetDescendantCount,
+  memoizedGetFlatDataFromTree,
+  memoizedInsertNode,
+} from './utils/memoized-tree-data-utils';
+import {
+  changeNodeAtPath,
+  find,
+  insertNode,
+  removeNode,
+  toggleExpandedForAll,
+  walk,
+} from './utils/tree-data-utils';
 
 let treeIdCounter = 1;
 
@@ -950,9 +950,9 @@ const SortableTreeWithoutDndContext = props => (
 
 const SortableTree = props => (
   <DndProvider backend={HTML5Backend}>
-    <SortableTreeWithoutDndContext {...props}/>
+    <SortableTreeWithoutDndContext {...props} />
   </DndProvider>
-)
+);
 
 // Export the tree component without the react-dnd DragDropContext,
 // for when component is used with other components using react-dnd.

stories/__snapshots__/storyshots.test.js.snap

@@ -666,6 +666,235 @@ exports[`Storyshots Advanced Drag out to remove 1`] = `
 </div>
 `;
 
+exports[`Storyshots Advanced Minimal implementation without Dnd Context 1`] = `
+<div
+  style={
+    Object {
+      "height": 300,
+    }
+  }
+>
+  <div
+    className="rst__tree"
+    style={
+      Object {
+        "height": "100%",
+      }
+    }
+  >
+    <div>
+      <div
+        aria-label="grid"
+        aria-readonly={true}
+        className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
+        onScroll={[Function]}
+        role="grid"
+        style={
+          Object {
+            "WebkitOverflowScrolling": "touch",
+            "boxSizing": "border-box",
+            "direction": "ltr",
+            "height": 99999,
+            "overflowX": "hidden",
+            "overflowY": "hidden",
+            "position": "relative",
+            "width": 200,
+            "willChange": "transform",
+          }
+        }
+        tabIndex={0}
+      >
+        <div
+          className="ReactVirtualized__Grid__innerScrollContainer"
+          role="rowgroup"
+          style={
+            Object {
+              "height": 124,
+              "maxHeight": 124,
+              "maxWidth": 200,
+              "overflow": "hidden",
+              "pointerEvents": "",
+              "position": "relative",
+              "width": "auto",
+            }
+          }
+        >
+          <div
+            className="rst__node"
+            style={
+              Object {
+                "height": 62,
+                "left": 0,
+                "position": "absolute",
+                "top": 0,
+                "width": "100%",
+              }
+            }
+          >
+            <div
+              className="rst__lineBlock rst__lineHalfHorizontalRight"
+              style={
+                Object {
+                  "width": 44,
+                }
+              }
+            />
+            <div
+              className="rst__nodeContent"
+              style={
+                Object {
+                  "left": 44,
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "height": "100%",
+                  }
+                }
+              >
+                <div>
+                  <button
+                    aria-label="Collapse"
+                    className="rst__collapseButton"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "left": -22,
+                      }
+                    }
+                    type="button"
+                  />
+                  <div
+                    className="rst__lineChildren"
+                    style={
+                      Object {
+                        "width": 44,
+                      }
+                    }
+                  />
+                </div>
+                <div
+                  className="rst__rowWrapper"
+                >
+                  <div
+                    className="rst__row"
+                    style={
+                      Object {
+                        "opacity": 1,
+                      }
+                    }
+                  >
+                    <div
+                      className="rst__moveHandle"
+                    />
+                    <div
+                      className="rst__rowContents"
+                    >
+                      <div
+                        className="rst__rowLabel"
+                      >
+                        <span
+                          className="rst__rowTitle"
+                        >
+                          Chicken
+                        </span>
+                      </div>
+                      <div
+                        className="rst__rowToolbar"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="rst__node"
+            style={
+              Object {
+                "height": 62,
+                "left": 0,
+                "position": "absolute",
+                "top": 62,
+                "width": "100%",
+              }
+            }
+          >
+            <div
+              className="rst__lineBlock"
+              style={
+                Object {
+                  "width": 44,
+                }
+              }
+            />
+            <div
+              className="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
+              style={
+                Object {
+                  "width": 44,
+                }
+              }
+            />
+            <div
+              className="rst__nodeContent"
+              style={
+                Object {
+                  "left": 88,
+                }
+              }
+            >
+              <div
+                style={
+                  Object {
+                    "height": "100%",
+                  }
+                }
+              >
+                <div
+                  className="rst__rowWrapper"
+                >
+                  <div
+                    className="rst__row"
+                    style={
+                      Object {
+                        "opacity": 1,
+                      }
+                    }
+                  >
+                    <div
+                      className="rst__moveHandle"
+                    />
+                    <div
+                      className="rst__rowContents"
+                    >
+                      <div
+                        className="rst__rowLabel"
+                      >
+                        <span
+                          className="rst__rowTitle"
+                        >
+                          Egg
+                        </span>
+                      </div>
+                      <div
+                        className="rst__rowToolbar"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Advanced Playing with generateNodeProps 1`] = `
 <div>
   <div

stories/barebones-no-context.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { SortableTreeWithoutDndContext as SortableTree } from '../src';
+// In your own app, you would need to use import styles once in the app
+// import 'react-sortable-tree/styles.css';
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      treeData: [
+        { title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] },
+      ],
+    };
+  }
+
+  render() {
+    return (
+      <div style={{ height: 300 }}>
+        <DndProvider backend={HTML5Backend}>
+          <SortableTree
+            treeData={this.state.treeData}
+            onChange={treeData => this.setState({ treeData })}
+          />
+        </DndProvider>
+      </div>
+    );
+  }
+}

stories/drag-out-to-remove.js

@@ -1,8 +1,8 @@
 /* eslint-disable react/no-multi-comp */
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { DndProvider, DropTarget } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { SortableTreeWithoutDndContext as SortableTree } from '../src';
 // In your own app, you would need to use import styles once in the app
 // import 'react-sortable-tree/styles.css';