react-sortable-hoc - npm Package Compare versions

Comparing version 1.8.3 to 1.9.0

CHANGELOG.md

@@ -5,2 +5,15 @@ # Change Log
 
+<a name="1.9.0"></a>
+
+# [1.9.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.9.0) (2019-04-23)
+
+### Bug Fixes
+
+- issue with radio input name collision when cloning helper ([5337c97](https://github.com/clauderic/react-sortable-hoc/commit/5337c97))
+
+### Features
+
+- add support for keyboard sorting ([#501](https://github.com/clauderic/react-sortable-hoc/issues/501)) ([439b92f](https://github.com/clauderic/react-sortable-hoc/commit/439b92f))
+- prevent sort start on contentEditable target ([d64c8cf](https://github.com/clauderic/react-sortable-hoc/commit/d64c8cf))
+
 <a name="1.8.3"></a>
@@ -7,0 +20,0 @@

dist/react-sortable-hoc.esm.js

 import _extends from '@babel/runtime/helpers/esm/extends';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
@@ -15,2 +15,3 @@ import _createClass from '@babel/runtime/helpers/esm/createClass';
 import invariant from 'invariant';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 
@@ -171,2 +172,9 @@ var Manager = function () {
 }
+function getScrollAdjustedBoundingClientRect(node, scrollDelta) {
+  var boundingClientRect = node.getBoundingClientRect();
+  return {
+    top: boundingClientRect.top + scrollDelta.top,
+    left: boundingClientRect.left + scrollDelta.left
+  };
+}
 function getPosition(event) {
@@ -214,3 +222,11 @@ if (event.touches && event.touches.length) {
 }
-
+function getTargetIndex(newIndex, prevIndex, oldIndex) {
+  if (newIndex < oldIndex && newIndex > prevIndex) {
+    return newIndex - 1;
+  } else if (newIndex > oldIndex && newIndex < prevIndex) {
+    return newIndex + 1;
+  } else {
+    return newIndex;
+  }
+}
 function getLockPixelOffset(_ref) {
@@ -244,3 +260,2 @@ var lockOffset = _ref.lockOffset,
 }
-
 function getLockPixelOffsets(_ref2) {
@@ -286,2 +301,11 @@ var height = _ref2.height,
 }
+var KEYCODE = {
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40
+};
 var NodeType = {
@@ -296,3 +320,26 @@ Anchor: 'A',
 };
+function cloneNode(node) {
+  var selector = 'input, textarea, select, canvas, [contenteditable]';
+  var fields = node.querySelectorAll(selector);
+  var clonedNode = node.cloneNode(true);
 
+  var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector));
+
+  clonedFields.forEach(function (field, i) {
+    if (field.type !== 'file') {
+      field.value = fields[i].value;
+    }
+
+    if (field.type === 'radio' && field.name) {
+      field.name = "__sortableClone__".concat(field.name);
+    }
+
+    if (field.tagName === NodeType.Canvas) {
+      var destCtx = field.getContext('2d');
+      destCtx.drawImage(fields[i], 0, 0);
+    }
+  });
+  return clonedNode;
+}
+
 function sortableHandle(WrappedComponent) {
@@ -437,8 +484,14 @@ var _class, _temp;
 function defaultShouldCancelStart(event) {
-  var disabledElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
+  var interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
 
-  if (disabledElements.indexOf(event.target.tagName) !== -1) {
+  if (interactiveElements.indexOf(event.target.tagName) !== -1) {
     return true;
   }
 
+  if (closest(event.target, function (el) {
+    return el.contentEditable === 'true';
+  })) {
+    return true;
+  }
+
   return false;
@@ -457,2 +510,3 @@ }
   hideSortableGhost: PropTypes.bool,
+  keyboardSortingTransitionDuration: PropTypes.number,
   lockAxis: PropTypes.string,
@@ -653,3 +707,12 @@ lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
                 _this.offsetEdge = getEdgeOffset(_node, _this.container);
-                _this.initialOffset = getPosition(event);
+
+                if (_isKeySorting) {
+                  _this.initialOffset = getPosition(_objectSpread({}, event, {
+                    pageX: _this.boundingClientRect.left,
+                    pageY: _this.boundingClientRect.top
+                  }));
+                } else {
+                  _this.initialOffset = getPosition(event);
+                }
+
                 _this.initialScroll = {
@@ -663,20 +726,3 @@ left: _this.scrollContainer.scrollLeft,
                 };
-
-                var fields = _node.querySelectorAll('input, textarea, select, canvas');
-
-                var clonedNode = _node.cloneNode(true);
-
-                var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select, canvas'));
-
-                clonedFields.forEach(function (field, i) {
-                  if (field.type !== 'file' && fields[index]) {
-                    field.value = fields[i].value;
-                  }
-
-                  if (field.tagName === NodeType.Canvas) {
-                    var destCtx = field.getContext('2d');
-                    destCtx.drawImage(fields[i], 0, 0);
-                  }
-                });
-                _this.helper = _this.helperContainer.appendChild(clonedNode);
+                _this.helper = _this.helperContainer.appendChild(cloneNode(_node));
                 setInlineStyles(_this.helper, {
@@ -692,2 +738,6 @@ boxSizing: 'border-box',
 
+                if (_isKeySorting) {
+                  _this.helper.focus();
+                }
+
                 if (_hideSortableGhost) {
@@ -704,10 +754,36 @@ _this.sortableGhost = _node;
 
-                if (_this.axis.x) {
-                  _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
-                  _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
-                }
+                if (_isKeySorting) {
+                  var _ref = _useWindowAsScrollContainer ? {
+                    top: 0,
+                    left: 0,
+                    width: _this.contentWindow.innerWidth,
+                    height: _this.contentWindow.innerHeight
+                  } : _this.containerBoundingRect,
+                      containerTop = _ref.top,
+                      containerLeft = _ref.left,
+                      containerWidth = _ref.width,
+                      containerHeight = _ref.height;
 
-                if (_this.axis.y) {
-                  _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
-                  _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
+                  var containerBottom = containerTop + containerHeight;
+                  var containerRight = containerLeft + containerWidth;
+
+                  if (_this.axis.x) {
+                    _this.minTranslate.x = containerLeft - _this.boundingClientRect.left;
+                    _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width);
+                  }
+
+                  if (_this.axis.y) {
+                    _this.minTranslate.y = containerTop - _this.boundingClientRect.top;
+                    _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height);
+                  }
+                } else {
+                  if (_this.axis.x) {
+                    _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
+                    _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
+                  }
+
+                  if (_this.axis.y) {
+                    _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
+                    _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
+                  }
                 }
@@ -722,9 +798,18 @@
                 _this.listenerNode = event.touches ? _node : _this.contentWindow;
-                events.move.forEach(function (eventName) {
-                  return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
-                });
-                events.end.forEach(function (eventName) {
-                  return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
-                });
 
+                if (_isKeySorting) {
+                  _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true);
+
+                  _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true);
+
+                  _this.listenerNode.addEventListener('keydown', _this.handleKeyDown);
+                } else {
+                  events.move.forEach(function (eventName) {
+                    return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
+                  });
+                  events.end.forEach(function (eventName) {
+                    return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
+                  });
+                }
+
                 _this.setState({
@@ -737,7 +822,12 @@ sorting: true,
                   _onSortStart({
+                    node: _node,
+                    index: index,
                     collection: _collection,
-                    index: index,
-                    node: _node
+                    isKeySorting: _isKeySorting
                   }, event);
                 }
+
+                if (_isKeySorting) {
+                  _this.keyMove(0);
+                }
               };
@@ -755,2 +845,3 @@
                   _collection = active.collection;
+              var _isKeySorting = _this.manager.isKeySorting;
 
@@ -790,4 +881,7 @@ var _temp8 = function () {
         var onSortMove = _this.props.onSortMove;
-        event.preventDefault();
 
+        if (typeof event.preventDefault === 'function') {
+          event.preventDefault();
+        }
+
         _this.updateHelperPosition(event);
@@ -808,12 +902,22 @@
             onSortEnd = _this$props4.onSortEnd;
-        var collection = _this.manager.active.collection;
+        var _this$manager = _this.manager,
+            collection = _this$manager.active.collection,
+            isKeySorting = _this$manager.isKeySorting;
         var nodes = _this.manager.refs[collection];
 
         if (_this.listenerNode) {
-          events.move.forEach(function (eventName) {
-            return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
-          });
-          events.end.forEach(function (eventName) {
-            return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
-          });
+          if (isKeySorting) {
+            _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true);
+
+            _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true);
+
+            _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown);
+          } else {
+            events.move.forEach(function (eventName) {
+              return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
+            });
+            events.end.forEach(function (eventName) {
+              return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
+            });
+          }
         }
@@ -834,4 +938,6 @@
           _node2.edgeOffset = null;
+          _node2.boundingClientRect = null;
           setTranslate3d(el, null);
           setTransitionDuration(el, null);
+          _node2.translate = null;
         }
@@ -842,2 +948,3 @@
         _this.manager.active = null;
+        _this.manager.isKeySorting = false;
 
@@ -853,3 +960,4 @@ _this.setState({
             newIndex: _this.newIndex,
-            oldIndex: _this.index
+            oldIndex: _this.index,
+            isKeySorting: isKeySorting
           }, event);
@@ -863,2 +971,3 @@ }
         var disableAutoscroll = _this.props.disableAutoscroll;
+        var isKeySorting = _this.manager.isKeySorting;
 
@@ -869,2 +978,25 @@ if (disableAutoscroll) {
 
+        if (isKeySorting) {
+          var translate = _objectSpread({}, _this.translate);
+
+          var scrollX = 0;
+          var scrollY = 0;
+
+          if (_this.axis.x) {
+            translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x));
+            scrollX = _this.translate.x - translate.x;
+          }
+
+          if (_this.axis.y) {
+            translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y));
+            scrollY = _this.translate.y - translate.y;
+          }
+
+          _this.translate = translate;
+          setTranslate3d(_this.helper, _this.translate);
+          _this.scrollContainer.scrollLeft += scrollX;
+          _this.scrollContainer.scrollTop += scrollY;
+          return;
+        }
+
         _this.autoScroller.update({
@@ -886,2 +1018,126 @@ height: _this.height,
 
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (event) {
+        var keyCode = event.keyCode;
+        var shouldCancelStart = _this.props.shouldCancelStart;
+
+        if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (keyCode !== KEYCODE.SPACE || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) {
+          return;
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        switch (keyCode) {
+          case KEYCODE.SPACE:
+            if (_this.manager.active) {
+              _this.keyDrop(event);
+            } else {
+              _this.keyLift(event);
+            }
+
+            break;
+
+          case KEYCODE.DOWN:
+          case KEYCODE.RIGHT:
+            _this.keyMove(1);
+
+            break;
+
+          case KEYCODE.UP:
+          case KEYCODE.LEFT:
+            _this.keyMove(-1);
+
+            break;
+
+          case KEYCODE.ESC:
+            _this.newIndex = _this.manager.active.index;
+
+            _this.keyDrop(event);
+
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keyLift", function (event) {
+        var target = event.target;
+        var node = closest(target, function (el) {
+          return el.sortableInfo != null;
+        });
+        var _node$sortableInfo2 = node.sortableInfo,
+            index = _node$sortableInfo2.index,
+            collection = _node$sortableInfo2.collection;
+        _this.initialFocusedNode = target;
+        _this.manager.isKeySorting = true;
+        _this.manager.active = {
+          index: index,
+          collection: collection
+        };
+
+        _this.handlePress(event);
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keyMove", function (shift) {
+        var nodes = _this.manager.getOrderedRefs();
+
+        var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index;
+        var newIndex = _this.newIndex + shift;
+        var prevIndex = _this.newIndex;
+
+        if (newIndex < 0 || newIndex > lastIndex) {
+          return;
+        }
+
+        _this.prevIndex = prevIndex;
+        _this.newIndex = newIndex;
+        var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index);
+        var target = nodes.find(function (_ref2) {
+          var node = _ref2.node;
+          return node.sortableInfo.index === targetIndex;
+        });
+        var targetNode = target.node;
+        var scrollDelta = _this.containerScrollDelta;
+        var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta);
+        var targetTranslate = target.translate || {
+          x: 0,
+          y: 0
+        };
+        var targetPosition = {
+          top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top,
+          left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left
+        };
+        var shouldAdjustForSize = prevIndex < newIndex;
+        var sizeAdjustment = {
+          x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0,
+          y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0
+        };
+
+        _this.handleSortMove({
+          pageX: targetPosition.left + sizeAdjustment.x,
+          pageY: targetPosition.top + sizeAdjustment.y,
+          ignoreTransition: shift === 0
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keyDrop", function (event) {
+        _this.handleSortEnd(event);
+
+        if (_this.initialFocusedNode) {
+          _this.initialFocusedNode.focus();
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyEnd", function (event) {
+        if (_this.manager.active) {
+          _this.keyDrop(event);
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isValidSortingTarget", function (event) {
+        var useDragHandle = _this.props.useDragHandle;
+        var target = event.target;
+        var node = closest(target, function (el) {
+          return el.sortableInfo != null;
+        });
+        return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo);
+      });
+
       validateProps(props);
@@ -924,2 +1180,4 @@ _this.state = {};
           });
+
+          _this2.container.addEventListener('keydown', _this2.handleKeyDown);
         });
@@ -932,9 +1190,16 @@ }
 
-        if (this.container) {
-          Object.keys(this.events).forEach(function (key) {
-            return events[key].forEach(function (eventName) {
-              return _this3.container.removeEventListener(eventName, _this3.events[key]);
-            });
+        if (this.helper && this.helper.parentNode) {
+          this.helper.parentNode.removeChild(this.helper);
+        }
+
+        if (!this.container) {
+          return;
+        }
+
+        Object.keys(this.events).forEach(function (key) {
+          return events[key].forEach(function (eventName) {
+            return _this3.container.removeEventListener(eventName, _this3.events[key]);
           });
-        }
+        });
+        this.container.removeEventListener('keydown', this.handleKeyDown);
       }
@@ -947,3 +1212,8 @@ }, {
             lockOffset = _this$props5.lockOffset,
-            lockToContainerEdges = _this$props5.lockToContainerEdges;
+            lockToContainerEdges = _this$props5.lockToContainerEdges,
+            transitionDuration = _this$props5.transitionDuration,
+            _this$props5$keyboard = _this$props5.keyboardSortingTransitionDuration,
+            keyboardSortingTransitionDuration = _this$props5$keyboard === void 0 ? transitionDuration : _this$props5$keyboard;
+        var isKeySorting = this.manager.isKeySorting;
+        var ignoreTransition = event.ignoreTransition;
         var offset = getPosition(event);
@@ -986,2 +1256,6 @@ var translate = {
 
+        if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) {
+          setTransitionDuration(this.helper, keyboardSortingTransitionDuration);
+        }
+
         setTranslate3d(this.helper, translate);
@@ -1003,2 +1277,3 @@ }
         };
+        var isKeySorting = this.manager.isKeySorting;
         var prevIndex = this.newIndex;
@@ -1016,2 +1291,4 @@ this.newIndex = null;
           };
+          var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex;
+          var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex;
           var translate = {
@@ -1026,2 +1303,6 @@ x: 0,
             nodes[i].edgeOffset = edgeOffset;
+
+            if (isKeySorting) {
+              nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta);
+            }
           }
@@ -1034,2 +1315,6 @@
             nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container);
+
+            if (isKeySorting) {
+              nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta);
+            }
           }
@@ -1055,3 +1340,3 @@
             if (this.axis.y) {
-              if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
+              if (mustShiftForward || index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
                 translate.x = this.width + this.marginOffset.x;
@@ -1069,3 +1354,3 @@
                 }
-              } else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
+              } else if (mustShiftBackward || index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
                 translate.x = -(this.width + this.marginOffset.x);
@@ -1083,6 +1368,6 @@
             } else {
-              if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
+              if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
                 translate.x = -(this.width + this.marginOffset.x);
                 this.newIndex = index;
-              } else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
+              } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
                 translate.x = this.width + this.marginOffset.x;
@@ -1096,6 +1381,6 @@
           } else if (this.axis.y) {
-            if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
+            if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
               translate.y = -(this.height + this.marginOffset.y);
               this.newIndex = index;
-            } else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
+            } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
               translate.y = this.height + this.marginOffset.y;
@@ -1110,2 +1395,3 @@
           setTranslate3d(_node3, translate);
+          nodes[i].translate = translate;
         }
@@ -1117,2 +1403,6 @@
 
+        if (isKeySorting) {
+          this.newIndex = prevIndex;
+        }
+
         if (onSortOver && this.newIndex !== prevIndex) {
@@ -1119,0 +1409,0 @@ onSortOver({

dist/react-sortable-hoc.js

@@ -9,3 +9,3 @@ 'use strict';
 var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
@@ -22,2 +22,3 @@ var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
 var invariant = _interopDefault(require('invariant'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 
@@ -178,2 +179,9 @@ var Manager = function () {
 }
+function getScrollAdjustedBoundingClientRect(node, scrollDelta) {
+  var boundingClientRect = node.getBoundingClientRect();
+  return {
+    top: boundingClientRect.top + scrollDelta.top,
+    left: boundingClientRect.left + scrollDelta.left
+  };
+}
 function getPosition(event) {
@@ -221,3 +229,11 @@ if (event.touches && event.touches.length) {
 }
-
+function getTargetIndex(newIndex, prevIndex, oldIndex) {
+  if (newIndex < oldIndex && newIndex > prevIndex) {
+    return newIndex - 1;
+  } else if (newIndex > oldIndex && newIndex < prevIndex) {
+    return newIndex + 1;
+  } else {
+    return newIndex;
+  }
+}
 function getLockPixelOffset(_ref) {
@@ -251,3 +267,2 @@ var lockOffset = _ref.lockOffset,
 }
-
 function getLockPixelOffsets(_ref2) {
@@ -293,2 +308,11 @@ var height = _ref2.height,
 }
+var KEYCODE = {
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40
+};
 var NodeType = {
@@ -303,3 +327,26 @@ Anchor: 'A',
 };
+function cloneNode(node) {
+  var selector = 'input, textarea, select, canvas, [contenteditable]';
+  var fields = node.querySelectorAll(selector);
+  var clonedNode = node.cloneNode(true);
 
+  var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector));
+
+  clonedFields.forEach(function (field, i) {
+    if (field.type !== 'file') {
+      field.value = fields[i].value;
+    }
+
+    if (field.type === 'radio' && field.name) {
+      field.name = "__sortableClone__".concat(field.name);
+    }
+
+    if (field.tagName === NodeType.Canvas) {
+      var destCtx = field.getContext('2d');
+      destCtx.drawImage(fields[i], 0, 0);
+    }
+  });
+  return clonedNode;
+}
+
 function sortableHandle(WrappedComponent) {
@@ -444,8 +491,14 @@ var _class, _temp;
 function defaultShouldCancelStart(event) {
-  var disabledElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
+  var interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
 
-  if (disabledElements.indexOf(event.target.tagName) !== -1) {
+  if (interactiveElements.indexOf(event.target.tagName) !== -1) {
     return true;
   }
 
+  if (closest(event.target, function (el) {
+    return el.contentEditable === 'true';
+  })) {
+    return true;
+  }
+
   return false;
@@ -464,2 +517,3 @@ }
   hideSortableGhost: PropTypes.bool,
+  keyboardSortingTransitionDuration: PropTypes.number,
   lockAxis: PropTypes.string,
@@ -660,3 +714,12 @@ lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
                 _this.offsetEdge = getEdgeOffset(_node, _this.container);
-                _this.initialOffset = getPosition(event);
+
+                if (_isKeySorting) {
+                  _this.initialOffset = getPosition(_objectSpread({}, event, {
+                    pageX: _this.boundingClientRect.left,
+                    pageY: _this.boundingClientRect.top
+                  }));
+                } else {
+                  _this.initialOffset = getPosition(event);
+                }
+
                 _this.initialScroll = {
@@ -670,20 +733,3 @@ left: _this.scrollContainer.scrollLeft,
                 };
-
-                var fields = _node.querySelectorAll('input, textarea, select, canvas');
-
-                var clonedNode = _node.cloneNode(true);
-
-                var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select, canvas'));
-
-                clonedFields.forEach(function (field, i) {
-                  if (field.type !== 'file' && fields[index]) {
-                    field.value = fields[i].value;
-                  }
-
-                  if (field.tagName === NodeType.Canvas) {
-                    var destCtx = field.getContext('2d');
-                    destCtx.drawImage(fields[i], 0, 0);
-                  }
-                });
-                _this.helper = _this.helperContainer.appendChild(clonedNode);
+                _this.helper = _this.helperContainer.appendChild(cloneNode(_node));
                 setInlineStyles(_this.helper, {
@@ -699,2 +745,6 @@ boxSizing: 'border-box',
 
+                if (_isKeySorting) {
+                  _this.helper.focus();
+                }
+
                 if (_hideSortableGhost) {
@@ -711,10 +761,36 @@ _this.sortableGhost = _node;
 
-                if (_this.axis.x) {
-                  _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
-                  _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
-                }
+                if (_isKeySorting) {
+                  var _ref = _useWindowAsScrollContainer ? {
+                    top: 0,
+                    left: 0,
+                    width: _this.contentWindow.innerWidth,
+                    height: _this.contentWindow.innerHeight
+                  } : _this.containerBoundingRect,
+                      containerTop = _ref.top,
+                      containerLeft = _ref.left,
+                      containerWidth = _ref.width,
+                      containerHeight = _ref.height;
 
-                if (_this.axis.y) {
-                  _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
-                  _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
+                  var containerBottom = containerTop + containerHeight;
+                  var containerRight = containerLeft + containerWidth;
+
+                  if (_this.axis.x) {
+                    _this.minTranslate.x = containerLeft - _this.boundingClientRect.left;
+                    _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width);
+                  }
+
+                  if (_this.axis.y) {
+                    _this.minTranslate.y = containerTop - _this.boundingClientRect.top;
+                    _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height);
+                  }
+                } else {
+                  if (_this.axis.x) {
+                    _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
+                    _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
+                  }
+
+                  if (_this.axis.y) {
+                    _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
+                    _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
+                  }
                 }
@@ -729,9 +805,18 @@
                 _this.listenerNode = event.touches ? _node : _this.contentWindow;
-                events.move.forEach(function (eventName) {
-                  return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
-                });
-                events.end.forEach(function (eventName) {
-                  return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
-                });
 
+                if (_isKeySorting) {
+                  _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true);
+
+                  _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true);
+
+                  _this.listenerNode.addEventListener('keydown', _this.handleKeyDown);
+                } else {
+                  events.move.forEach(function (eventName) {
+                    return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
+                  });
+                  events.end.forEach(function (eventName) {
+                    return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
+                  });
+                }
+
                 _this.setState({
@@ -744,7 +829,12 @@ sorting: true,
                   _onSortStart({
+                    node: _node,
+                    index: index,
                     collection: _collection,
-                    index: index,
-                    node: _node
+                    isKeySorting: _isKeySorting
                   }, event);
                 }
+
+                if (_isKeySorting) {
+                  _this.keyMove(0);
+                }
               };
@@ -762,2 +852,3 @@
                   _collection = active.collection;
+              var _isKeySorting = _this.manager.isKeySorting;
 
@@ -797,4 +888,7 @@ var _temp8 = function () {
         var onSortMove = _this.props.onSortMove;
-        event.preventDefault();
 
+        if (typeof event.preventDefault === 'function') {
+          event.preventDefault();
+        }
+
         _this.updateHelperPosition(event);
@@ -815,12 +909,22 @@
             onSortEnd = _this$props4.onSortEnd;
-        var collection = _this.manager.active.collection;
+        var _this$manager = _this.manager,
+            collection = _this$manager.active.collection,
+            isKeySorting = _this$manager.isKeySorting;
         var nodes = _this.manager.refs[collection];
 
         if (_this.listenerNode) {
-          events.move.forEach(function (eventName) {
-            return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
-          });
-          events.end.forEach(function (eventName) {
-            return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
-          });
+          if (isKeySorting) {
+            _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true);
+
+            _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true);
+
+            _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown);
+          } else {
+            events.move.forEach(function (eventName) {
+              return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
+            });
+            events.end.forEach(function (eventName) {
+              return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
+            });
+          }
         }
@@ -841,4 +945,6 @@
           _node2.edgeOffset = null;
+          _node2.boundingClientRect = null;
           setTranslate3d(el, null);
           setTransitionDuration(el, null);
+          _node2.translate = null;
         }
@@ -849,2 +955,3 @@
         _this.manager.active = null;
+        _this.manager.isKeySorting = false;
 
@@ -860,3 +967,4 @@ _this.setState({
             newIndex: _this.newIndex,
-            oldIndex: _this.index
+            oldIndex: _this.index,
+            isKeySorting: isKeySorting
           }, event);
@@ -870,2 +978,3 @@ }
         var disableAutoscroll = _this.props.disableAutoscroll;
+        var isKeySorting = _this.manager.isKeySorting;
 
@@ -876,2 +985,25 @@ if (disableAutoscroll) {
 
+        if (isKeySorting) {
+          var translate = _objectSpread({}, _this.translate);
+
+          var scrollX = 0;
+          var scrollY = 0;
+
+          if (_this.axis.x) {
+            translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x));
+            scrollX = _this.translate.x - translate.x;
+          }
+
+          if (_this.axis.y) {
+            translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y));
+            scrollY = _this.translate.y - translate.y;
+          }
+
+          _this.translate = translate;
+          setTranslate3d(_this.helper, _this.translate);
+          _this.scrollContainer.scrollLeft += scrollX;
+          _this.scrollContainer.scrollTop += scrollY;
+          return;
+        }
+
         _this.autoScroller.update({
@@ -893,2 +1025,126 @@ height: _this.height,
 
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyDown", function (event) {
+        var keyCode = event.keyCode;
+        var shouldCancelStart = _this.props.shouldCancelStart;
+
+        if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (keyCode !== KEYCODE.SPACE || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) {
+          return;
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        switch (keyCode) {
+          case KEYCODE.SPACE:
+            if (_this.manager.active) {
+              _this.keyDrop(event);
+            } else {
+              _this.keyLift(event);
+            }
+
+            break;
+
+          case KEYCODE.DOWN:
+          case KEYCODE.RIGHT:
+            _this.keyMove(1);
+
+            break;
+
+          case KEYCODE.UP:
+          case KEYCODE.LEFT:
+            _this.keyMove(-1);
+
+            break;
+
+          case KEYCODE.ESC:
+            _this.newIndex = _this.manager.active.index;
+
+            _this.keyDrop(event);
+
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keyLift", function (event) {
+        var target = event.target;
+        var node = closest(target, function (el) {
+          return el.sortableInfo != null;
+        });
+        var _node$sortableInfo2 = node.sortableInfo,
+            index = _node$sortableInfo2.index,
+            collection = _node$sortableInfo2.collection;
+        _this.initialFocusedNode = target;
+        _this.manager.isKeySorting = true;
+        _this.manager.active = {
+          index: index,
+          collection: collection
+        };
+
+        _this.handlePress(event);
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keyMove", function (shift) {
+        var nodes = _this.manager.getOrderedRefs();
+
+        var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index;
+        var newIndex = _this.newIndex + shift;
+        var prevIndex = _this.newIndex;
+
+        if (newIndex < 0 || newIndex > lastIndex) {
+          return;
+        }
+
+        _this.prevIndex = prevIndex;
+        _this.newIndex = newIndex;
+        var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index);
+        var target = nodes.find(function (_ref2) {
+          var node = _ref2.node;
+          return node.sortableInfo.index === targetIndex;
+        });
+        var targetNode = target.node;
+        var scrollDelta = _this.containerScrollDelta;
+        var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta);
+        var targetTranslate = target.translate || {
+          x: 0,
+          y: 0
+        };
+        var targetPosition = {
+          top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top,
+          left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left
+        };
+        var shouldAdjustForSize = prevIndex < newIndex;
+        var sizeAdjustment = {
+          x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0,
+          y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0
+        };
+
+        _this.handleSortMove({
+          pageX: targetPosition.left + sizeAdjustment.x,
+          pageY: targetPosition.top + sizeAdjustment.y,
+          ignoreTransition: shift === 0
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "keyDrop", function (event) {
+        _this.handleSortEnd(event);
+
+        if (_this.initialFocusedNode) {
+          _this.initialFocusedNode.focus();
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleKeyEnd", function (event) {
+        if (_this.manager.active) {
+          _this.keyDrop(event);
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isValidSortingTarget", function (event) {
+        var useDragHandle = _this.props.useDragHandle;
+        var target = event.target;
+        var node = closest(target, function (el) {
+          return el.sortableInfo != null;
+        });
+        return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo);
+      });
+
       validateProps(props);
@@ -931,2 +1187,4 @@ _this.state = {};
           });
+
+          _this2.container.addEventListener('keydown', _this2.handleKeyDown);
         });
@@ -939,9 +1197,16 @@ }
 
-        if (this.container) {
-          Object.keys(this.events).forEach(function (key) {
-            return events[key].forEach(function (eventName) {
-              return _this3.container.removeEventListener(eventName, _this3.events[key]);
-            });
+        if (this.helper && this.helper.parentNode) {
+          this.helper.parentNode.removeChild(this.helper);
+        }
+
+        if (!this.container) {
+          return;
+        }
+
+        Object.keys(this.events).forEach(function (key) {
+          return events[key].forEach(function (eventName) {
+            return _this3.container.removeEventListener(eventName, _this3.events[key]);
           });
-        }
+        });
+        this.container.removeEventListener('keydown', this.handleKeyDown);
       }
@@ -954,3 +1219,8 @@ }, {
             lockOffset = _this$props5.lockOffset,
-            lockToContainerEdges = _this$props5.lockToContainerEdges;
+            lockToContainerEdges = _this$props5.lockToContainerEdges,
+            transitionDuration = _this$props5.transitionDuration,
+            _this$props5$keyboard = _this$props5.keyboardSortingTransitionDuration,
+            keyboardSortingTransitionDuration = _this$props5$keyboard === void 0 ? transitionDuration : _this$props5$keyboard;
+        var isKeySorting = this.manager.isKeySorting;
+        var ignoreTransition = event.ignoreTransition;
         var offset = getPosition(event);
@@ -993,2 +1263,6 @@ var translate = {
 
+        if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) {
+          setTransitionDuration(this.helper, keyboardSortingTransitionDuration);
+        }
+
         setTranslate3d(this.helper, translate);
@@ -1010,2 +1284,3 @@ }
         };
+        var isKeySorting = this.manager.isKeySorting;
         var prevIndex = this.newIndex;
@@ -1023,2 +1298,4 @@ this.newIndex = null;
           };
+          var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex;
+          var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex;
           var translate = {
@@ -1033,2 +1310,6 @@ x: 0,
             nodes[i].edgeOffset = edgeOffset;
+
+            if (isKeySorting) {
+              nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta);
+            }
           }
@@ -1041,2 +1322,6 @@
             nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container);
+
+            if (isKeySorting) {
+              nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta);
+            }
           }
@@ -1062,3 +1347,3 @@
             if (this.axis.y) {
-              if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
+              if (mustShiftForward || index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
                 translate.x = this.width + this.marginOffset.x;
@@ -1076,3 +1361,3 @@
                 }
-              } else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
+              } else if (mustShiftBackward || index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
                 translate.x = -(this.width + this.marginOffset.x);
@@ -1090,6 +1375,6 @@
             } else {
-              if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
+              if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
                 translate.x = -(this.width + this.marginOffset.x);
                 this.newIndex = index;
-              } else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
+              } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
                 translate.x = this.width + this.marginOffset.x;
@@ -1103,6 +1388,6 @@
           } else if (this.axis.y) {
-            if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
+            if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
               translate.y = -(this.height + this.marginOffset.y);
               this.newIndex = index;
-            } else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
+            } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
               translate.y = this.height + this.marginOffset.y;
@@ -1117,2 +1402,3 @@
           setTranslate3d(_node3, translate);
+          nodes[i].translate = translate;
         }
@@ -1124,2 +1410,6 @@
 
+        if (isKeySorting) {
+          this.newIndex = prevIndex;
+        }
+
         if (onSortOver && this.newIndex !== prevIndex) {
@@ -1126,0 +1416,0 @@ onSortOver({

dist/react-sortable-hoc.umd.js

@@ -81,31 +81,39 @@ (function (global, factory) {
 
-	function _arrayWithoutHoles(arr) {
-	  if (Array.isArray(arr)) {
-	    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
-	      arr2[i] = arr[i];
-	    }
+	function _defineProperty(obj, key, value) {
+	  if (key in obj) {
+	    Object.defineProperty(obj, key, {
+	      value: value,
+	      enumerable: true,
+	      configurable: true,
+	      writable: true
+	    });
+	  } else {
+	    obj[key] = value;
+	  }
 
-	    return arr2;
-	  }
+	  return obj;
 	}
 
-	var arrayWithoutHoles = _arrayWithoutHoles;
+	var defineProperty = _defineProperty;
 
-	function _iterableToArray(iter) {
-	  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-	}
+	function _objectSpread(target) {
+	  for (var i = 1; i < arguments.length; i++) {
+	    var source = arguments[i] != null ? arguments[i] : {};
+	    var ownKeys = Object.keys(source);
 
-	var iterableToArray = _iterableToArray;
+	    if (typeof Object.getOwnPropertySymbols === 'function') {
+	      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+	        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+	      }));
+	    }
 
-	function _nonIterableSpread() {
-	  throw new TypeError("Invalid attempt to spread non-iterable instance");
-	}
+	    ownKeys.forEach(function (key) {
+	      defineProperty(target, key, source[key]);
+	    });
+	  }
 
-	var nonIterableSpread = _nonIterableSpread;
-
-	function _toConsumableArray(arr) {
-	  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
+	  return target;
 	}
 
-	var toConsumableArray = _toConsumableArray;
+	var objectSpread = _objectSpread;
 
@@ -219,19 +227,2 @@ function _classCallCheck(instance, Constructor) {
 
-	function _defineProperty(obj, key, value) {
-	  if (key in obj) {
-	    Object.defineProperty(obj, key, {
-	      value: value,
-	      enumerable: true,
-	      configurable: true,
-	      writable: true
-	    });
-	  } else {
-	    obj[key] = value;
-	  }
-
-	  return obj;
-	}
-
-	var defineProperty = _defineProperty;
-
 	/**
@@ -336,2 +327,32 @@ * Copyright (c) 2013-present, Facebook, Inc.
 
+	function _arrayWithoutHoles(arr) {
+	  if (Array.isArray(arr)) {
+	    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
+	      arr2[i] = arr[i];
+	    }
+
+	    return arr2;
+	  }
+	}
+
+	var arrayWithoutHoles = _arrayWithoutHoles;
+
+	function _iterableToArray(iter) {
+	  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+	}
+
+	var iterableToArray = _iterableToArray;
+
+	function _nonIterableSpread() {
+	  throw new TypeError("Invalid attempt to spread non-iterable instance");
+	}
+
+	var nonIterableSpread = _nonIterableSpread;
+
+	function _toConsumableArray(arr) {
+	  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
+	}
+
+	var toConsumableArray = _toConsumableArray;
+
 	function arrayMove(array, from, to) {
@@ -429,2 +450,9 @@ {
 	}
+	function getScrollAdjustedBoundingClientRect(node, scrollDelta) {
+	  var boundingClientRect = node.getBoundingClientRect();
+	  return {
+	    top: boundingClientRect.top + scrollDelta.top,
+	    left: boundingClientRect.left + scrollDelta.left
+	  };
+	}
 	function getPosition(event) {
@@ -472,3 +500,11 @@ if (event.touches && event.touches.length) {
 	}
-
+	function getTargetIndex(newIndex, prevIndex, oldIndex) {
+	  if (newIndex < oldIndex && newIndex > prevIndex) {
+	    return newIndex - 1;
+	  } else if (newIndex > oldIndex && newIndex < prevIndex) {
+	    return newIndex + 1;
+	  } else {
+	    return newIndex;
+	  }
+	}
 	function getLockPixelOffset(_ref) {
@@ -502,3 +538,2 @@ var lockOffset = _ref.lockOffset,
 	}
-
 	function getLockPixelOffsets(_ref2) {
@@ -544,2 +579,11 @@ var height = _ref2.height,
 	}
+	var KEYCODE = {
+	  TAB: 9,
+	  ESC: 27,
+	  SPACE: 32,
+	  LEFT: 37,
+	  UP: 38,
+	  RIGHT: 39,
+	  DOWN: 40
+	};
 	var NodeType = {
@@ -554,3 +598,26 @@ Anchor: 'A',
 	};
+	function cloneNode(node) {
+	  var selector = 'input, textarea, select, canvas, [contenteditable]';
+	  var fields = node.querySelectorAll(selector);
+	  var clonedNode = node.cloneNode(true);
 
+	  var clonedFields = toConsumableArray(clonedNode.querySelectorAll(selector));
+
+	  clonedFields.forEach(function (field, i) {
+	    if (field.type !== 'file') {
+	      field.value = fields[i].value;
+	    }
+
+	    if (field.type === 'radio' && field.name) {
+	      field.name = "__sortableClone__".concat(field.name);
+	    }
+
+	    if (field.tagName === NodeType.Canvas) {
+	      var destCtx = field.getContext('2d');
+	      destCtx.drawImage(fields[i], 0, 0);
+	    }
+	  });
+	  return clonedNode;
+	}
+
 	function sortableHandle(WrappedComponent) {
@@ -695,8 +762,14 @@ var _class, _temp;
 	function defaultShouldCancelStart(event) {
-	  var disabledElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
+	  var interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
 
-	  if (disabledElements.indexOf(event.target.tagName) !== -1) {
+	  if (interactiveElements.indexOf(event.target.tagName) !== -1) {
 	    return true;
 	  }
 
+	  if (closest(event.target, function (el) {
+	    return el.contentEditable === 'true';
+	  })) {
+	    return true;
+	  }
+
 	  return false;
@@ -715,2 +788,3 @@ }
 	  hideSortableGhost: PropTypes.bool,
+	  keyboardSortingTransitionDuration: PropTypes.number,
 	  lockAxis: PropTypes.string,
@@ -911,3 +985,12 @@ lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
 	                _this.offsetEdge = getEdgeOffset(_node, _this.container);
-	                _this.initialOffset = getPosition(event);
+
+	                if (_isKeySorting) {
+	                  _this.initialOffset = getPosition(objectSpread({}, event, {
+	                    pageX: _this.boundingClientRect.left,
+	                    pageY: _this.boundingClientRect.top
+	                  }));
+	                } else {
+	                  _this.initialOffset = getPosition(event);
+	                }
+
 	                _this.initialScroll = {
@@ -921,20 +1004,3 @@ left: _this.scrollContainer.scrollLeft,
 	                };
-
-	                var fields = _node.querySelectorAll('input, textarea, select, canvas');
-
-	                var clonedNode = _node.cloneNode(true);
-
-	                var clonedFields = toConsumableArray(clonedNode.querySelectorAll('input, textarea, select, canvas'));
-
-	                clonedFields.forEach(function (field, i) {
-	                  if (field.type !== 'file' && fields[index]) {
-	                    field.value = fields[i].value;
-	                  }
-
-	                  if (field.tagName === NodeType.Canvas) {
-	                    var destCtx = field.getContext('2d');
-	                    destCtx.drawImage(fields[i], 0, 0);
-	                  }
-	                });
-	                _this.helper = _this.helperContainer.appendChild(clonedNode);
+	                _this.helper = _this.helperContainer.appendChild(cloneNode(_node));
 	                setInlineStyles(_this.helper, {
@@ -950,2 +1016,6 @@ boxSizing: 'border-box',
 
+	                if (_isKeySorting) {
+	                  _this.helper.focus();
+	                }
+
 	                if (_hideSortableGhost) {
@@ -962,10 +1032,36 @@ _this.sortableGhost = _node;
 
-	                if (_this.axis.x) {
-	                  _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
-	                  _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
-	                }
+	                if (_isKeySorting) {
+	                  var _ref = _useWindowAsScrollContainer ? {
+	                    top: 0,
+	                    left: 0,
+	                    width: _this.contentWindow.innerWidth,
+	                    height: _this.contentWindow.innerHeight
+	                  } : _this.containerBoundingRect,
+	                      containerTop = _ref.top,
+	                      containerLeft = _ref.left,
+	                      containerWidth = _ref.width,
+	                      containerHeight = _ref.height;
 
-	                if (_this.axis.y) {
-	                  _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
-	                  _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
+	                  var containerBottom = containerTop + containerHeight;
+	                  var containerRight = containerLeft + containerWidth;
+
+	                  if (_this.axis.x) {
+	                    _this.minTranslate.x = containerLeft - _this.boundingClientRect.left;
+	                    _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width);
+	                  }
+
+	                  if (_this.axis.y) {
+	                    _this.minTranslate.y = containerTop - _this.boundingClientRect.top;
+	                    _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height);
+	                  }
+	                } else {
+	                  if (_this.axis.x) {
+	                    _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
+	                    _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
+	                  }
+
+	                  if (_this.axis.y) {
+	                    _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
+	                    _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
+	                  }
 	                }
@@ -980,9 +1076,18 @@
 	                _this.listenerNode = event.touches ? _node : _this.contentWindow;
-	                events.move.forEach(function (eventName) {
-	                  return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
-	                });
-	                events.end.forEach(function (eventName) {
-	                  return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
-	                });
 
+	                if (_isKeySorting) {
+	                  _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true);
+
+	                  _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true);
+
+	                  _this.listenerNode.addEventListener('keydown', _this.handleKeyDown);
+	                } else {
+	                  events.move.forEach(function (eventName) {
+	                    return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
+	                  });
+	                  events.end.forEach(function (eventName) {
+	                    return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
+	                  });
+	                }
+
 	                _this.setState({
@@ -995,7 +1100,12 @@ sorting: true,
 	                  _onSortStart({
+	                    node: _node,
+	                    index: index,
 	                    collection: _collection,
-	                    index: index,
-	                    node: _node
+	                    isKeySorting: _isKeySorting
 	                  }, event);
 	                }
+
+	                if (_isKeySorting) {
+	                  _this.keyMove(0);
+	                }
 	              };
@@ -1013,2 +1123,3 @@
 	                  _collection = active.collection;
+	              var _isKeySorting = _this.manager.isKeySorting;
 
@@ -1048,4 +1159,7 @@ var _temp8 = function () {
 	        var onSortMove = _this.props.onSortMove;
-	        event.preventDefault();
 
+	        if (typeof event.preventDefault === 'function') {
+	          event.preventDefault();
+	        }
+
 	        _this.updateHelperPosition(event);
@@ -1066,12 +1180,22 @@
 	            onSortEnd = _this$props4.onSortEnd;
-	        var collection = _this.manager.active.collection;
+	        var _this$manager = _this.manager,
+	            collection = _this$manager.active.collection,
+	            isKeySorting = _this$manager.isKeySorting;
 	        var nodes = _this.manager.refs[collection];
 
 	        if (_this.listenerNode) {
-	          events.move.forEach(function (eventName) {
-	            return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
-	          });
-	          events.end.forEach(function (eventName) {
-	            return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
-	          });
+	          if (isKeySorting) {
+	            _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true);
+
+	            _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true);
+
+	            _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown);
+	          } else {
+	            events.move.forEach(function (eventName) {
+	              return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
+	            });
+	            events.end.forEach(function (eventName) {
+	              return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
+	            });
+	          }
 	        }
@@ -1092,4 +1216,6 @@
 	          _node2.edgeOffset = null;
+	          _node2.boundingClientRect = null;
 	          setTranslate3d(el, null);
 	          setTransitionDuration(el, null);
+	          _node2.translate = null;
 	        }
@@ -1100,2 +1226,3 @@
 	        _this.manager.active = null;
+	        _this.manager.isKeySorting = false;
 
@@ -1111,3 +1238,4 @@ _this.setState({
 	            newIndex: _this.newIndex,
-	            oldIndex: _this.index
+	            oldIndex: _this.index,
+	            isKeySorting: isKeySorting
 	          }, event);
@@ -1121,2 +1249,3 @@ }
 	        var disableAutoscroll = _this.props.disableAutoscroll;
+	        var isKeySorting = _this.manager.isKeySorting;
 
@@ -1127,2 +1256,25 @@ if (disableAutoscroll) {
 
+	        if (isKeySorting) {
+	          var translate = objectSpread({}, _this.translate);
+
+	          var scrollX = 0;
+	          var scrollY = 0;
+
+	          if (_this.axis.x) {
+	            translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x));
+	            scrollX = _this.translate.x - translate.x;
+	          }
+
+	          if (_this.axis.y) {
+	            translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y));
+	            scrollY = _this.translate.y - translate.y;
+	          }
+
+	          _this.translate = translate;
+	          setTranslate3d(_this.helper, _this.translate);
+	          _this.scrollContainer.scrollLeft += scrollX;
+	          _this.scrollContainer.scrollTop += scrollY;
+	          return;
+	        }
+
 	        _this.autoScroller.update({
@@ -1144,2 +1296,126 @@ height: _this.height,
 
+	      defineProperty(assertThisInitialized(assertThisInitialized(_this)), "handleKeyDown", function (event) {
+	        var keyCode = event.keyCode;
+	        var shouldCancelStart = _this.props.shouldCancelStart;
+
+	        if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (keyCode !== KEYCODE.SPACE || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) {
+	          return;
+	        }
+
+	        event.stopPropagation();
+	        event.preventDefault();
+
+	        switch (keyCode) {
+	          case KEYCODE.SPACE:
+	            if (_this.manager.active) {
+	              _this.keyDrop(event);
+	            } else {
+	              _this.keyLift(event);
+	            }
+
+	            break;
+
+	          case KEYCODE.DOWN:
+	          case KEYCODE.RIGHT:
+	            _this.keyMove(1);
+
+	            break;
+
+	          case KEYCODE.UP:
+	          case KEYCODE.LEFT:
+	            _this.keyMove(-1);
+
+	            break;
+
+	          case KEYCODE.ESC:
+	            _this.newIndex = _this.manager.active.index;
+
+	            _this.keyDrop(event);
+
+	        }
+	      });
+
+	      defineProperty(assertThisInitialized(assertThisInitialized(_this)), "keyLift", function (event) {
+	        var target = event.target;
+	        var node = closest(target, function (el) {
+	          return el.sortableInfo != null;
+	        });
+	        var _node$sortableInfo2 = node.sortableInfo,
+	            index = _node$sortableInfo2.index,
+	            collection = _node$sortableInfo2.collection;
+	        _this.initialFocusedNode = target;
+	        _this.manager.isKeySorting = true;
+	        _this.manager.active = {
+	          index: index,
+	          collection: collection
+	        };
+
+	        _this.handlePress(event);
+	      });
+
+	      defineProperty(assertThisInitialized(assertThisInitialized(_this)), "keyMove", function (shift) {
+	        var nodes = _this.manager.getOrderedRefs();
+
+	        var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index;
+	        var newIndex = _this.newIndex + shift;
+	        var prevIndex = _this.newIndex;
+
+	        if (newIndex < 0 || newIndex > lastIndex) {
+	          return;
+	        }
+
+	        _this.prevIndex = prevIndex;
+	        _this.newIndex = newIndex;
+	        var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index);
+	        var target = nodes.find(function (_ref2) {
+	          var node = _ref2.node;
+	          return node.sortableInfo.index === targetIndex;
+	        });
+	        var targetNode = target.node;
+	        var scrollDelta = _this.containerScrollDelta;
+	        var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta);
+	        var targetTranslate = target.translate || {
+	          x: 0,
+	          y: 0
+	        };
+	        var targetPosition = {
+	          top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top,
+	          left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left
+	        };
+	        var shouldAdjustForSize = prevIndex < newIndex;
+	        var sizeAdjustment = {
+	          x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0,
+	          y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0
+	        };
+
+	        _this.handleSortMove({
+	          pageX: targetPosition.left + sizeAdjustment.x,
+	          pageY: targetPosition.top + sizeAdjustment.y,
+	          ignoreTransition: shift === 0
+	        });
+	      });
+
+	      defineProperty(assertThisInitialized(assertThisInitialized(_this)), "keyDrop", function (event) {
+	        _this.handleSortEnd(event);
+
+	        if (_this.initialFocusedNode) {
+	          _this.initialFocusedNode.focus();
+	        }
+	      });
+
+	      defineProperty(assertThisInitialized(assertThisInitialized(_this)), "handleKeyEnd", function (event) {
+	        if (_this.manager.active) {
+	          _this.keyDrop(event);
+	        }
+	      });
+
+	      defineProperty(assertThisInitialized(assertThisInitialized(_this)), "isValidSortingTarget", function (event) {
+	        var useDragHandle = _this.props.useDragHandle;
+	        var target = event.target;
+	        var node = closest(target, function (el) {
+	          return el.sortableInfo != null;
+	        });
+	        return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo);
+	      });
+
 	      validateProps(props);
@@ -1182,2 +1458,4 @@ _this.state = {};
 	          });
+
+	          _this2.container.addEventListener('keydown', _this2.handleKeyDown);
 	        });
@@ -1190,9 +1468,16 @@ }
 
-	        if (this.container) {
-	          Object.keys(this.events).forEach(function (key) {
-	            return events[key].forEach(function (eventName) {
-	              return _this3.container.removeEventListener(eventName, _this3.events[key]);
-	            });
+	        if (this.helper && this.helper.parentNode) {
+	          this.helper.parentNode.removeChild(this.helper);
+	        }
+
+	        if (!this.container) {
+	          return;
+	        }
+
+	        Object.keys(this.events).forEach(function (key) {
+	          return events[key].forEach(function (eventName) {
+	            return _this3.container.removeEventListener(eventName, _this3.events[key]);
 	          });
-	        }
+	        });
+	        this.container.removeEventListener('keydown', this.handleKeyDown);
 	      }
@@ -1205,3 +1490,8 @@ }, {
 	            lockOffset = _this$props5.lockOffset,
-	            lockToContainerEdges = _this$props5.lockToContainerEdges;
+	            lockToContainerEdges = _this$props5.lockToContainerEdges,
+	            transitionDuration = _this$props5.transitionDuration,
+	            _this$props5$keyboard = _this$props5.keyboardSortingTransitionDuration,
+	            keyboardSortingTransitionDuration = _this$props5$keyboard === void 0 ? transitionDuration : _this$props5$keyboard;
+	        var isKeySorting = this.manager.isKeySorting;
+	        var ignoreTransition = event.ignoreTransition;
 	        var offset = getPosition(event);
@@ -1244,2 +1534,6 @@ var translate = {
 
+	        if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) {
+	          setTransitionDuration(this.helper, keyboardSortingTransitionDuration);
+	        }
+
 	        setTranslate3d(this.helper, translate);
@@ -1261,2 +1555,3 @@ }
 	        };
+	        var isKeySorting = this.manager.isKeySorting;
 	        var prevIndex = this.newIndex;
@@ -1274,2 +1569,4 @@ this.newIndex = null;
 	          };
+	          var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex;
+	          var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex;
 	          var translate = {
@@ -1284,2 +1581,6 @@ x: 0,
 	            nodes[i].edgeOffset = edgeOffset;
+
+	            if (isKeySorting) {
+	              nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta);
+	            }
 	          }
@@ -1292,2 +1593,6 @@
 	            nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container);
+
+	            if (isKeySorting) {
+	              nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta);
+	            }
 	          }
@@ -1313,3 +1618,3 @@
 	            if (this.axis.y) {
-	              if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
+	              if (mustShiftForward || index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
 	                translate.x = this.width + this.marginOffset.x;
@@ -1327,3 +1632,3 @@
 	                }
-	              } else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
+	              } else if (mustShiftBackward || index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
 	                translate.x = -(this.width + this.marginOffset.x);
@@ -1341,6 +1646,6 @@
 	            } else {
-	              if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
+	              if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
 	                translate.x = -(this.width + this.marginOffset.x);
 	                this.newIndex = index;
-	              } else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
+	              } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
 	                translate.x = this.width + this.marginOffset.x;
@@ -1354,6 +1659,6 @@
 	          } else if (this.axis.y) {
-	            if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
+	            if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
 	              translate.y = -(this.height + this.marginOffset.y);
 	              this.newIndex = index;
-	            } else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
+	            } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
 	              translate.y = this.height + this.marginOffset.y;
@@ -1368,2 +1673,3 @@
 	          setTranslate3d(_node3, translate);
+	          nodes[i].translate = translate;
 	        }
@@ -1375,2 +1681,6 @@
 
+	        if (isKeySorting) {
+	          this.newIndex = prevIndex;
+	        }
+
 	        if (onSortOver && this.newIndex !== prevIndex) {
@@ -1377,0 +1687,0 @@ onSortOver({

dist/react-sortable-hoc.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-dom"],t):t((e=e||self).SortableHOC={},e.React,e.PropTypes,e.ReactDOM)}(this,function(e,r,i,a){"use strict";function t(e,t){return e(t={exports:{}},t.exports),t.exports}i=i&&i.hasOwnProperty("default")?i.default:i;var s=t(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}e.exports=t});var n=function(e){if(Array.isArray(e))return e};var o=function(e,t){var n=[],o=!0,r=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){r=!0,i=e}finally{try{o||null==s.return||s.return()}finally{if(r)throw i}}return n};var l=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var y=function(e,t){return n(e)||o(e,t)||l()};var c=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}};var u=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)};var f=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var m=function(e){return c(e)||u(e)||f()};var h=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};function d(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var p=function(e,t,n){return t&&d(e.prototype,t),n&&d(e,n),e},g=t(function(t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=o=function(e){return n(e)}:t.exports=o=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},o(e)}t.exports=o});var x=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e};var b=function(e,t){return!t||"object"!==g(t)&&"function"!=typeof t?x(e):t},w=t(function(t){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(e)}t.exports=n}),v=t(function(n){function o(e,t){return n.exports=o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},o(e,t)}n.exports=o});var S=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)};var O=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},T=function(e,t,n,o,r,i,a,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,i,a,s],u=0;(l=new Error(t.replace(/%s/g,function(){return c[u++]}))).name="Invariant Violation"}throw l.framesToPop=1,l}},C=function(){function e(){h(this,e),O(this,"refs",{})}return p(e,[{key:"add",value:function(e,t){this.refs[e]||(this.refs[e]=[]),this.refs[e].push(t)}},{key:"remove",value:function(e,t){var n=this.getIndex(e,t);-1!==n&&this.refs[e].splice(n,1)}},{key:"isActive",value:function(){return this.active}},{key:"getActive",value:function(){var t=this;return this.refs[this.active.collection].find(function(e){return e.node.sortableInfo.index==t.active.index})}},{key:"getIndex",value:function(e,t){return this.refs[e].indexOf(t)}},{key:"getOrderedRefs",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.active.collection;return this.refs[e].sort(I)}}]),e}();function I(e,t){return e.node.sortableInfo.index-t.node.sortableInfo.index}function k(n){for(var e=arguments.length,o=new Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return Object.keys(n).reduce(function(e,t){return-1===o.indexOf(t)&&(e[t]=n[t]),e},{})}var E={end:["touchend","touchcancel","mouseup"],move:["touchmove","mousemove"],start:["touchstart","mousedown"]},A=function(){if("undefined"==typeof window||"undefined"==typeof document)return"";var e=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],t=(Array.prototype.slice.call(e).join("").match(/-(moz|webkit|ms)-/)||""===e.OLink&&["","o"])[1];switch(t){case"ms":return"ms";default:return t&&t.length?t[0].toUpperCase()+t.substr(1):""}}();function R(t,n){Object.keys(n).forEach(function(e){t.style[e]=n[e]})}function D(e,t){e.style["".concat(A,"Transform")]=null==t?"":"translate3d(".concat(t.x,"px,").concat(t.y,"px,0)")}function M(e,t){e.style["".concat(A,"TransitionDuration")]=null==t?"":"".concat(t,"ms")}function N(e,t){for(;e;){if(t(e))return e;e=e.parentNode}return null}function W(e,t,n){return Math.max(e,Math.min(n,t))}function j(e){return"px"===e.substr(-2)?parseFloat(e):0}function P(e,t){var n=t.displayName||t.name;return n?"".concat(e,"(").concat(n,")"):e}function H(e){return e.touches&&e.touches.length?{x:e.touches[0].pageX,y:e.touches[0].pageY}:e.changedTouches&&e.changedTouches.length?{x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY}:{x:e.pageX,y:e.pageY}}function L(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{left:0,top:0};if(e){var o={left:n.left+e.offsetLeft,top:n.top+e.offsetTop};return e.parentNode===t?o:L(e.parentNode,t,o)}}function _(e){var t=e.lockOffset,n=e.width,o=e.height,r=t,i=t,a="px";if("string"==typeof t){var s=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t);T(null!==s,'lockOffset value should be a number or a string of a number followed by "px" or "%". Given %s',t),r=parseFloat(t),i=parseFloat(t),a=s[1]}return T(isFinite(r)&&isFinite(i),"lockOffset value should be a finite. Given %s",t),"%"===a&&(r=r*n/100,i=i*o/100),{x:r,y:i}}function B(e){return e instanceof HTMLElement?(t=e,n=window.getComputedStyle(t),o=/(auto|scroll)/,["overflow","overflowX","overflowY"].find(function(e){return o.test(n[e])})?e:B(e.parentNode)):null;var t,n,o}var G="A",U="BUTTON",q="CANVAS",X="INPUT",Y="OPTION",F="TEXTAREA",z="SELECT";function V(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return h(this,t),b(this,w(t).apply(this,arguments))}return S(t,e),p(t,[{key:"componentDidMount",value:function(){a.findDOMNode(this).sortableHandle=!0}},{key:"getWrappedInstance",value:function(){return T(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},this.props))}}]),t}(r.Component),O(e,"displayName",P("sortableHandle",n)),t}function $(e){return null!=e.sortableHandle}var J=function(){function n(e,t){h(this,n),this.container=e,this.onScrollCallback=t}return p(n,[{key:"clear",value:function(){clearInterval(this.interval),this.interval=null}},{key:"update",value:function(e){var t=this,n=e.translate,o=e.minTranslate,r=e.maxTranslate,i=e.width,a=e.height,s={x:0,y:0},l={x:1,y:1},c=10,u=10,f=this.container,h=f.scrollTop,d=f.scrollLeft,p=f.scrollHeight,y=f.scrollWidth,g=0===h,v=p-h-f.clientHeight==0,m=0===d,x=y-d-f.clientWidth==0;n.y>=r.y-a/2&&!v?(s.y=1,l.y=u*Math.abs((r.y-a/2-n.y)/a)):n.x>=r.x-i/2&&!x?(s.x=1,l.x=c*Math.abs((r.x-i/2-n.x)/i)):n.y<=o.y+a/2&&!g?(s.y=-1,l.y=u*Math.abs((n.y-a/2-o.y)/a)):n.x<=o.x+i/2&&!m&&(s.x=-1,l.x=c*Math.abs((n.x-i/2-o.x)/i)),this.interval&&(this.clear(),this.isAutoScrolling=!1),0===s.x&&0===s.y||(this.interval=setInterval(function(){t.isAutoScrolling=!0;var e={left:l.x*s.x,top:l.y*s.y};t.container.scrollTop+=e.top,t.container.scrollLeft+=e.left,t.onScrollCallback(e)},5))}}]),n}();var K={axis:i.oneOf(["x","y","xy"]),contentWindow:i.any,disableAutoscroll:i.bool,distance:i.number,getContainer:i.func,getHelperDimensions:i.func,helperClass:i.string,helperContainer:i.oneOfType([i.func,"undefined"==typeof HTMLElement?i.any:i.instanceOf(HTMLElement)]),hideSortableGhost:i.bool,lockAxis:i.string,lockOffset:i.oneOfType([i.number,i.string,i.arrayOf(i.oneOfType([i.number,i.string]))]),lockToContainerEdges:i.bool,onSortEnd:i.func,onSortMove:i.func,onSortOver:i.func,onSortStart:i.func,pressDelay:i.number,pressThreshold:i.number,shouldCancelStart:i.func,transitionDuration:i.number,updateBeforeSortStart:i.func,useDragHandle:i.bool,useWindowAsScrollContainer:i.bool},Q={axis:"y",disableAutoscroll:!1,distance:0,getHelperDimensions:function(e){var t=e.node;return{height:t.offsetHeight,width:t.offsetWidth}},hideSortableGhost:!0,lockOffset:"50%",lockToContainerEdges:!1,pressDelay:0,pressThreshold:5,shouldCancelStart:function(e){return-1!==[X,F,z,Y,U].indexOf(e.target.tagName)},transitionDuration:300,useWindowAsScrollContainer:!1},Z=Object.keys(K);function ee(t){var e,n,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return n=e=function(e){function n(e){var v,t;return h(this,n),v=b(this,w(n).call(this,e)),O(x(x(v)),"handleStart",function(e){var t=v.props,n=t.distance,o=t.shouldCancelStart;if(2!==e.button&&!o(e)){v.touched=!0,v.position=H(e);var r,i=N(e.target,function(e){return null!=e.sortableInfo});if(i&&i.sortableInfo&&v.nodeIsChild(i)&&!v.state.sorting){var a=v.props.useDragHandle,s=i.sortableInfo,l=s.index,c=s.collection;if(s.disabled)return;if(a&&!N(e.target,$))return;v.manager.active={collection:c,index:l},(r=e).touches&&r.touches.length||r.changedTouches&&r.changedTouches.length||e.target.tagName!==G||e.preventDefault(),n||(0===v.props.pressDelay?v.handlePress(e):v.pressTimer=setTimeout(function(){return v.handlePress(e)},v.props.pressDelay))}}}),O(x(x(v)),"nodeIsChild",function(e){return e.sortableInfo.manager===v.manager}),O(x(x(v)),"handleMove",function(e){var t=v.props,n=t.distance,o=t.pressThreshold;if(!v.state.sorting&&v.touched&&!v._awaitingUpdateBeforeSortStart){var r=H(e),i={x:v.position.x-r.x,y:v.position.y-r.y},a=Math.abs(i.x)+Math.abs(i.y);v.delta=i,n||o&&!(o<=a)?n&&n<=a&&v.manager.isActive()&&v.handlePress(e):(clearTimeout(v.cancelTimer),v.cancelTimer=setTimeout(v.cancel,0))}}),O(x(x(v)),"handleEnd",function(){v.touched=!1,v.cancel()}),O(x(x(v)),"cancel",function(){var e=v.props.distance;v.state.sorting||(e||clearTimeout(v.pressTimer),v.manager.active=null)}),O(x(x(v)),"handlePress",function(g){try{var r=v.manager.getActive(),e=function(){if(r){var e=function(){var e,t,n=p.sortableInfo.index,o=(e=p,{bottom:j((t=window.getComputedStyle(e)).marginBottom),left:j(t.marginLeft),right:j(t.marginRight),top:j(t.marginTop)}),r=v.scrollContainer.getBoundingClientRect(),i=c({collection:y,index:n,node:p});v.node=p,v.margin=o,v.width=i.width,v.height=i.height,v.marginOffset={x:v.margin.left+v.margin.right,y:Math.max(v.margin.top,v.margin.bottom)},v.boundingClientRect=p.getBoundingClientRect(),v.containerBoundingRect=r,v.index=n,v.newIndex=n,v.axis={x:0<=l.indexOf("x"),y:0<=l.indexOf("y")},v.offsetEdge=L(p,v.container),v.initialOffset=H(g),v.initialScroll={left:v.scrollContainer.scrollLeft,top:v.scrollContainer.scrollTop},v.initialWindowScroll={left:window.pageXOffset,top:window.pageYOffset};var a=p.querySelectorAll("input, textarea, select, canvas"),s=p.cloneNode(!0);m(s.querySelectorAll("input, textarea, select, canvas")).forEach(function(e,t){("file"!==e.type&&a[n]&&(e.value=a[t].value),e.tagName===q)&&e.getContext("2d").drawImage(a[t],0,0)}),v.helper=v.helperContainer.appendChild(s),R(v.helper,{boxSizing:"border-box",height:"".concat(v.height,"px"),left:"".concat(v.boundingClientRect.left-o.left,"px"),pointerEvents:"none",position:"fixed",top:"".concat(v.boundingClientRect.top-o.top,"px"),width:"".concat(v.width,"px")}),f&&R(v.sortableGhost=p,{opacity:0,visibility:"hidden"}),v.minTranslate={},v.maxTranslate={},v.axis.x&&(v.minTranslate.x=(d?0:r.left)-v.boundingClientRect.left-v.width/2,v.maxTranslate.x=(d?v.contentWindow.innerWidth:r.left+r.width)-v.boundingClientRect.left-v.width/2),v.axis.y&&(v.minTranslate.y=(d?0:r.top)-v.boundingClientRect.top-v.height/2,v.maxTranslate.y=(d?v.contentWindow.innerHeight:r.top+r.height)-v.boundingClientRect.top-v.height/2),u&&u.split(" ").forEach(function(e){return v.helper.classList.add(e)}),v.listenerNode=g.touches?p:v.contentWindow,E.move.forEach(function(e){return v.listenerNode.addEventListener(e,v.handleSortMove,!1)}),E.end.forEach(function(e){return v.listenerNode.addEventListener(e,v.handleSortEnd,!1)}),v.setState({sorting:!0,sortingIndex:n}),h&&h({collection:y,index:n,node:p},g)},t=v.props,l=t.axis,c=t.getHelperDimensions,u=t.helperClass,f=t.hideSortableGhost,n=t.updateBeforeSortStart,h=t.onSortStart,d=t.useWindowAsScrollContainer,p=r.node,y=r.collection,o=function(){if("function"==typeof n){v._awaitingUpdateBeforeSortStart=!0;var e=function(e,t){try{var n=e()}catch(e){return t(!0,e)}return n&&n.then?n.then(t.bind(null,!1),t.bind(null,!0)):t(!1,value)}(function(){var e=p.sortableInfo.index;return Promise.resolve(n({collection:y,index:e,node:p},g)).then(function(){})},function(e,t){if(v._awaitingUpdateBeforeSortStart=!1,e)throw t;return t});if(e&&e.then)return e.then(function(){})}}();return o&&o.then?o.then(e):e()}}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}),O(x(x(v)),"handleSortMove",function(e){var t=v.props.onSortMove;e.preventDefault(),v.updateHelperPosition(e),v.animateNodes(),v.autoscroll(),t&&t(e)}),O(x(x(v)),"handleSortEnd",function(e){var t=v.props,n=t.hideSortableGhost,o=t.onSortEnd,r=v.manager.active.collection,i=v.manager.refs[r];v.listenerNode&&(E.move.forEach(function(e){return v.listenerNode.removeEventListener(e,v.handleSortMove)}),E.end.forEach(function(e){return v.listenerNode.removeEventListener(e,v.handleSortEnd)})),v.helper.parentNode.removeChild(v.helper),n&&v.sortableGhost&&R(v.sortableGhost,{opacity:"",visibility:""});for(var a=0,s=i.length;a<s;a++){var l=i[a],c=l.node;D(c,l.edgeOffset=null),M(c,null)}v.autoScroller.clear(),v.manager.active=null,v.setState({sorting:!1,sortingIndex:null}),"function"==typeof o&&o({collection:r,newIndex:v.newIndex,oldIndex:v.index},e),v.touched=!1}),O(x(x(v)),"autoscroll",function(){v.props.disableAutoscroll||v.autoScroller.update({height:v.height,maxTranslate:v.maxTranslate,minTranslate:v.minTranslate,translate:v.translate,width:v.width})}),O(x(x(v)),"onAutoScroll",function(e){v.translate.x+=e.left,v.translate.y+=e.top,v.animateNodes()}),T(!((t=e).distance&&t.pressDelay),"Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time."),v.state={},v.manager=new C,v.events={end:v.handleEnd,move:v.handleMove,start:v.handleStart},v}return S(n,e),p(n,[{key:"getChildContext",value:function(){return{manager:this.manager}}},{key:"componentDidMount",value:function(){var n=this,o=this.props.useWindowAsScrollContainer,e=this.getContainer();Promise.resolve(e).then(function(e){n.container=e,n.document=n.container.ownerDocument||document;var t=n.props.contentWindow||n.document.defaultView||window;n.contentWindow="function"==typeof t?t():t,n.scrollContainer=o?n.document.scrollingElement||n.document.documentElement:B(n.container)||n.container,n.autoScroller=new J(n.scrollContainer,n.onAutoScroll),Object.keys(n.events).forEach(function(t){return E[t].forEach(function(e){return n.container.addEventListener(e,n.events[t],!1)})})})}},{key:"componentWillUnmount",value:function(){var n=this;this.container&&Object.keys(this.events).forEach(function(t){return E[t].forEach(function(e){return n.container.removeEventListener(e,n.events[t])})})}},{key:"updateHelperPosition",value:function(e){var t=this.props,n=t.lockAxis,o=t.lockOffset,r=t.lockToContainerEdges,i=H(e),a={x:i.x-this.initialOffset.x,y:i.y-this.initialOffset.y};if(a.y-=window.pageYOffset-this.initialWindowScroll.top,a.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=a,r){var s=function(e){var t=e.height,n=e.width,o=e.lockOffset,r=Array.isArray(o)?o:[o,o];T(2===r.length,"lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given %s",o);var i=y(r,2),a=i[0],s=i[1];return[_({height:t,lockOffset:a,width:n}),_({height:t,lockOffset:s,width:n})]}({height:this.height,lockOffset:o,width:this.width}),l=y(s,2),c=l[0],u=l[1],f=this.width/2-c.x,h=this.height/2-c.y,d=this.width/2-u.x,p=this.height/2-u.y;a.x=W(this.minTranslate.x+f,this.maxTranslate.x-d,a.x),a.y=W(this.minTranslate.y+h,this.maxTranslate.y-p,a.y)}"x"===n?a.y=0:"y"===n&&(a.x=0),D(this.helper,a)}},{key:"animateNodes",value:function(){var e=this.props,t=e.transitionDuration,n=e.hideSortableGhost,o=e.onSortOver,r=this.containerScrollDelta,i=this.windowScrollDelta,a=this.manager.getOrderedRefs(),s=this.offsetEdge.left+this.translate.x+r.left,l=this.offsetEdge.top+this.translate.y+r.top,c=this.newIndex;this.newIndex=null;for(var u=0,f=a.length;u<f;u++){var h=a[u].node,d=h.sortableInfo.index,p=h.offsetWidth,y=h.offsetHeight,g=this.height>y?y/2:this.height/2,v=this.width>p?p/2:this.width/2,m={x:0,y:0},x=a[u].edgeOffset;x||(x=L(h,this.container),a[u].edgeOffset=x);var b=u<a.length-1&&a[u+1],w=0<u&&a[u-1];b&&!b.edgeOffset&&(b.edgeOffset=L(b.node,this.container)),d!==this.index?(t&&M(h,t),this.axis.x?this.axis.y?d<this.index&&(s+i.left-v<=x.left&&l+i.top<=x.top+g||l+i.top+g<=x.top)?(m.x=this.width+this.marginOffset.x,x.left+m.x>this.containerBoundingRect.width-v&&b&&(m.x=b.edgeOffset.left-x.left,m.y=b.edgeOffset.top-x.top),null===this.newIndex&&(this.newIndex=d)):d>this.index&&(s+i.left+v>=x.left&&l+i.top+g>=x.top||l+i.top+g>=x.top+y)&&(m.x=-(this.width+this.marginOffset.x),x.left+m.x<this.containerBoundingRect.left+v&&w&&(m.x=w.edgeOffset.left-x.left,m.y=w.edgeOffset.top-x.top),this.newIndex=d):d>this.index&&s+i.left+v>=x.left?(m.x=-(this.width+this.marginOffset.x),this.newIndex=d):d<this.index&&s+i.left<=x.left+v&&(m.x=this.width+this.marginOffset.x,null==this.newIndex&&(this.newIndex=d)):this.axis.y&&(d>this.index&&l+i.top+g>=x.top?(m.y=-(this.height+this.marginOffset.y),this.newIndex=d):d<this.index&&l+i.top<=x.top+g&&(m.y=this.height+this.marginOffset.y,null==this.newIndex&&(this.newIndex=d))),D(h,m)):n&&R(this.sortableGhost=h,{opacity:0,visibility:"hidden"})}null==this.newIndex&&(this.newIndex=this.index),o&&this.newIndex!==c&&o({collection:this.manager.active.collection,index:this.index,newIndex:this.newIndex,oldIndex:c})}},{key:"getWrappedInstance",value:function(){return T(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call"),this.refs.wrappedInstance}},{key:"getContainer",value:function(){var e=this.props.getContainer;return"function"!=typeof e?a.findDOMNode(this):e(o.withRef?this.getWrappedInstance():void 0)}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(t,s({ref:e},k(this.props,Z)))}},{key:"helperContainer",get:function(){var e=this.props.helperContainer;return"function"==typeof e?e():this.props.helperContainer||this.document.body}},{key:"containerScrollDelta",get:function(){return this.props.useWindowAsScrollContainer?{left:0,top:0}:{left:this.scrollContainer.scrollLeft-this.initialScroll.left,top:this.scrollContainer.scrollTop-this.initialScroll.top}}},{key:"windowScrollDelta",get:function(){return{left:this.contentWindow.pageXOffset-this.initialWindowScroll.left,top:this.contentWindow.pageYOffset-this.initialWindowScroll.top}}}]),n}(r.Component),O(e,"displayName",P("sortableList",t)),O(e,"defaultProps",Q),O(e,"propTypes",K),O(e,"childContextTypes",{manager:i.object.isRequired}),n}var te={index:i.number.isRequired,collection:i.oneOfType([i.number,i.string]),disabled:i.bool},ne=Object.keys(te);function oe(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return h(this,t),b(this,w(t).apply(this,arguments))}return S(t,e),p(t,[{key:"componentDidMount",value:function(){this.register()}},{key:"componentDidUpdate",value:function(e){this.node&&(e.index!==this.props.index&&(this.node.sortableInfo.index=this.props.index),e.disabled!==this.props.disabled&&(this.node.sortableInfo.disabled=this.props.disabled)),e.collection!==this.props.collection&&(this.unregister(e.collection),this.register())}},{key:"componentWillUnmount",value:function(){this.unregister()}},{key:"register",value:function(){var e=this.props,t=e.collection,n=e.disabled,o=e.index,r=a.findDOMNode(this);r.sortableInfo={collection:t,disabled:n,index:o,manager:this.context.manager},this.node=r,this.ref={node:r},this.context.manager.add(t,this.ref)}},{key:"unregister",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.props.collection;this.context.manager.remove(e,this.ref)}},{key:"getWrappedInstance",value:function(){return T(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},k(this.props,ne)))}}]),t}(r.Component),O(e,"displayName",P("sortableElement",n)),O(e,"contextTypes",{manager:i.object.isRequired}),O(e,"propTypes",te),O(e,"defaultProps",{collection:0}),t}e.SortableContainer=ee,e.sortableContainer=ee,e.SortableElement=oe,e.sortableElement=oe,e.SortableHandle=V,e.sortableHandle=V,e.arrayMove=function(e,t,n){return(e=e.slice()).splice(n<0?e.length+n:n,0,e.splice(t,1)[0]),e},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-dom"],t):t((e=e||self).SortableHOC={},e.React,e.PropTypes,e.ReactDOM)}(this,function(e,r,i,a){"use strict";function t(e,t){return e(t={exports:{}},t.exports),t.exports}i=i&&i.hasOwnProperty("default")?i.default:i;var s=t(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}e.exports=t});var n=function(e){if(Array.isArray(e))return e};var o=function(e,t){var n=[],o=!0,r=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){r=!0,i=e}finally{try{o||null==s.return||s.return()}finally{if(r)throw i}}return n};var l=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var b=function(e,t){return n(e)||o(e,t)||l()};var c=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e};var I=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(e){c(t,e,n[e])})}return t};var u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};function f(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var d=function(e,t,n){return t&&f(e.prototype,t),n&&f(e,n),e},h=t(function(t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=o=function(e){return n(e)}:t.exports=o=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},o(e)}t.exports=o});var p=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e};var y=function(e,t){return!t||"object"!==h(t)&&"function"!=typeof t?p(e):t},g=t(function(t){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(e)}t.exports=n}),v=t(function(n){function o(e,t){return n.exports=o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},o(e,t)}n.exports=o});var m=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)},w=function(e,t,n,o,r,i,a,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,i,a,s],u=0;(l=new Error(t.replace(/%s/g,function(){return c[u++]}))).name="Invariant Violation"}throw l.framesToPop=1,l}},x=function(){function e(){u(this,e),c(this,"refs",{})}return d(e,[{key:"add",value:function(e,t){this.refs[e]||(this.refs[e]=[]),this.refs[e].push(t)}},{key:"remove",value:function(e,t){var n=this.getIndex(e,t);-1!==n&&this.refs[e].splice(n,1)}},{key:"isActive",value:function(){return this.active}},{key:"getActive",value:function(){var t=this;return this.refs[this.active.collection].find(function(e){return e.node.sortableInfo.index==t.active.index})}},{key:"getIndex",value:function(e,t){return this.refs[e].indexOf(t)}},{key:"getOrderedRefs",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.active.collection;return this.refs[e].sort(S)}}]),e}();function S(e,t){return e.node.sortableInfo.index-t.node.sortableInfo.index}var O=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}};var T=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)};var C=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var E=function(e){return O(e)||T(e)||C()};function k(n){for(var e=arguments.length,o=new Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return Object.keys(n).reduce(function(e,t){return-1===o.indexOf(t)&&(e[t]=n[t]),e},{})}var R={end:["touchend","touchcancel","mouseup"],move:["touchmove","mousemove"],start:["touchstart","mousedown"]},D=function(){if("undefined"==typeof window||"undefined"==typeof document)return"";var e=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],t=(Array.prototype.slice.call(e).join("").match(/-(moz|webkit|ms)-/)||""===e.OLink&&["","o"])[1];switch(t){case"ms":return"ms";default:return t&&t.length?t[0].toUpperCase()+t.substr(1):""}}();function N(t,n){Object.keys(n).forEach(function(e){t.style[e]=n[e]})}function A(e,t){e.style["".concat(D,"Transform")]=null==t?"":"translate3d(".concat(t.x,"px,").concat(t.y,"px,0)")}function M(e,t){e.style["".concat(D,"TransitionDuration")]=null==t?"":"".concat(t,"ms")}function W(e,t){for(;e;){if(t(e))return e;e=e.parentNode}return null}function L(e,t,n){return Math.max(e,Math.min(n,t))}function P(e){return"px"===e.substr(-2)?parseFloat(e):0}function j(e,t){var n=t.displayName||t.name;return n?"".concat(e,"(").concat(n,")"):e}function H(e,t){var n=e.getBoundingClientRect();return{top:n.top+t.top,left:n.left+t.left}}function K(e){return e.touches&&e.touches.length?{x:e.touches[0].pageX,y:e.touches[0].pageY}:e.changedTouches&&e.changedTouches.length?{x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY}:{x:e.pageX,y:e.pageY}}function _(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{left:0,top:0};if(e){var o={left:n.left+e.offsetLeft,top:n.top+e.offsetTop};return e.parentNode===t?o:_(e.parentNode,t,o)}}function B(e){var t=e.lockOffset,n=e.width,o=e.height,r=t,i=t,a="px";if("string"==typeof t){var s=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t);w(null!==s,'lockOffset value should be a number or a string of a number followed by "px" or "%". Given %s',t),r=parseFloat(t),i=parseFloat(t),a=s[1]}return w(isFinite(r)&&isFinite(i),"lockOffset value should be a finite. Given %s",t),"%"===a&&(r=r*n/100,i=i*o/100),{x:r,y:i}}function G(e){return e instanceof HTMLElement?(t=e,n=window.getComputedStyle(t),o=/(auto|scroll)/,["overflow","overflowX","overflowY"].find(function(e){return o.test(n[e])})?e:G(e.parentNode)):null;var t,n,o}var X=27,U=32,Y=37,q=38,F=39,V=40,z={Anchor:"A",Button:"BUTTON",Canvas:"CANVAS",Input:"INPUT",Option:"OPTION",Textarea:"TEXTAREA",Select:"SELECT"};function $(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return u(this,t),y(this,g(t).apply(this,arguments))}return m(t,e),d(t,[{key:"componentDidMount",value:function(){a.findDOMNode(this).sortableHandle=!0}},{key:"getWrappedInstance",value:function(){return w(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},this.props))}}]),t}(r.Component),c(e,"displayName",j("sortableHandle",n)),t}function J(e){return null!=e.sortableHandle}var Q=function(){function n(e,t){u(this,n),this.container=e,this.onScrollCallback=t}return d(n,[{key:"clear",value:function(){clearInterval(this.interval),this.interval=null}},{key:"update",value:function(e){var t=this,n=e.translate,o=e.minTranslate,r=e.maxTranslate,i=e.width,a=e.height,s={x:0,y:0},l={x:1,y:1},c=10,u=10,f=this.container,d=f.scrollTop,h=f.scrollLeft,p=f.scrollHeight,y=f.scrollWidth,g=0===d,v=p-d-f.clientHeight==0,m=0===h,x=y-h-f.clientWidth==0;n.y>=r.y-a/2&&!v?(s.y=1,l.y=u*Math.abs((r.y-a/2-n.y)/a)):n.x>=r.x-i/2&&!x?(s.x=1,l.x=c*Math.abs((r.x-i/2-n.x)/i)):n.y<=o.y+a/2&&!g?(s.y=-1,l.y=u*Math.abs((n.y-a/2-o.y)/a)):n.x<=o.x+i/2&&!m&&(s.x=-1,l.x=c*Math.abs((n.x-i/2-o.x)/i)),this.interval&&(this.clear(),this.isAutoScrolling=!1),0===s.x&&0===s.y||(this.interval=setInterval(function(){t.isAutoScrolling=!0;var e={left:l.x*s.x,top:l.y*s.y};t.container.scrollTop+=e.top,t.container.scrollLeft+=e.left,t.onScrollCallback(e)},5))}}]),n}();var Z={axis:i.oneOf(["x","y","xy"]),contentWindow:i.any,disableAutoscroll:i.bool,distance:i.number,getContainer:i.func,getHelperDimensions:i.func,helperClass:i.string,helperContainer:i.oneOfType([i.func,"undefined"==typeof HTMLElement?i.any:i.instanceOf(HTMLElement)]),hideSortableGhost:i.bool,keyboardSortingTransitionDuration:i.number,lockAxis:i.string,lockOffset:i.oneOfType([i.number,i.string,i.arrayOf(i.oneOfType([i.number,i.string]))]),lockToContainerEdges:i.bool,onSortEnd:i.func,onSortMove:i.func,onSortOver:i.func,onSortStart:i.func,pressDelay:i.number,pressThreshold:i.number,shouldCancelStart:i.func,transitionDuration:i.number,updateBeforeSortStart:i.func,useDragHandle:i.bool,useWindowAsScrollContainer:i.bool},ee={axis:"y",disableAutoscroll:!1,distance:0,getHelperDimensions:function(e){var t=e.node;return{height:t.offsetHeight,width:t.offsetWidth}},hideSortableGhost:!0,lockOffset:"50%",lockToContainerEdges:!1,pressDelay:0,pressThreshold:5,shouldCancelStart:function(e){return-1!==[z.Input,z.Textarea,z.Select,z.Option,z.Button].indexOf(e.target.tagName)||!!W(e.target,function(e){return"true"===e.contentEditable})},transitionDuration:300,useWindowAsScrollContainer:!1},te=Object.keys(Z);function ne(t){var e,n,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return n=e=function(e){function n(e){var k,t;return u(this,n),k=y(this,g(n).call(this,e)),c(p(p(k)),"handleStart",function(e){var t=k.props,n=t.distance,o=t.shouldCancelStart;if(2!==e.button&&!o(e)){k.touched=!0,k.position=K(e);var r,i=W(e.target,function(e){return null!=e.sortableInfo});if(i&&i.sortableInfo&&k.nodeIsChild(i)&&!k.state.sorting){var a=k.props.useDragHandle,s=i.sortableInfo,l=s.index,c=s.collection;if(s.disabled)return;if(a&&!W(e.target,J))return;k.manager.active={collection:c,index:l},(r=e).touches&&r.touches.length||r.changedTouches&&r.changedTouches.length||e.target.tagName!==z.Anchor||e.preventDefault(),n||(0===k.props.pressDelay?k.handlePress(e):k.pressTimer=setTimeout(function(){return k.handlePress(e)},k.props.pressDelay))}}}),c(p(p(k)),"nodeIsChild",function(e){return e.sortableInfo.manager===k.manager}),c(p(p(k)),"handleMove",function(e){var t=k.props,n=t.distance,o=t.pressThreshold;if(!k.state.sorting&&k.touched&&!k._awaitingUpdateBeforeSortStart){var r=K(e),i={x:k.position.x-r.x,y:k.position.y-r.y},a=Math.abs(i.x)+Math.abs(i.y);k.delta=i,n||o&&!(o<=a)?n&&n<=a&&k.manager.isActive()&&k.handlePress(e):(clearTimeout(k.cancelTimer),k.cancelTimer=setTimeout(k.cancel,0))}}),c(p(p(k)),"handleEnd",function(){k.touched=!1,k.cancel()}),c(p(p(k)),"cancel",function(){var e=k.props.distance;k.state.sorting||(e||clearTimeout(k.pressTimer),k.manager.active=null)}),c(p(p(k)),"handlePress",function(C){try{var r=k.manager.getActive(),e=function(){if(r){var e=function(){var e,t,n,o,r,i,a=S.sortableInfo.index,s=(e=S,{bottom:P((t=window.getComputedStyle(e)).marginBottom),left:P(t.marginLeft),right:P(t.marginRight),top:P(t.marginTop)}),l=k.scrollContainer.getBoundingClientRect(),c=v({collection:O,index:a,node:S});if(k.node=S,k.margin=s,k.width=c.width,k.height=c.height,k.marginOffset={x:k.margin.left+k.margin.right,y:Math.max(k.margin.top,k.margin.bottom)},k.boundingClientRect=S.getBoundingClientRect(),k.containerBoundingRect=l,k.index=a,k.newIndex=a,k.axis={x:0<=g.indexOf("x"),y:0<=g.indexOf("y")},k.offsetEdge=_(S,k.container),k.initialOffset=K(T?I({},C,{pageX:k.boundingClientRect.left,pageY:k.boundingClientRect.top}):C),k.initialScroll={left:k.scrollContainer.scrollLeft,top:k.scrollContainer.scrollTop},k.initialWindowScroll={left:window.pageXOffset,top:window.pageYOffset},k.helper=k.helperContainer.appendChild((o="input, textarea, select, canvas, [contenteditable]",r=(n=S).querySelectorAll(o),i=n.cloneNode(!0),E(i.querySelectorAll(o)).forEach(function(e,t){"file"!==e.type&&(e.value=r[t].value),"radio"===e.type&&e.name&&(e.name="__sortableClone__".concat(e.name)),e.tagName===z.Canvas&&e.getContext("2d").drawImage(r[t],0,0)}),i)),N(k.helper,{boxSizing:"border-box",height:"".concat(k.height,"px"),left:"".concat(k.boundingClientRect.left-s.left,"px"),pointerEvents:"none",position:"fixed",top:"".concat(k.boundingClientRect.top-s.top,"px"),width:"".concat(k.width,"px")}),T&&k.helper.focus(),x&&N(k.sortableGhost=S,{opacity:0,visibility:"hidden"}),k.minTranslate={},k.maxTranslate={},T){var u=w?{top:0,left:0,width:k.contentWindow.innerWidth,height:k.contentWindow.innerHeight}:k.containerBoundingRect,f=u.top,d=u.left,h=u.width,p=f+u.height,y=d+h;k.axis.x&&(k.minTranslate.x=d-k.boundingClientRect.left,k.maxTranslate.x=y-(k.boundingClientRect.left+k.width)),k.axis.y&&(k.minTranslate.y=f-k.boundingClientRect.top,k.maxTranslate.y=p-(k.boundingClientRect.top+k.height))}else k.axis.x&&(k.minTranslate.x=(w?0:l.left)-k.boundingClientRect.left-k.width/2,k.maxTranslate.x=(w?k.contentWindow.innerWidth:l.left+l.width)-k.boundingClientRect.left-k.width/2),k.axis.y&&(k.minTranslate.y=(w?0:l.top)-k.boundingClientRect.top-k.height/2,k.maxTranslate.y=(w?k.contentWindow.innerHeight:l.top+l.height)-k.boundingClientRect.top-k.height/2);m&&m.split(" ").forEach(function(e){return k.helper.classList.add(e)}),k.listenerNode=C.touches?S:k.contentWindow,T?(k.listenerNode.addEventListener("wheel",k.handleKeyEnd,!0),k.listenerNode.addEventListener("mousedown",k.handleKeyEnd,!0),k.listenerNode.addEventListener("keydown",k.handleKeyDown)):(R.move.forEach(function(e){return k.listenerNode.addEventListener(e,k.handleSortMove,!1)}),R.end.forEach(function(e){return k.listenerNode.addEventListener(e,k.handleSortEnd,!1)})),k.setState({sorting:!0,sortingIndex:a}),b&&b({node:S,index:a,collection:O,isKeySorting:T},C),T&&k.keyMove(0)},t=k.props,g=t.axis,v=t.getHelperDimensions,m=t.helperClass,x=t.hideSortableGhost,n=t.updateBeforeSortStart,b=t.onSortStart,w=t.useWindowAsScrollContainer,S=r.node,O=r.collection,T=k.manager.isKeySorting,o=function(){if("function"==typeof n){k._awaitingUpdateBeforeSortStart=!0;var e=function(e,t){try{var n=e()}catch(e){return t(!0,e)}return n&&n.then?n.then(t.bind(null,!1),t.bind(null,!0)):t(!1,value)}(function(){var e=S.sortableInfo.index;return Promise.resolve(n({collection:O,index:e,node:S},C)).then(function(){})},function(e,t){if(k._awaitingUpdateBeforeSortStart=!1,e)throw t;return t});if(e&&e.then)return e.then(function(){})}}();return o&&o.then?o.then(e):e()}}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}),c(p(p(k)),"handleSortMove",function(e){var t=k.props.onSortMove;"function"==typeof e.preventDefault&&e.preventDefault(),k.updateHelperPosition(e),k.animateNodes(),k.autoscroll(),t&&t(e)}),c(p(p(k)),"handleSortEnd",function(e){var t=k.props,n=t.hideSortableGhost,o=t.onSortEnd,r=k.manager,i=r.active.collection,a=r.isKeySorting,s=k.manager.refs[i];k.listenerNode&&(a?(k.listenerNode.removeEventListener("wheel",k.handleKeyEnd,!0),k.listenerNode.removeEventListener("mousedown",k.handleKeyEnd,!0),k.listenerNode.removeEventListener("keydown",k.handleKeyDown)):(R.move.forEach(function(e){return k.listenerNode.removeEventListener(e,k.handleSortMove)}),R.end.forEach(function(e){return k.listenerNode.removeEventListener(e,k.handleSortEnd)}))),k.helper.parentNode.removeChild(k.helper),n&&k.sortableGhost&&N(k.sortableGhost,{opacity:"",visibility:""});for(var l=0,c=s.length;l<c;l++){var u=s[l],f=u.node;u.edgeOffset=null,A(f,u.boundingClientRect=null),M(f,null),u.translate=null}k.autoScroller.clear(),k.manager.active=null,k.manager.isKeySorting=!1,k.setState({sorting:!1,sortingIndex:null}),"function"==typeof o&&o({collection:i,newIndex:k.newIndex,oldIndex:k.index,isKeySorting:a},e),k.touched=!1}),c(p(p(k)),"autoscroll",function(){var e=k.props.disableAutoscroll,t=k.manager.isKeySorting;if(!e){if(t){var n=I({},k.translate),o=0,r=0;return k.axis.x&&(n.x=Math.min(k.maxTranslate.x,Math.max(k.minTranslate.x,k.translate.x)),o=k.translate.x-n.x),k.axis.y&&(n.y=Math.min(k.maxTranslate.y,Math.max(k.minTranslate.y,k.translate.y)),r=k.translate.y-n.y),k.translate=n,A(k.helper,k.translate),k.scrollContainer.scrollLeft+=o,void(k.scrollContainer.scrollTop+=r)}k.autoScroller.update({height:k.height,maxTranslate:k.maxTranslate,minTranslate:k.minTranslate,translate:k.translate,width:k.width})}}),c(p(p(k)),"onAutoScroll",function(e){k.translate.x+=e.left,k.translate.y+=e.top,k.animateNodes()}),c(p(p(k)),"handleKeyDown",function(e){var t=e.keyCode,n=k.props.shouldCancelStart;if((!k.manager.active||k.manager.isKeySorting)&&(k.manager.active||t===U&&!n(e)&&k.isValidSortingTarget(e)))switch(e.stopPropagation(),e.preventDefault(),t){case U:k.manager.active?k.keyDrop(e):k.keyLift(e);break;case V:case F:k.keyMove(1);break;case q:case Y:k.keyMove(-1);break;case X:k.newIndex=k.manager.active.index,k.keyDrop(e)}}),c(p(p(k)),"keyLift",function(e){var t=e.target,n=W(t,function(e){return null!=e.sortableInfo}).sortableInfo,o=n.index,r=n.collection;k.initialFocusedNode=t,k.manager.isKeySorting=!0,k.manager.active={index:o,collection:r},k.handlePress(e)}),c(p(p(k)),"keyMove",function(e){var t=k.manager.getOrderedRefs(),n=t[t.length-1].node.sortableInfo.index,o=k.newIndex+e,r=k.newIndex;if(!(o<0||n<o)){k.prevIndex=r,k.newIndex=o;var i,a,s,l=(i=k.newIndex,a=k.prevIndex,s=k.index,i<s&&a<i?i-1:s<i&&i<a?i+1:i),c=t.find(function(e){return e.node.sortableInfo.index===l}),u=c.node,f=k.containerScrollDelta,d=c.boundingClientRect||H(u,f),h=c.translate||{x:0,y:0},p=d.top+h.y-f.top,y=d.left+h.x-f.left,g=r<o,v=g&&k.axis.x?u.offsetWidth-k.width:0,m=g&&k.axis.y?u.offsetHeight-k.height:0;k.handleSortMove({pageX:y+v,pageY:p+m,ignoreTransition:0===e})}}),c(p(p(k)),"keyDrop",function(e){k.handleSortEnd(e),k.initialFocusedNode&&k.initialFocusedNode.focus()}),c(p(p(k)),"handleKeyEnd",function(e){k.manager.active&&k.keyDrop(e)}),c(p(p(k)),"isValidSortingTarget",function(e){var t=k.props.useDragHandle,n=e.target,o=W(n,function(e){return null!=e.sortableInfo});return o&&o.sortableInfo&&!o.sortableInfo.disabled&&(t?J(n):n.sortableInfo)}),w(!((t=e).distance&&t.pressDelay),"Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time."),k.state={},k.manager=new x,k.events={end:k.handleEnd,move:k.handleMove,start:k.handleStart},k}return m(n,e),d(n,[{key:"getChildContext",value:function(){return{manager:this.manager}}},{key:"componentDidMount",value:function(){var n=this,o=this.props.useWindowAsScrollContainer,e=this.getContainer();Promise.resolve(e).then(function(e){n.container=e,n.document=n.container.ownerDocument||document;var t=n.props.contentWindow||n.document.defaultView||window;n.contentWindow="function"==typeof t?t():t,n.scrollContainer=o?n.document.scrollingElement||n.document.documentElement:G(n.container)||n.container,n.autoScroller=new Q(n.scrollContainer,n.onAutoScroll),Object.keys(n.events).forEach(function(t){return R[t].forEach(function(e){return n.container.addEventListener(e,n.events[t],!1)})}),n.container.addEventListener("keydown",n.handleKeyDown)})}},{key:"componentWillUnmount",value:function(){var n=this;this.helper&&this.helper.parentNode&&this.helper.parentNode.removeChild(this.helper),this.container&&(Object.keys(this.events).forEach(function(t){return R[t].forEach(function(e){return n.container.removeEventListener(e,n.events[t])})}),this.container.removeEventListener("keydown",this.handleKeyDown))}},{key:"updateHelperPosition",value:function(e){var t=this.props,n=t.lockAxis,o=t.lockOffset,r=t.lockToContainerEdges,i=t.transitionDuration,a=t.keyboardSortingTransitionDuration,s=void 0===a?i:a,l=this.manager.isKeySorting,c=e.ignoreTransition,u=K(e),f={x:u.x-this.initialOffset.x,y:u.y-this.initialOffset.y};if(f.y-=window.pageYOffset-this.initialWindowScroll.top,f.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=f,r){var d=function(e){var t=e.height,n=e.width,o=e.lockOffset,r=Array.isArray(o)?o:[o,o];w(2===r.length,"lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given %s",o);var i=b(r,2),a=i[0],s=i[1];return[B({height:t,lockOffset:a,width:n}),B({height:t,lockOffset:s,width:n})]}({height:this.height,lockOffset:o,width:this.width}),h=b(d,2),p=h[0],y=h[1],g=this.width/2-p.x,v=this.height/2-p.y,m=this.width/2-y.x,x=this.height/2-y.y;f.x=L(this.minTranslate.x+g,this.maxTranslate.x-m,f.x),f.y=L(this.minTranslate.y+v,this.maxTranslate.y-x,f.y)}"x"===n?f.y=0:"y"===n&&(f.x=0),l&&s&&!c&&M(this.helper,s),A(this.helper,f)}},{key:"animateNodes",value:function(){var e=this.props,t=e.transitionDuration,n=e.hideSortableGhost,o=e.onSortOver,r=this.containerScrollDelta,i=this.windowScrollDelta,a=this.manager.getOrderedRefs(),s=this.offsetEdge.left+this.translate.x+r.left,l=this.offsetEdge.top+this.translate.y+r.top,c=this.manager.isKeySorting,u=this.newIndex;this.newIndex=null;for(var f=0,d=a.length;f<d;f++){var h=a[f].node,p=h.sortableInfo.index,y=h.offsetWidth,g=h.offsetHeight,v=this.height>g?g/2:this.height/2,m=this.width>y?y/2:this.width/2,x=c&&p>this.index&&p<=u,b=c&&p<this.index&&u<=p,w={x:0,y:0},S=a[f].edgeOffset;S||(S=_(h,this.container),a[f].edgeOffset=S,c&&(a[f].boundingClientRect=H(h,r)));var O=f<a.length-1&&a[f+1],T=0<f&&a[f-1];O&&!O.edgeOffset&&(O.edgeOffset=_(O.node,this.container),c&&(O.boundingClientRect=H(O.node,r))),p!==this.index?(t&&M(h,t),this.axis.x?this.axis.y?b||p<this.index&&(s+i.left-m<=S.left&&l+i.top<=S.top+v||l+i.top+v<=S.top)?(w.x=this.width+this.marginOffset.x,S.left+w.x>this.containerBoundingRect.width-m&&O&&(w.x=O.edgeOffset.left-S.left,w.y=O.edgeOffset.top-S.top),null===this.newIndex&&(this.newIndex=p)):(x||p>this.index&&(s+i.left+m>=S.left&&l+i.top+v>=S.top||l+i.top+v>=S.top+g))&&(w.x=-(this.width+this.marginOffset.x),S.left+w.x<this.containerBoundingRect.left+m&&T&&(w.x=T.edgeOffset.left-S.left,w.y=T.edgeOffset.top-S.top),this.newIndex=p):x||p>this.index&&s+i.left+m>=S.left?(w.x=-(this.width+this.marginOffset.x),this.newIndex=p):(b||p<this.index&&s+i.left<=S.left+m)&&(w.x=this.width+this.marginOffset.x,null==this.newIndex&&(this.newIndex=p)):this.axis.y&&(x||p>this.index&&l+i.top+v>=S.top?(w.y=-(this.height+this.marginOffset.y),this.newIndex=p):(b||p<this.index&&l+i.top<=S.top+v)&&(w.y=this.height+this.marginOffset.y,null==this.newIndex&&(this.newIndex=p))),A(h,w),a[f].translate=w):n&&N(this.sortableGhost=h,{opacity:0,visibility:"hidden"})}null==this.newIndex&&(this.newIndex=this.index),c&&(this.newIndex=u),o&&this.newIndex!==u&&o({collection:this.manager.active.collection,index:this.index,newIndex:this.newIndex,oldIndex:u})}},{key:"getWrappedInstance",value:function(){return w(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call"),this.refs.wrappedInstance}},{key:"getContainer",value:function(){var e=this.props.getContainer;return"function"!=typeof e?a.findDOMNode(this):e(o.withRef?this.getWrappedInstance():void 0)}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(t,s({ref:e},k(this.props,te)))}},{key:"helperContainer",get:function(){var e=this.props.helperContainer;return"function"==typeof e?e():this.props.helperContainer||this.document.body}},{key:"containerScrollDelta",get:function(){return this.props.useWindowAsScrollContainer?{left:0,top:0}:{left:this.scrollContainer.scrollLeft-this.initialScroll.left,top:this.scrollContainer.scrollTop-this.initialScroll.top}}},{key:"windowScrollDelta",get:function(){return{left:this.contentWindow.pageXOffset-this.initialWindowScroll.left,top:this.contentWindow.pageYOffset-this.initialWindowScroll.top}}}]),n}(r.Component),c(e,"displayName",j("sortableList",t)),c(e,"defaultProps",ee),c(e,"propTypes",Z),c(e,"childContextTypes",{manager:i.object.isRequired}),n}var oe={index:i.number.isRequired,collection:i.oneOfType([i.number,i.string]),disabled:i.bool},re=Object.keys(oe);function ie(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return u(this,t),y(this,g(t).apply(this,arguments))}return m(t,e),d(t,[{key:"componentDidMount",value:function(){this.register()}},{key:"componentDidUpdate",value:function(e){this.node&&(e.index!==this.props.index&&(this.node.sortableInfo.index=this.props.index),e.disabled!==this.props.disabled&&(this.node.sortableInfo.disabled=this.props.disabled)),e.collection!==this.props.collection&&(this.unregister(e.collection),this.register())}},{key:"componentWillUnmount",value:function(){this.unregister()}},{key:"register",value:function(){var e=this.props,t=e.collection,n=e.disabled,o=e.index,r=a.findDOMNode(this);r.sortableInfo={collection:t,disabled:n,index:o,manager:this.context.manager},this.node=r,this.ref={node:r},this.context.manager.add(t,this.ref)}},{key:"unregister",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.props.collection;this.context.manager.remove(e,this.ref)}},{key:"getWrappedInstance",value:function(){return w(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},k(this.props,re)))}}]),t}(r.Component),c(e,"displayName",j("sortableElement",n)),c(e,"contextTypes",{manager:i.object.isRequired}),c(e,"propTypes",oe),c(e,"defaultProps",{collection:0}),t}e.SortableContainer=ne,e.sortableContainer=ne,e.SortableElement=ie,e.sortableElement=ie,e.SortableHandle=$,e.sortableHandle=$,e.arrayMove=function(e,t,n){return(e=e.slice()).splice(n<0?e.length+n:n,0,e.splice(t,1)[0]),e},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
@@ -76,4 +76,4 @@ "author": {
     "css-loader": "^2.1.0",
-    "eslint": "^4.10.0",
-    "eslint-plugin-shopify": "^26.1.2",
+    "eslint": "^5.16.0",
+    "eslint-plugin-shopify": "^27.0.1",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -80,0 +80,0 @@ "html-webpack-plugin": "^2.16.1",

README.md

@@ -21,2 +21,3 @@ # <img src="https://user-images.githubusercontent.com/1416436/54170652-dfd59d80-444d-11e9-9c51-658638c0454b.png" width="400" alt="React Sortable HOC" />
 - **Touch support** 👌
+- **Accessible: supports keyboard sorting**
 
@@ -98,26 +99,27 @@ ## Installation
 
-| Property                   | Type                                                  | Default                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| :------------------------- | :---------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| axis                       | String                                                | `y`                                                                                                            | Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy`                                                                                                                                                                                                                                                                                                                                                                           |
-| lockAxis                   | String                                                |                                                                                                                | If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop. Possible values: `x` or `y`.                                                                                                                                                                                                                                                                                                             |
-| helperClass                | String                                                |                                                                                                                | You can provide a class you'd like to add to the sortable helper to add some styles to it                                                                                                                                                                                                                                                                                                                                                                              |
-| transitionDuration         | Number                                                | `300`                                                                                                          | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions                                                                                                                                                                                                                                                                                                                                                     |
-| 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`.                                                                                                                                                                                                                                     |
-| 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}, event)`                                                                                                                                                                                                                                                             |
-| onSortStart                | Function                                              |                                                                                                                | Callback that is invoked when sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                                                                                                                                             |
-| onSortMove                 | Function                                              |                                                                                                                | Callback that is invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                         |
-| onSortOver                 | Function                                              |                                                                                                                | Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                              |
-| onSortEnd                  | Function                                              |                                                                                                                | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                                            |
-| useDragHandle              | Boolean                                               | `false`                                                                                                        | If you're using the `SortableHandle` HOC, set this to `true`                                                                                                                                                                                                                                                                                                                                                                                                           |
-| useWindowAsScrollContainer | Boolean                                               | `false`                                                                                                        | If you want, you can set the `window` as the scrolling container                                                                                                                                                                                                                                                                                                                                                                                                       |
-| hideSortableGhost          | Boolean                                               | `true`                                                                                                         | Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.                                                                                                                                                                                                                                           |
-| lockToContainerEdges       | Boolean                                               | `false`                                                                                                        | You can lock movement of the sortable element to it's parent `SortableContainer`                                                                                                                                                                                                                                                                                                                                                                                       |
-| lockOffset                 | `OffsetValue`\* \| [`OffsetValue`\*, `OffsetValue`\*] | `"50%"`                                                                                                        | When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the _top_ of the container vs the _bottom_, you may also pass in an `array` (For example: `["0%", "100%"]`).                                      |
-| getContainer               | Function                                              |                                                                                                                | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. |
-| getHelperDimensions        | Function                                              | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) | Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) for more details                                                                                                                                                                                                     |
-| helperContainer            | HTMLElement \| Function                               | `document.body`                                                                                                | By default, the cloned sortable helper is appended to the document body. Use this prop to specify a different container for the sortable clone to be appended to. Accepts an `HTMLElement` or a function returning an `HTMLElement` that will be invoked before right before sorting begins                                                                                                                                                                            |
-| disableAutoscroll          | Boolean                                               | `false`                                                                                                        | Disables autoscrolling while dragging                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| Property                          | Type                                                      | Default                                                                                                                                                                                                                                                                                                                                                                                                                            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| :-------------------------------- | :-------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axis                              | String                                                    | `y`                                                                                                                                                                                                                                                                                                                                                                                                                                | Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy`                                                                                                                                                                                                                                                                                                                                                                           |
+| lockAxis                          | String                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                    | If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop. Possible values: `x` or `y`.                                                                                                                                                                                                                                                                                                             |
+| helperClass                       | String                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                    | You can provide a class you'd like to add to the sortable helper to add some styles to it                                                                                                                                                                                                                                                                                                                                                                              |
+| transitionDuration                | Number                                                    | `300`                                                                                                                                                                                                                                                                                                                                                                                                                              | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions                                                                                                                                                                                                                                                                                                                                                     |
+| keyboardSortingTransitionDuration | Number                                                    | `transitionDuration`                                                                                                                                                                                                                                                                                                                                                                                                               | The duration of the transition when the helper is shifted during keyboard sorting. Set this to `0` if you'd like to disable transitions for the keyboard sorting helper. Defaults to the value set for `transitionDuration` if undefined                                                                                                                                                                                                                               |
+| 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`.                                                                                                                                                                                                                                     |
+| 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}, 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)`                                                                                                                                                                                                                                                                                                                                                                                         |
+| onSortOver                        | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                              |
+| onSortEnd                         | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection, isKeySorting}, e)`                                                                                                                                                                                                                                                                                                                                                              |
+| useDragHandle                     | Boolean                                                   | `false`                                                                                                                                                                                                                                                                                                                                                                                                                            | If you're using the `SortableHandle` HOC, set this to `true`                                                                                                                                                                                                                                                                                                                                                                                                           |
+| useWindowAsScrollContainer        | Boolean                                                   | `false`                                                                                                                                                                                                                                                                                                                                                                                                                            | If you want, you can set the `window` as the scrolling container                                                                                                                                                                                                                                                                                                                                                                                                       |
+| hideSortableGhost                 | Boolean                                                   | `true`                                                                                                                                                                                                                                                                                                                                                                                                                             | Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.                                                                                                                                                                                                                                           |
+| lockToContainerEdges              | Boolean                                                   | `false`                                                                                                                                                                                                                                                                                                                                                                                                                            | You can lock movement of the sortable element to it's parent `SortableContainer`                                                                                                                                                                                                                                                                                                                                                                                       |
+| lockOffset                        | `OffsetValue`\* &#124; [`OffsetValue`\*, `OffsetValue`\*] | "50%"`| When`lockToContainerEdges`is set to`true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent`SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the _top_ of the container vs the _bottom_, you may also pass in an`array`(For example:`["0%", "100%"]`). |
+| getContainer                      | Function                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                    | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. |
+| getHelperDimensions               | Function                                                  | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77)                                                                                                                                                                                                                                                                                                                     | Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) for more details                                                                                                                                                                                                     |
+| helperContainer                   | HTMLElement &#124; Function                               | `document.body`                                                                                                                                                                                                                                                                                                                                                                                                                    | By default, the cloned sortable helper is appended to the document body. Use this prop to specify a different container for the sortable clone to be appended to. Accepts an `HTMLElement` or a function returning an `HTMLElement` that will be invoked before right before sorting begins                                                                                                                                                                            |
+| disableAutoscroll                 | Boolean                                                   | `false`                                                                                                                                                                                                                                                                                                                                                                                                                            | Disables autoscrolling while dragging                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
@@ -146,2 +148,8 @@ \* `OffsetValue` can either be a finite `Number` or a `String` made up of a number and a unit (`px` or `%`).
 
+### Accessibility
+
+React Sortable HOC supports keyboard sorting out of the box. To enable it, make sure your `SortableElement` or `SortableHandle` is focusable. This can be done by setting `tabIndex={0}` on the outermost HTML node rendered by the component you're enhancing with `SortableElement` or `SortableHandle`.
+
+Once an item is focused/tabbed to, pressing `SPACE` picks it up, `ArrowUp` or `ArrowLeft` moves it one place backward in the list, `ArrowDown` or `ArrowRight` moves items one place forward in the list, pressing `SPACE` again drops the item in its new position. Pressing `ESC` before the item is dropped will cancel the sort operations.
+
 ### Grid support
@@ -192,3 +200,3 @@
 
-If believe you've found an issue, please [report it](https://github.com/clauderic/react-sortable-hoc/issues) along with any relevant details to reproduce it. The easiest way to do so is to fork the `react-sortable-hoc` basic setup sandbox on  [CodeSandbox](https://codesandbox.io/s/o104x95y86):
+If believe you've found an issue, please [report it](https://github.com/clauderic/react-sortable-hoc/issues) along with any relevant details to reproduce it. The easiest way to do so is to fork the `react-sortable-hoc` basic setup sandbox on [CodeSandbox](https://codesandbox.io/s/o104x95y86):
 
@@ -195,0 +203,0 @@ [![Edit o104x95y86](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/o104x95y86)

types/index.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
   collection: Offset;
+  isKeySorting: boolean;
 }
@@ -25,2 +26,3 @@
   collection: Offset;
+  isKeySorting: boolean;
 }
@@ -60,2 +62,3 @@
   transitionDuration?: number;
+  keyboardSortingTransitionDuration?: number;
   pressDelay?: number;
@@ -62,0 +65,0 @@ pressThreshold?: number;

No alert changes

Improved metrics

Total package byte prevSize

740949

increased by5.8%

Lines of code

4834

increased by18.95%

Number of lines in readme file

208

increased by4%

No dependency changes