chore: Sync with upstream

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="2.0.0"></a>
+
+# [2.0.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.11.0...v2.0.0) (2021-03-18)
+
+### Bug Fixes
+
+- Fixed React strict mode warnings by upgrading to new React context API and removing legacy refs ([#624](https://github.com/clauderic/react-sortable-hoc/pull/624)). Since the new context API was introduced in React ^16.3.0, the peer dependencies had to be upgraded accordingly.
+- Check if event is cancellable before calling `event.preventDefault()` [#752](https://github.com/clauderic/react-sortable-hoc/pull/752).
+- Fix touch events being lost by listening to event.target on mobile [#586](https://github.com/clauderic/react-sortable-hoc/pull/586).
+- Added `disableAutoscroll` prop to PropType definitions [#755](https://github.com/clauderic/react-sortable-hoc/pull/755).
+
+### Dependencies
+
+- Updated minimum peer dependencies for `react` and `react-dom` to ^16.3.0. Added ^17.0.0 to list of supported peer dependencies.
+
 <a name="1.11.0"></a>
 
 # [1.11.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.10.1...v1.11.0) (2020-01-20)

README.md

@@ -10,6 +10,12 @@
 
 ### Examples available here: <a href="#">http://clauderic.github.io/react-sortable-hoc/</a>
 
+## ⚠️ Important notice for new consumers
+
+New consumers are strongly encouraged to **check out [@dnd-kit](https://github.com/clauderic/dnd-kit) before adopting this library in a new project**. It supports all of the features of react-sortable-hoc, but with a more modern and extensible architecture.
+
+This library will continue to receive critical updates and bug fixes for the foreseeable future, but there are no new features planned. In future versions of React, the [`findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) method will be deprecated. This method is a critical piece of the architecture of `react-sortable-hoc`, and it's unlikely that the library could continue to exist with its current architecture once this method is deprecated. In light of this, all development efforts have been redirected towards [@dnd-kit](https://github.com/clauderic/dnd-kit).
+
 ## Features
 
 - **Higher Order Components** – Integrates with your existing components
@@ -106,7 +112,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
 | pressDelay                        | Number                                                    | `0`                                                                                                            | If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop.                                                                                                                                                                                                                                                |
 | pressThreshold                    | Number                                                    | `5`                                                                                                            | Number of pixels of movement to tolerate before ignoring a press event.                                                                                                                                                                                                                                                                                                                                                                                                |
 | distance                          | Number                                                    | `0`                                                                                                            | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.                                                                                                                                                                                                                                                                                                               |
-| shouldCancelStart                 | Function                                                  | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48)     | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`.                                                                                                                                                                                                                                     |
+| shouldCancelStart                 | Function                                                  | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48)     | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select`, `option`, or `button`.                                                                                                                                                                                                                                     |
 | updateBeforeSortStart             | Function                                                  |                                                                                                                | This function is invoked before sorting begins. It can return a promise, allowing you to run asynchronous updates (such as `setState`) before sorting begins. `function({node, index, collection, isKeySorting}, event)`                                                                                                                                                                                                                                               |
 | onSortStart                       | Function                                                  |                                                                                                                | Callback that is invoked when sorting begins. `function({node, index, collection, isKeySorting}, event)`                                                                                                                                                                                                                                                                                                                                                               |
 | onSortMove                        | Function                                                  |                                                                                                                | Callback that is invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                         |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticprojects/react-sortable-hoc",
-  "version": "1.11.0-3",
+  "version": "2.0.0-no-animation-prop",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
   "author": {
     "name": "Clauderic Demers",
@@ -48,14 +48,14 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.2.0",
+    "@babel/runtime": "^7.13.0",
     "invariant": "^2.2.4",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
     "prop-types": "^15.5.7",
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
+    "react": "^16.3.0 || ^17.0.0",
+    "react-dom": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

src/SortableContainer/index.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import {findDOMNode} from 'react-dom';
 import invariant from 'invariant';
 
@@ -37,17 +36,24 @@ import {
   defaultKeyCodes,
 } from './props';
 
+export const SortableContext = React.createContext({
+  manager: {},
+});
+
 export default function sortableContainer(
   WrappedComponent,
   config = {withRef: false},
 ) {
   return class WithSortableContainer extends React.Component {
     constructor(props) {
       super(props);
+      const manager = new Manager();
 
       validateProps(props);
 
-      this.manager = new Manager();
+      this.manager = manager;
+      this.wrappedInstance = React.createRef();
+      this.sortableContextValue = {manager};
       this.events = {
         end: this.handleEnd,
         move: this.handleMove,
@@ -60,15 +66,6 @@ export default function sortableContainer(
     static displayName = provideDisplayName('sortableList', WrappedComponent);
     static defaultProps = defaultProps;
     static propTypes = propTypes;
-    static childContextTypes = {
-      manager: PropTypes.object.isRequired,
-    };
-
-    getChildContext() {
-      return {
-        manager: this.manager,
-      };
-    }
 
     componentDidMount() {
       const {useWindowAsScrollContainer} = this.props;
@@ -395,7 +392,7 @@ export default function sortableContainer(
             .forEach((className) => this.helper.classList.add(className));
         }
 
-        this.listenerNode = event.touches ? node : this.contentWindow;
+        this.listenerNode = event.touches ? event.target : this.contentWindow;
 
         if (isKeySorting) {
           this.listenerNode.addEventListener('wheel', this.handleKeyEnd, true);
@@ -452,7 +449,7 @@ export default function sortableContainer(
       const {onSortMove} = this.props;
 
       // Prevent scrolling on mobile
-      if (typeof event.preventDefault === 'function') {
+      if (typeof event.preventDefault === 'function' && event.cancelable) {
         event.preventDefault();
       }
 
@@ -727,7 +724,7 @@ export default function sortableContainer(
               translate.x = this.width + this.marginOffset.x;
               if (
                 edgeOffset.left + translate.x >
-                this.containerBoundingRect.width - offset.width
+                this.containerBoundingRect.width - offset.width * 2
               ) {
                 // If it moves passed the right bounds, then animate it to the first position of the next row.
                 // We just use the offset of the next node to calculate where to move, because that node's original position
@@ -900,7 +897,7 @@ export default function sortableContainer(
         'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call',
       );
 
-      return this.refs.wrappedInstance;
+      return this.wrappedInstance.current;
     }
 
     getContainer() {
@@ -1049,9 +1046,13 @@ export default function sortableContainer(
     };
 
     render() {
-      const ref = config.withRef ? 'wrappedInstance' : null;
+      const ref = config.withRef ? this.wrappedInstance : null;
 
-      return <WrappedComponent ref={ref} {...omit(this.props, omittedProps)} />;
+      return (
+        <SortableContext.Provider value={this.sortableContextValue}>
+          <WrappedComponent ref={ref} {...omit(this.props, omittedProps)} />
+        </SortableContext.Provider>
+      );
     }
 
     get helperContainer() {

src/SortableElement/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import {findDOMNode} from 'react-dom';
 import invariant from 'invariant';
+import {SortableContext} from '../SortableContainer';
 
 import {provideDisplayName, omit} from '../utils';
 
@@ -23,9 +24,7 @@ export default function sortableElement(
       WrappedComponent,
     );
 
-    static contextTypes = {
-      manager: PropTypes.object.isRequired,
-    };
+    static contextType = SortableContext;
 
     static propTypes = propTypes;
 
@@ -84,11 +83,13 @@ export default function sortableElement(
         config.withRef,
         'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call',
       );
-      return this.refs.wrappedInstance;
+      return this.wrappedInstance.current;
     }
 
+    wrappedInstance = React.createRef();
+
     render() {
-      const ref = config.withRef ? 'wrappedInstance' : null;
+      const ref = config.withRef ? this.wrappedInstance : null;
 
       return <WrappedComponent ref={ref} {...omit(this.props, omittedProps)} />;
     }

src/SortableHandle/index.js

@@ -21,11 +21,13 @@ export default function sortableHandle(
         config.withRef,
         'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call',
       );
-      return this.refs.wrappedInstance;
+      return this.wrappedInstance.current;
     }
 
+    wrappedInstance = React.createRef();
+
     render() {
-      const ref = config.withRef ? 'wrappedInstance' : null;
+      const ref = config.withRef ? this.wrappedInstance : null;
 
       return <WrappedComponent ref={ref} {...this.props} />;
     }

types/index.d.ts

@@ -88,6 +88,7 @@ export interface SortableContainerProps {
   getContainer?: ContainerGetter;
   getHelperDimensions?: (sort: SortStart) => Dimensions;
   helperContainer?: HTMLElement | HelperContainerGetter;
+  disableAutoscroll?: boolean;
 }
 
 export interface SortableElementProps {