intergalactic 15.80.0-prerelease.0 → 15.81.0-prerelease.0

package/drag-and-drop/lib/cjs/style/drag-and-drop.shadow.css

@@ -6,96 +6,135 @@ SDraggable[draggable] {
   -webkit-user-select: none;
   user-select: none;
 
-  &::after {
+
+  &::before {
     content: '';
     position: absolute;
     display: none;
-    background-image: radial-gradient(
-      circle at center,
-      var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,
-      transparent 0
-    );
+    pointer-events: none;
+    background-image: radial-gradient(circle at center,
+    var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,
+    transparent 0);
     background-size: 6px 6px;
     background-position: 2px 2px;
     background-repeat: repeat repeat;
   }
 
-  &:hover::after {
+  &:hover::before {
     display: block;
   }
-  &[hideHoverEffect]::after {
+
+  &[hideHoverEffect]::before {
     display: none;
   }
 }
 
-SDraggable[placement='top']::after {
+SDraggable[placement='top']::before {
   top: 0;
   left: 0;
   width: 100%;
   height: 20px;
 }
 
-SDraggable[placement='top'] {
-  padding-top: var(--intergalactic-spacing-4x, 16px);
-}
-
 SDraggable[placement='right'] {
-  padding-right: var(--intergalactic-spacing-4x, 16px);
-  &::after {
+
+  &::before {
     right: 0;
   }
 }
 
 SDraggable[placement='bottom'] {
-  padding-bottom: var(--intergalactic-spacing-4x, 16px);
 
-  &::after {
+  &::before {
     bottom: 0;
   }
 }
 
 SDraggable[placement='left'] {
-  padding-left: var(--intergalactic-spacing-4x, 16px);
 
-  &::after {
+  &::before {
     left: 0;
   }
 }
 
-SDraggable[placement='top']::after,
-SDraggable[placement='right']::after,
-SDraggable[placement='left']::after {
+SDraggable[placement='top']::before,
+SDraggable[placement='right']::before,
+SDraggable[placement='left']::before {
   top: 0;
 }
 
-SDraggable[placement='top']::after,
-SDraggable[placement='bottom']::after {
+SDraggable[placement='top']::before,
+SDraggable[placement='bottom']::before {
   left: 0;
   width: 100%;
   height: 16px;
 }
 
-SDraggable[placement='right']::after,
-SDraggable[placement='left']::after {
+SDraggable[placement='right']::before,
+SDraggable[placement='left']::before {
   top: 0;
   width: 16px;
   height: 100%;
 }
 
 SDropZone {
-  border: 1px dashed var(--intergalactic-border-primary, #c4c7cf);
-  border-radius: var(--intergalactic-surface-rounded, 6px);
+  position: relative;
 }
 
 SDropZone[dropPreview],
 SDraggable[dropPreview] {
   background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
 }
+
+
 SDropZone[dark][dropPreview],
 SDraggable[dark][dropPreview] {
   background-color: var(--intergalactic-bg-primary-invert-active, #484a54);
 }
 
+SDraggable:focus {
+  outline: none;
+}
+
+SDraggable[keyboardFocused]:focus {
+  box-shadow: none;
+}
+
+SDraggable[keyboardFocused]:focus:after {
+  position: absolute;
+  display: block;
+  content: '';
+  inset: 3px;
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  pointer-events: none;
+}
+
+
+SDraggable[keyboardDragging] {
+  scale: 1.1;
+
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+  box-shadow: var(--intergalactic-box-shadow-dnd, 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16)) !important;
+
+
+  &::before {
+    display: block;
+  }
+
+  &[hideHoverEffect]::before {
+    display: block;
+  }
+}
+
+SDraggable[keyboardDragging][reversedScaling] {
+  scale: 0.95;
+}
+
+SDraggable[animatedScaling] {
+  transition: all calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+}
+
+
 SA11yHint {
   position: absolute;
   /* disable-tokens-validator */
@@ -104,3 +143,9 @@ SA11yHint {
   width: 1px;
   clip: rect(0 0 0 0);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  SDraggable {
+    transition: none;
+  }
+}

package/drag-and-drop/lib/es6/DragAndDrop.js

@@ -17,19 +17,24 @@ import { localizedMessages } from './translations/__intergalactic-dynamic-locale
 import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import useEnhancedEffect from 'intergalactic/utils/lib/use/useEnhancedEffect';
 /*__reshadow-styles__:"./style/drag-and-drop.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDraggable_cczy6_gg_.__draggable_cczy6_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_cczy6_gg_.__draggable_cczy6_gg_::after{content:\"\";position:absolute;display:none;background-image:radial-gradient(circle at center,var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,transparent 0);background-size:6px 6px;background-position:2px 2px;background-repeat:repeat repeat}@media (hover:hover){.___SDraggable_cczy6_gg_.__draggable_cczy6_gg_:hover::after{display:block}}.___SDraggable_cczy6_gg_.__draggable_cczy6_gg_.__hideHoverEffect_cczy6_gg_::after{display:none}.___SDraggable_cczy6_gg_._placement_top_cczy6_gg_{padding-top:var(--intergalactic-spacing-4x, 16px)}.___SDraggable_cczy6_gg_._placement_right_cczy6_gg_{padding-right:var(--intergalactic-spacing-4x, 16px)}.___SDraggable_cczy6_gg_._placement_right_cczy6_gg_::after{right:0}.___SDraggable_cczy6_gg_._placement_bottom_cczy6_gg_{padding-bottom:var(--intergalactic-spacing-4x, 16px)}.___SDraggable_cczy6_gg_._placement_bottom_cczy6_gg_::after{bottom:0}.___SDraggable_cczy6_gg_._placement_left_cczy6_gg_{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SDraggable_cczy6_gg_._placement_left_cczy6_gg_::after{left:0}.___SDraggable_cczy6_gg_._placement_top_cczy6_gg_::after{top:0;left:0;width:100%;height:16px}.___SDraggable_cczy6_gg_._placement_bottom_cczy6_gg_::after{left:0;width:100%;height:16px}.___SDraggable_cczy6_gg_._placement_left_cczy6_gg_::after,.___SDraggable_cczy6_gg_._placement_right_cczy6_gg_::after{top:0;width:16px;height:100%}.___SDropZone_cczy6_gg_{border:1px dashed var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-surface-rounded, 6px)}.___SDraggable_cczy6_gg_.__dropPreview_cczy6_gg_,.___SDropZone_cczy6_gg_.__dropPreview_cczy6_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_cczy6_gg_.__dark_cczy6_gg_.__dropPreview_cczy6_gg_,.___SDropZone_cczy6_gg_.__dark_cczy6_gg_.__dropPreview_cczy6_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SA11yHint_cczy6_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}" /*__inner_css_end__*/, "cczy6_gg_") /*__reshadow_css_end__*/, {
-  "__SDraggable": "___SDraggable_cczy6_gg_",
-  "_placement_top": "_placement_top_cczy6_gg_",
-  "_placement_right": "_placement_right_cczy6_gg_",
-  "_placement_left": "_placement_left_cczy6_gg_",
-  "_placement_bottom": "_placement_bottom_cczy6_gg_",
-  "__SDropZone": "___SDropZone_cczy6_gg_",
-  "_dropPreview": "__dropPreview_cczy6_gg_",
-  "_dark": "__dark_cczy6_gg_",
-  "__SA11yHint": "___SA11yHint_cczy6_gg_",
-  "_draggable": "__draggable_cczy6_gg_",
-  "_hideHoverEffect": "__hideHoverEffect_cczy6_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDraggable_1ff86_gg_.__draggable_1ff86_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_1ff86_gg_.__draggable_1ff86_gg_::before{content:\"\";position:absolute;display:none;pointer-events:none;background-image:radial-gradient(circle at center,var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,transparent 0);background-size:6px 6px;background-position:2px 2px;background-repeat:repeat repeat}@media (hover:hover){.___SDraggable_1ff86_gg_.__draggable_1ff86_gg_:hover::before{display:block}}.___SDraggable_1ff86_gg_.__draggable_1ff86_gg_.__hideHoverEffect_1ff86_gg_::before{display:none}.___SDraggable_1ff86_gg_._placement_right_1ff86_gg_::before{right:0}.___SDraggable_1ff86_gg_._placement_bottom_1ff86_gg_::before{bottom:0}.___SDraggable_1ff86_gg_._placement_left_1ff86_gg_::before{left:0}.___SDraggable_1ff86_gg_._placement_top_1ff86_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_1ff86_gg_._placement_bottom_1ff86_gg_::before{left:0;width:100%;height:16px}.___SDraggable_1ff86_gg_._placement_left_1ff86_gg_::before,.___SDraggable_1ff86_gg_._placement_right_1ff86_gg_::before{top:0;width:16px;height:100%}.___SDropZone_1ff86_gg_{position:relative}.___SDraggable_1ff86_gg_.__dropPreview_1ff86_gg_,.___SDropZone_1ff86_gg_.__dropPreview_1ff86_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_1ff86_gg_.__dark_1ff86_gg_.__dropPreview_1ff86_gg_,.___SDropZone_1ff86_gg_.__dark_1ff86_gg_.__dropPreview_1ff86_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_1ff86_gg_:focus{outline:0}.___SDraggable_1ff86_gg_.__keyboardFocused_1ff86_gg_:focus{box-shadow:none}.___SDraggable_1ff86_gg_.__keyboardFocused_1ff86_gg_:focus:after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none}.___SDraggable_1ff86_gg_.__keyboardDragging_1ff86_gg_{scale:1.1;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);box-shadow:var(--intergalactic-box-shadow-dnd, 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16))!important}.___SDraggable_1ff86_gg_.__keyboardDragging_1ff86_gg_.__hideHoverEffect_1ff86_gg_::before,.___SDraggable_1ff86_gg_.__keyboardDragging_1ff86_gg_::before{display:block}.___SDraggable_1ff86_gg_.__keyboardDragging_1ff86_gg_.__reversedScaling_1ff86_gg_{scale:.95}.___SDraggable_1ff86_gg_.__animatedScaling_1ff86_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_1ff86_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_1ff86_gg_{transition:none}}" /*__inner_css_end__*/, "1ff86_gg_") /*__reshadow_css_end__*/, {
+  "__SDraggable": "___SDraggable_1ff86_gg_",
+  "_placement_top": "_placement_top_1ff86_gg_",
+  "_placement_right": "_placement_right_1ff86_gg_",
+  "_placement_left": "_placement_left_1ff86_gg_",
+  "_placement_bottom": "_placement_bottom_1ff86_gg_",
+  "__SDropZone": "___SDropZone_1ff86_gg_",
+  "_dropPreview": "__dropPreview_1ff86_gg_",
+  "_dark": "__dark_1ff86_gg_",
+  "_keyboardFocused": "__keyboardFocused_1ff86_gg_",
+  "_keyboardDragging": "__keyboardDragging_1ff86_gg_",
+  "_reversedScaling": "__reversedScaling_1ff86_gg_",
+  "_animatedScaling": "__animatedScaling_1ff86_gg_",
+  "__SA11yHint": "___SA11yHint_1ff86_gg_",
+  "_draggable": "__draggable_1ff86_gg_",
+  "_hideHoverEffect": "__hideHoverEffect_1ff86_gg_"
 });
+import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
 var noop = function noop() {
   /* do nothing */
 };
@@ -50,10 +55,13 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "state", {
       items: [],
       dragging: null,
-      previewSwap: null,
+      dragOver: null,
       hideHoverEffect: false,
       // https://stackoverflow.com/questions/67118739/hover-effect-reset-when-hovering-over-other-letters
-      a11yHint: null
+      a11yHint: null,
+      keyboardDraggingIndex: null,
+      animatedScaling: null,
+      reversedScaling: false
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemDragStart", function (index) {
       var items = _this.state.items;
@@ -67,7 +75,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       });
       var itemsCount = zonedItems.length;
       var itemPosition = zonedItems.findIndex(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
+        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
       });
       var a11yHint = getI18nText(zoneName ? 'grabbedWithZone' : 'grabbed', {
         itemText: itemText,
@@ -91,8 +99,9 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       event.preventDefault();
       _this.setState({
         dragging: null,
-        previewSwap: null
-        // hideHoverEffect: true
+        dragOver: null,
+        reversedScaling: false,
+        keyboardDraggingIndex: null
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemDragOver", function (event) {
@@ -117,7 +126,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       });
       var itemsCount = zonedItems.length;
       var itemPosition = zonedItems.findIndex(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
+        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
       });
       var i18nKey = !zoneName ? 'grabbing' : currentItem.isDropZone ? 'grabbingJustWithZone' : 'grabbingFullWithZone';
       var a11yHint = getI18nText(i18nKey, {
@@ -127,20 +136,19 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         zoneName: zoneName || ''
       });
       if (itemIndex === ((_this$state$dragging = _this.state.dragging) === null || _this$state$dragging === void 0 ? void 0 : _this$state$dragging.index)) _this.setState({
-        previewSwap: null,
+        dragOver: null,
         a11yHint: a11yHint
       });else _this.setState({
-        previewSwap: itemIndex,
+        dragOver: itemIndex,
         a11yHint: a11yHint
       });
     });
     _defineProperty(_assertThisInitialized(_this), "getSwapPreview", function (index) {
-      var _this$state$items$_th, _this$state$items$_th2, _this$state$items$_th3;
+      var _this$state$items$pre;
       if (!_this.state.dragging) return null;
-      if (_this.state.previewSwap === null) return null;
-      if (((_this$state$items$_th = _this.state.items[_this.state.previewSwap]) === null || _this$state$items$_th === void 0 ? void 0 : _this$state$items$_th.draggingAllowed) === false) return null;
-      if (_this.state.previewSwap === index) return (_this$state$items$_th2 = _this.state.items[_this.state.dragging.index]) === null || _this$state$items$_th2 === void 0 ? void 0 : _this$state$items$_th2.children;
-      if (_this.state.previewSwap !== null && index === _this.state.dragging.index) return (_this$state$items$_th3 = _this.state.items[_this.state.previewSwap]) === null || _this$state$items$_th3 === void 0 ? void 0 : _this$state$items$_th3.children;
+      var previewIndex = _this.preview[index];
+      if (typeof previewIndex !== 'number') return null;
+      return (_this$state$items$pre = _this.state.items[previewIndex]) === null || _this$state$items$pre === void 0 ? void 0 : _this$state$items$pre.children;
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemDrop", function (index) {
       var _this$asProps = _this.asProps,
@@ -162,7 +170,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       });
       var itemsCount = zonedItems.length;
       var itemPosition = zonedItems.findIndex(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
+        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
       });
       var i18nKey = !zoneName ? 'dropped' : currentItem.isDropZone ? 'droppedJustWithZone' : 'droppedFullWithZone';
       var a11yHint = getI18nText(i18nKey, {
@@ -174,8 +182,10 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       _this.setState({
         a11yHint: a11yHint,
         dragging: null,
-        previewSwap: null,
-        hideHoverEffect: true
+        dragOver: null,
+        keyboardDraggingIndex: null,
+        hideHoverEffect: true,
+        reversedScaling: false
       });
       if (dragging && items[dragging.index]) {
         var fromNode = items[dragging.index];
@@ -205,24 +215,64 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         hideHoverEffect: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "updateItemScaling", function () {
+      var _this$state$items$;
+      var firstItemNode = (_this$state$items$ = _this.state.items[0]) === null || _this$state$items$ === void 0 ? void 0 : _this$state$items$.node;
+      if (!firstItemNode) return;
+      if (_this.state.reversedScaling) return;
+      var firstItemRect = firstItemNode.getBoundingClientRect();
+      var reversedScaling = false;
+      var parent = firstItemNode.parentElement;
+      while (parent && parent !== document.body) {
+        var computedStyle = getComputedStyle(parent);
+        var rect = parent.getBoundingClientRect();
+        if (computedStyle.overflow !== 'visible') {
+          if (rect.left >= firstItemRect.left || rect.right <= firstItemRect.right || rect.top >= firstItemRect.top || rect.bottom <= firstItemRect.bottom) {
+            reversedScaling = true;
+            break;
+          }
+        } else {
+          if (rect.left < firstItemRect.left && rect.right > firstItemRect.right && rect.top < firstItemRect.top && rect.bottom > firstItemRect.bottom) {
+            break;
+          }
+        }
+        parent = parent.parentElement;
+      }
+      if (_this.state.reversedScaling !== reversedScaling) {
+        _this.setState({
+          reversedScaling: reversedScaling
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "handleItemKeyDown", function (event, index) {
       if (event.key === ' ') {
+        var _this$state$items$ind;
         event.preventDefault();
         event.stopPropagation();
         if (_this.state.dragging) {
-          var previewSwap = _this.state.previewSwap;
+          var dragOver = _this.state.dragOver;
+          var prevIndex = _this.state.dragging.index;
           _this.handleItemDrop(index);
           _this.setState({
             dragging: null,
-            previewSwap: null,
+            dragOver: null,
+            keyboardDraggingIndex: null,
+            animatedScaling: index,
             hideHoverEffect: true
           });
-          setTimeout(function () {
-            var _this$state$items;
-            (_this$state$items = _this.state.items[previewSwap]) === null || _this$state$items === void 0 ? void 0 : _this$state$items.node.focus();
-          }, 0);
-        } else {
+          requestAnimationFrame(function () {
+            var _this$state$items$pre2, _this$state$items;
+            var prevIndexNode = (_this$state$items$pre2 = _this.state.items[prevIndex]) === null || _this$state$items$pre2 === void 0 ? void 0 : _this$state$items$pre2.node;
+            if (prevIndexNode !== document.activeElement) return;
+            (_this$state$items = _this.state.items[dragOver]) === null || _this$state$items === void 0 ? void 0 : _this$state$items.node.focus();
+          });
+        } else if ((_this$state$items$ind = _this.state.items[index]) !== null && _this$state$items$ind !== void 0 && _this$state$items$ind.draggingAllowed) {
           _this.handleItemDragStart(index);
+          _this.setState({
+            keyboardDraggingIndex: index,
+            animatedScaling: index
+          });
+          _this.updateItemScaling();
         }
         return false;
       } else if (event.key === 'Escape' && _this.state.dragging) {
@@ -233,17 +283,49 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         _this.setState({
           a11yHint: a11yHint,
           dragging: null,
-          previewSwap: null,
+          dragOver: null,
+          keyboardDraggingIndex: null,
           hideHoverEffect: true
         });
         return false;
+      } else if (event.key.startsWith('Arrow')) {
+        if (_this.state.animatedScaling !== null) {
+          _this.setState({
+            animatedScaling: null
+          });
+        }
+        var item = _this.state.items[index];
+        if ((item === null || item === void 0 ? void 0 : item.node) !== document.activeElement) return;
+        event.preventDefault();
+        requestAnimationFrame(function () {
+          var _this$state$items$nex;
+          if ((item === null || item === void 0 ? void 0 : item.node) !== document.activeElement) return;
+          var rects = _this.state.items.map(function (item) {
+            return item === null || item === void 0 ? void 0 : item.node.getBoundingClientRect();
+          }).map(function (rect) {
+            return {
+              top: Math.round(rect.top),
+              right: Math.round(rect.right),
+              bottom: Math.round(rect.bottom),
+              left: Math.round(rect.left)
+            };
+          });
+          var nextIndex = findNextRectangleIndex(rects, rects[index], event.key);
+          if (nextIndex === -1) {
+            var indexDiff = event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? -1 : 1;
+            nextIndex = index + indexDiff;
+          }
+          (_this$state$items$nex = _this.state.items[nextIndex]) === null || _this$state$items$nex === void 0 ? void 0 : _this$state$items$nex.node.focus();
+        });
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemFocus", function (index) {
       if (!_this.state.dragging) return;
       _this.setState({
-        previewSwap: index
+        dragOver: index,
+        keyboardDraggingIndex: index
       });
+      _this.updateItemScaling();
     });
     _defineProperty(_assertThisInitialized(_this), "makeItemDragStartHandler", function (index) {
       return function () {
@@ -313,7 +395,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       var itemIndex = customFocus;
       if (typeof itemIndex === 'string') {
         itemIndex = _this.state.items.findIndex(function (item) {
-          return (item === null || item === void 0 ? void 0 : item.id) === itemIndex;
+          return (item === null || item === void 0 ? void 0 : item.id) === customFocus;
         });
       }
       if (itemIndex === -1 || typeof itemIndex !== 'number') return undefined;
@@ -322,6 +404,21 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(DragAndDropRoot, [{
+    key: "preview",
+    get: function get() {
+      var _this$state$dragging2;
+      var dragging = (_this$state$dragging2 = this.state.dragging) === null || _this$state$dragging2 === void 0 ? void 0 : _this$state$dragging2.index;
+      var dragOver = this.state.dragOver;
+      if (typeof dragging !== 'number' || typeof dragOver !== 'number') return {};
+      var result = {};
+      var shift = dragging < dragOver ? 1 : -1;
+      for (var i = dragging; i !== dragOver; i += shift) {
+        result[i] = i + shift;
+      }
+      result[dragOver] = dragging;
+      return result;
+    }
+  }, {
     key: "getDraggableProps",
     value: function getDraggableProps(_, index) {
       return {
@@ -334,10 +431,13 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         onMouseMove: this.handleItemMouseMove,
         onKeyDown: this.makeItemKeyDownHandler(index),
         onFocus: this.makeItemFocusHandler(index),
-        dropPreview: index === this.state.previewSwap,
+        dropPreview: index === this.state.dragOver,
+        keyboardDragging: index === this.state.keyboardDraggingIndex,
+        reversedScaling: this.state.reversedScaling,
         dark: this.asProps.theme === 'dark',
         swapPreview: this.getSwapPreview(index),
-        hideHoverEffect: this.state.hideHoverEffect
+        hideHoverEffect: this.state.hideHoverEffect,
+        animatedScaling: index === this.state.animatedScaling
       };
     }
   }, {
@@ -434,10 +534,61 @@ var Draggable = function Draggable(props) {
   return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SDraggable, _ref5.cn("SDraggable", _objectSpread({}, _assignProps2({
     "ref": ref,
     "draggable": !noDrag,
-    "tabIndex": 0,
     "placement": placement
   }, _ref2))), swapPreview ? swapPreview : /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})));
 };
+Draggable.enhance = [keyboardFocusEnhance()];
+var findNextRectangleIndex = function findNextRectangleIndex(rectangles, current, direction) {
+  var candidate = null;
+  var minDistance = Infinity;
+  for (var i = 0; i < rectangles.length; i++) {
+    var rect = rectangles[i];
+    if (!rect) continue;
+    if (rect === current) continue;
+    var verticallyOverlaps = current.top <= rect.bottom && current.bottom >= rect.top;
+    var horizontallyOverlaps = current.left <= rect.right && current.right >= rect.left;
+    if (!verticallyOverlaps && !horizontallyOverlaps) continue;
+    switch (direction) {
+      case 'ArrowRight':
+        {
+          if (!verticallyOverlaps) continue;
+          var distance = rect.left - current.right;
+          if (distance < 0 || distance >= minDistance) continue;
+          candidate = rect;
+          minDistance = distance;
+          break;
+        }
+      case 'ArrowLeft':
+        {
+          if (!verticallyOverlaps) continue;
+          var _distance = current.left - rect.right;
+          if (_distance < 0 || _distance >= minDistance) continue;
+          candidate = rect;
+          minDistance = _distance;
+          break;
+        }
+      case 'ArrowUp':
+        {
+          if (!horizontallyOverlaps) continue;
+          var _distance2 = current.top - rect.bottom;
+          if (_distance2 < 0 || _distance2 >= minDistance) continue;
+          candidate = rect;
+          minDistance = _distance2;
+          break;
+        }
+      case 'ArrowDown':
+        {
+          if (!horizontallyOverlaps) continue;
+          var _distance3 = rect.top - current.bottom;
+          if (_distance3 < 0 || _distance3 >= minDistance) continue;
+          candidate = rect;
+          minDistance = _distance3;
+          break;
+        }
+    }
+  }
+  return rectangles.indexOf(candidate);
+};
 var DropZone = function DropZone(props) {
   var _ref3 = arguments[0],
     _ref6;