intergalactic 15.111.0-prerelease.0 → 15.112.0-prerelease.0

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

@@ -17,24 +17,27 @@ 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_x1q2k_gg_.__draggable_x1q2k_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_x1q2k_gg_.__draggable_x1q2k_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_x1q2k_gg_.__draggable_x1q2k_gg_:hover::before{display:block}}.___SDraggable_x1q2k_gg_.__draggable_x1q2k_gg_.__hideHoverEffect_x1q2k_gg_::before{display:none}.___SDraggable_x1q2k_gg_._placement_right_x1q2k_gg_::before{right:0}.___SDraggable_x1q2k_gg_._placement_bottom_x1q2k_gg_::before{bottom:0}.___SDraggable_x1q2k_gg_._placement_left_x1q2k_gg_::before{left:0}.___SDraggable_x1q2k_gg_._placement_top_x1q2k_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_x1q2k_gg_._placement_bottom_x1q2k_gg_::before{left:0;width:100%;height:16px}.___SDraggable_x1q2k_gg_._placement_left_x1q2k_gg_::before,.___SDraggable_x1q2k_gg_._placement_right_x1q2k_gg_::before{top:0;width:16px;height:100%}.___SDropZone_x1q2k_gg_{position:relative}.___SDraggable_x1q2k_gg_.__dropPreview_x1q2k_gg_,.___SDropZone_x1q2k_gg_.__dropPreview_x1q2k_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_x1q2k_gg_.__dark_x1q2k_gg_.__dropPreview_x1q2k_gg_,.___SDropZone_x1q2k_gg_.__dark_x1q2k_gg_.__dropPreview_x1q2k_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_x1q2k_gg_:focus{outline:0}.___SDraggable_x1q2k_gg_.__keyboardFocused_x1q2k_gg_:focus{box-shadow:none}.___SDraggable_x1q2k_gg_.__keyboardFocused_x1q2k_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_x1q2k_gg_.__keyboardDragging_x1q2k_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_x1q2k_gg_.__keyboardDragging_x1q2k_gg_.__hideHoverEffect_x1q2k_gg_::before,.___SDraggable_x1q2k_gg_.__keyboardDragging_x1q2k_gg_::before{display:block}.___SDraggable_x1q2k_gg_.__keyboardDragging_x1q2k_gg_.__reversedScaling_x1q2k_gg_{scale:.95}.___SDraggable_x1q2k_gg_.__animatedScaling_x1q2k_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_x1q2k_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_x1q2k_gg_{transition:none}}" /*__inner_css_end__*/, "x1q2k_gg_") /*__reshadow_css_end__*/, {
-  "__SDraggable": "___SDraggable_x1q2k_gg_",
-  "_placement_top": "_placement_top_x1q2k_gg_",
-  "_placement_right": "_placement_right_x1q2k_gg_",
-  "_placement_left": "_placement_left_x1q2k_gg_",
-  "_placement_bottom": "_placement_bottom_x1q2k_gg_",
-  "__SDropZone": "___SDropZone_x1q2k_gg_",
-  "_dropPreview": "__dropPreview_x1q2k_gg_",
-  "_dark": "__dark_x1q2k_gg_",
-  "_keyboardFocused": "__keyboardFocused_x1q2k_gg_",
-  "_keyboardDragging": "__keyboardDragging_x1q2k_gg_",
-  "_reversedScaling": "__reversedScaling_x1q2k_gg_",
-  "_animatedScaling": "__animatedScaling_x1q2k_gg_",
-  "__SA11yHint": "___SA11yHint_x1q2k_gg_",
-  "_draggable": "__draggable_x1q2k_gg_",
-  "_hideHoverEffect": "__hideHoverEffect_x1q2k_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDraggable_qj0ea_gg_.__draggable_qj0ea_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_qj0ea_gg_.__draggable_qj0ea_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_qj0ea_gg_.__draggable_qj0ea_gg_:hover::before{display:block}}.___SDraggable_qj0ea_gg_.__draggable_qj0ea_gg_.__hideHoverEffect_qj0ea_gg_::before{display:none}.___SDraggable_qj0ea_gg_._placement_right_qj0ea_gg_::before{right:0}.___SDraggable_qj0ea_gg_._placement_bottom_qj0ea_gg_::before{bottom:0}.___SDraggable_qj0ea_gg_._placement_left_qj0ea_gg_::before{left:0}.___SDraggable_qj0ea_gg_._placement_top_qj0ea_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_qj0ea_gg_._placement_bottom_qj0ea_gg_::before{left:0;width:100%;height:16px}.___SDraggable_qj0ea_gg_._placement_left_qj0ea_gg_::before,.___SDraggable_qj0ea_gg_._placement_right_qj0ea_gg_::before{top:0;width:16px;height:100%}.___SDropZone_qj0ea_gg_{position:relative}.___SDraggable_qj0ea_gg_.__dropPreview_qj0ea_gg_,.___SDropZone_qj0ea_gg_.__dropPreview_qj0ea_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_qj0ea_gg_.__dark_qj0ea_gg_.__dropPreview_qj0ea_gg_,.___SDropZone_qj0ea_gg_.__dark_qj0ea_gg_.__dropPreview_qj0ea_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_qj0ea_gg_:focus{outline:0}.___SDraggable_qj0ea_gg_.__keyboardFocused_qj0ea_gg_:focus{box-shadow:none}.___SDraggable_qj0ea_gg_.__keyboardFocused_qj0ea_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_qj0ea_gg_.__keyboardDragging_qj0ea_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_qj0ea_gg_.__keyboardDragging_qj0ea_gg_.__hideHoverEffect_qj0ea_gg_::before,.___SDraggable_qj0ea_gg_.__keyboardDragging_qj0ea_gg_::before{display:block}.___SDraggable_qj0ea_gg_.__keyboardDragging_qj0ea_gg_.__reversedScaling_qj0ea_gg_{scale:.95}.___SDraggable_qj0ea_gg_.__animatedScaling_qj0ea_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_qj0ea_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_qj0ea_gg_{transition:none}}" /*__inner_css_end__*/, "qj0ea_gg_") /*__reshadow_css_end__*/, {
+  "__SDraggable": "___SDraggable_qj0ea_gg_",
+  "_placement_top": "_placement_top_qj0ea_gg_",
+  "_placement_right": "_placement_right_qj0ea_gg_",
+  "_placement_left": "_placement_left_qj0ea_gg_",
+  "_placement_bottom": "_placement_bottom_qj0ea_gg_",
+  "__SDropZone": "___SDropZone_qj0ea_gg_",
+  "_dropPreview": "__dropPreview_qj0ea_gg_",
+  "_dark": "__dark_qj0ea_gg_",
+  "_keyboardFocused": "__keyboardFocused_qj0ea_gg_",
+  "_keyboardDragging": "__keyboardDragging_qj0ea_gg_",
+  "_reversedScaling": "__reversedScaling_qj0ea_gg_",
+  "_animatedScaling": "__animatedScaling_qj0ea_gg_",
+  "__SA11yHint": "___SA11yHint_qj0ea_gg_",
+  "_draggable": "__draggable_qj0ea_gg_",
+  "_hideHoverEffect": "__hideHoverEffect_qj0ea_gg_"
 });
 import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
+import { ScreenReaderOnly } from 'intergalactic/utils/lib/ScreenReaderOnly';
+import uniqueIDEnhance from 'intergalactic/utils/lib/uniqueID';
+import canUseDOM from 'intergalactic/utils/lib/canUseDOM';
 var noop = function noop() {
   /* do nothing */
 };
@@ -63,12 +66,13 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       animatedScaling: null,
       reversedScaling: false
     });
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "clearA11yHintTimeout", 0);
     _defineProperty(_assertThisInitialized(_this), "handleItemDragStart", function (index) {
       var items = _this.state.items;
       var currentItem = items[index];
       if (!currentItem) return;
       var itemText = currentItem.node.getAttribute('aria-label') || currentItem.node.textContent || "".concat(index + 1);
-      var getI18nText = _this.asProps.getI18nText;
       var zoneName = currentItem.zoneName;
       var zonedItems = !zoneName ? items : items.filter(function (i) {
         return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
@@ -77,7 +81,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       var itemPosition = zonedItems.findIndex(function (i) {
         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', {
+      _this.setA11yHint(zoneName ? 'grabbedWithZone' : 'grabbed', {
         itemText: itemText,
         itemPosition: itemPosition + 1,
         itemsCount: itemsCount,
@@ -85,7 +89,6 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       });
       _this.setState(function (prevState) {
         return {
-          a11yHint: a11yHint,
           dragging: {
             index: index,
             initialItemsRects: prevState.items.map(function (item) {
@@ -105,19 +108,18 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemDragOver", function (event) {
-      var _this$state$dragging;
       event.preventDefault();
-      var getI18nText = _this.asProps.getI18nText;
       var _this$state = _this.state,
         items = _this$state.items,
-        dragging = _this$state.dragging;
+        dragging = _this$state.dragging,
+        dragOver = _this$state.dragOver;
       if (!dragging) return;
       var itemIndex = dragging.initialItemsRects.findIndex(function (rect) {
         return rect && event.clientX > rect.x && event.clientX < rect.x + rect.width && event.clientY > rect.y && event.clientY < rect.y + rect.height;
       });
       var currentItem = items[itemIndex];
       var draggingItem = items[dragging.index];
-      if (!currentItem || !draggingItem) return;
+      if (!currentItem || !draggingItem || itemIndex === dragOver) return;
       var node = currentItem.isDropZone ? draggingItem.node : currentItem.node;
       var itemText = node.getAttribute('aria-label') || node.textContent || "".concat(itemIndex + 1);
       var zoneName = currentItem.zoneName;
@@ -129,41 +131,29 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         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, {
+      _this.setA11yHint(i18nKey, {
         itemText: itemText,
         itemPosition: itemPosition + 1,
         itemsCount: itemsCount,
         zoneName: zoneName || ''
       });
-      if (itemIndex === ((_this$state$dragging = _this.state.dragging) === null || _this$state$dragging === void 0 ? void 0 : _this$state$dragging.index)) _this.setState({
-        dragOver: null,
-        a11yHint: a11yHint
-      });else _this.setState({
-        dragOver: itemIndex,
-        a11yHint: a11yHint
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getSwapPreview", function (index) {
-      var _this$state$items$pre;
-      if (!_this.state.dragging) return null;
-      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;
+      _this.setState({
+        dragOver: itemIndex
+      }, _this.swapElements);
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemDrop", function (index) {
-      var _this$asProps = _this.asProps,
-        onDnD = _this$asProps.onDnD,
-        getI18nText = _this$asProps.getI18nText;
+    _defineProperty(_assertThisInitialized(_this), "handleItemDrop", function () {
+      var onDnD = _this.asProps.onDnD;
       if (!onDnD) return;
       var _this$state2 = _this.state,
         items = _this$state2.items,
-        dragging = _this$state2.dragging;
+        dragging = _this$state2.dragging,
+        dragOver = _this$state2.dragOver;
       if (!dragging) return;
-      var currentItem = items[index];
+      var currentItem = dragOver !== null ? items[dragOver] : items[dragging.index];
       var draggingItem = items[dragging.index];
       if (!currentItem || !draggingItem) return;
       var node = currentItem.isDropZone ? draggingItem.node : currentItem.node;
-      var itemText = node.getAttribute('aria-label') || node.textContent || "".concat(index + 1);
+      var itemText = node.getAttribute('aria-label') || node.textContent || "".concat((dragOver !== null && dragOver !== void 0 ? dragOver : dragging.index) + 1);
       var zoneName = currentItem.zoneName;
       var zonedItems = !zoneName ? items : items.filter(function (i) {
         return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
@@ -173,14 +163,13 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         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, {
+      _this.setA11yHint(i18nKey, {
         itemText: itemText,
         itemPosition: itemPosition + 1,
         itemsCount: itemsCount,
         zoneName: zoneName || ''
       });
       _this.setState({
-        a11yHint: a11yHint,
         dragging: null,
         dragOver: null,
         keyboardDraggingIndex: null,
@@ -194,16 +183,16 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
             fromId: fromNode.id,
             fromIndex: dragging.index,
             toId: currentItem.id,
-            toIndex: index
+            toIndex: dragOver !== null && dragOver !== void 0 ? dragOver : dragging.index
           });
         }
       }
       if (!currentItem.draggingAllowed) {
-        var _this$asProps$onInser, _this$asProps2, _items$index;
-        (_this$asProps$onInser = (_this$asProps2 = _this.asProps).onInsertDroppable) === null || _this$asProps$onInser === void 0 ? void 0 : _this$asProps$onInser.call(_this$asProps2, (_items$index = items[dragging.index]) === null || _items$index === void 0 ? void 0 : _items$index.children, currentItem.children);
+        var _this$asProps$onInser, _this$asProps, _items$index;
+        (_this$asProps$onInser = (_this$asProps = _this.asProps).onInsertDroppable) === null || _this$asProps$onInser === void 0 ? void 0 : _this$asProps$onInser.call(_this$asProps, (_items$index = items[dragging.index]) === null || _items$index === void 0 ? void 0 : _items$index.children, currentItem.children);
       } else {
-        var _this$asProps$onSwapD, _this$asProps3, _items$index2;
-        (_this$asProps$onSwapD = (_this$asProps3 = _this.asProps).onSwapDraggable) === null || _this$asProps$onSwapD === void 0 ? void 0 : _this$asProps$onSwapD.call(_this$asProps3, (_items$index2 = items[dragging.index]) === null || _items$index2 === void 0 ? void 0 : _items$index2.children, currentItem.children);
+        var _this$asProps$onSwapD, _this$asProps2, _items$index2;
+        (_this$asProps$onSwapD = (_this$asProps2 = _this.asProps).onSwapDraggable) === null || _this$asProps$onSwapD === void 0 ? void 0 : _this$asProps$onSwapD.call(_this$asProps2, (_items$index2 = items[dragging.index]) === null || _items$index2 === void 0 ? void 0 : _items$index2.children, currentItem.children);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemDragEnter", function (event) {
@@ -244,15 +233,44 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         });
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "swapElements", function () {
+      var _dragging$index, _items$draggingIndex, _items$dragOver;
+      var _this$state3 = _this.state,
+        items = _this$state3.items,
+        dragging = _this$state3.dragging,
+        dragOver = _this$state3.dragOver;
+      var draggingIndex = (_dragging$index = dragging === null || dragging === void 0 ? void 0 : dragging.index) !== null && _dragging$index !== void 0 ? _dragging$index : null;
+      if (draggingIndex === null || dragOver === null) return;
+      var node = (_items$draggingIndex = items[draggingIndex]) === null || _items$draggingIndex === void 0 ? void 0 : _items$draggingIndex.node;
+      var dragNode = (_items$dragOver = items[dragOver]) === null || _items$dragOver === void 0 ? void 0 : _items$dragOver.node;
+      if (!node || !dragNode) return;
+      if (draggingIndex === dragOver) {
+        var _items$node, _items, _this$containerRef$cu;
+        var nextDragNode = (_items$node = (_items = items[dragOver + 1]) === null || _items === void 0 ? void 0 : _items.node) !== null && _items$node !== void 0 ? _items$node : null;
+        (_this$containerRef$cu = _this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.insertBefore(node, nextDragNode);
+      } else if (draggingIndex > dragOver) {
+        var _this$containerRef$cu2;
+        (_this$containerRef$cu2 = _this.containerRef.current) === null || _this$containerRef$cu2 === void 0 ? void 0 : _this$containerRef$cu2.insertBefore(node, dragNode);
+      } else {
+        var _this$containerRef$cu3;
+        (_this$containerRef$cu3 = _this.containerRef.current) === null || _this$containerRef$cu3 === void 0 ? void 0 : _this$containerRef$cu3.insertBefore(node, dragNode.nextSibling);
+      }
+      node.focus();
+    });
     _defineProperty(_assertThisInitialized(_this), "handleItemKeyDown", function (event, index) {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (_this.state.dragging && event.key === 'Tab') {
+        event.preventDefault();
+        event.stopPropagation();
+      }
       if (event.key === ' ') {
         var _this$state$items$ind;
         event.preventDefault();
         event.stopPropagation();
         if (_this.state.dragging) {
-          var dragOver = _this.state.dragOver;
-          var prevIndex = _this.state.dragging.index;
-          _this.handleItemDrop(index);
+          _this.handleItemDrop();
           _this.setState({
             dragging: null,
             dragOver: null,
@@ -260,12 +278,6 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
             animatedScaling: index,
             hideHoverEffect: true
           });
-          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({
@@ -278,53 +290,80 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       } else if (event.key === 'Escape' && _this.state.dragging) {
         event.preventDefault();
         event.stopPropagation();
-        var getI18nText = _this.asProps.getI18nText;
-        var a11yHint = getI18nText('discarded');
+        _this.setA11yHint('discarded');
         _this.setState({
-          a11yHint: a11yHint,
           dragging: null,
           dragOver: null,
           keyboardDraggingIndex: null,
           hideHoverEffect: true
         });
+        var items = _this.state.items;
+        for (var i = items.length - 1; i >= 0; i--) {
+          var _items$i, _items$node2, _items2;
+          var node = (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i.node;
+          var prevNode = (_items$node2 = (_items2 = items[i + 1]) === null || _items2 === void 0 ? void 0 : _items2.node) !== null && _items$node2 !== void 0 ? _items$node2 : null;
+          if (node) {
+            var _this$containerRef$cu4;
+            (_this$containerRef$cu4 = _this.containerRef.current) === null || _this$containerRef$cu4 === void 0 ? void 0 : _this$containerRef$cu4.insertBefore(node, prevNode);
+          }
+        }
+        if (event.target instanceof HTMLElement) {
+          event.target.focus();
+        }
         return false;
-      } else if (event.key.startsWith('Arrow')) {
+      } else if (event.key.startsWith('Arrow') && _this.state.dragging) {
         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;
+        var _node = event.currentTarget;
+        if (!_node || _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 _this$containerRef$cu5;
+          if (!(_node instanceof HTMLElement) || _node !== document.activeElement) return;
+          var rects = [];
+          var nodeRect = {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+          };
+          (_this$containerRef$cu5 = _this.containerRef.current) === null || _this$containerRef$cu5 === void 0 ? void 0 : _this$containerRef$cu5.childNodes.forEach(function (childNode, index) {
+            if (childNode instanceof HTMLElement) {
+              var rect = childNode.getBoundingClientRect();
+              var roundedRect = {
+                top: Math.round(rect.top),
+                right: Math.round(rect.right),
+                bottom: Math.round(rect.bottom),
+                left: Math.round(rect.left)
+              };
+              rects.push(roundedRect);
+              if (childNode === _node) {
+                nodeRect = roundedRect;
+              }
+            }
           });
-          var nextIndex = findNextRectangleIndex(rects, rects[index], event.key);
-          if (nextIndex === -1) {
-            var indexDiff = event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? -1 : 1;
-            nextIndex = index + indexDiff;
+          var nextIndex = findNextRectangleIndex(rects, nodeRect, event.key);
+          if (nextIndex === -1) return false;
+          if (_node && _this.state.dragging !== null) {
+            _this.setA11yHint('grabbing', {
+              itemPosition: nextIndex + 1,
+              itemsCount: _this.state.items.length
+            });
+            _this.setState({
+              dragOver: nextIndex
+            }, function () {
+              _this.swapElements();
+            });
           }
-          (_this$state$items$nex = _this.state.items[nextIndex]) === null || _this$state$items$nex === void 0 ? void 0 : _this$state$items$nex.node.focus();
+          return false;
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemFocus", function (index) {
+    _defineProperty(_assertThisInitialized(_this), "handleItemFocus", function () {
       if (!_this.state.dragging) return;
-      _this.setState({
-        dragOver: index,
-        keyboardDraggingIndex: index
-      });
       _this.updateItemScaling();
     });
     _defineProperty(_assertThisInitialized(_this), "makeItemDragStartHandler", function (index) {
@@ -332,16 +371,6 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
         return _this.handleItemDragStart(index);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "makeItemDropHandler", function (index) {
-      return function () {
-        return _this.handleItemDrop(index);
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "makeItemFocusHandler", function (index) {
-      return function () {
-        return _this.handleItemFocus(index);
-      };
-    });
     _defineProperty(_assertThisInitialized(_this), "makeItemKeyDownHandler", function (index) {
       return function (event) {
         return _this.handleItemKeyDown(event, index);
@@ -401,41 +430,42 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       if (itemIndex === -1 || typeof itemIndex !== 'number') return undefined;
       return itemIndex;
     });
+    _defineProperty(_assertThisInitialized(_this), "setA11yHint", function (key) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      clearTimeout(_this.clearA11yHintTimeout);
+      var getI18nText = _this.asProps.getI18nText;
+      _this.setState({
+        a11yHint: getI18nText(key, options)
+      });
+      if ((key === 'dropped' || key === 'discarded') && canUseDOM()) {
+        _this.clearA11yHintTimeout = window.setTimeout(function () {
+          _this.setState({
+            a11yHint: null
+          });
+        }, 2000);
+      }
+    });
     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) {
+      var uid = this.asProps.uid;
       return {
+        uid: uid,
         index: index,
         onDragStart: this.makeItemDragStartHandler(index),
         onDragEnd: this.handleItemDragEnd,
         onDragOver: this.handleItemDragOver,
         onDragEnter: this.handleItemDragEnter,
-        onDrop: this.makeItemDropHandler(index),
+        onDrop: this.handleItemDrop,
         onMouseMove: this.handleItemMouseMove,
         onKeyDown: this.makeItemKeyDownHandler(index),
-        onFocus: this.makeItemFocusHandler(index),
+        onFocus: this.handleItemFocus,
         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,
         animatedScaling: index === this.state.animatedScaling
       };
@@ -450,6 +480,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      clearTimeout(this.clearA11yHintTimeout);
       document.removeEventListener('keydown', this.handlePageKeyDown, {
         capture: true
       });
@@ -459,7 +490,7 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps) {
       if (prevProps.customFocus !== this.asProps.customFocus) {
         var itemIndex = this.getCustomFocusItemIndex(this.asProps.customFocus);
-        if (this.state.items[itemIndex]) this.handleItemFocus(itemIndex);
+        if (this.state.items[itemIndex]) this.handleItemFocus();
       }
     }
   }, {
@@ -470,23 +501,36 @@ var DragAndDropRoot = /*#__PURE__*/function (_Component) {
       var attach = this.attach,
         detach = this.detach;
       var SA11yHint = 'div';
-      var a11yHint = this.state.a11yHint;
+      var _this$state4 = this.state,
+        a11yHint = _this$state4.a11yHint,
+        dragging = _this$state4.dragging;
       var context = {
         attach: attach,
         detach: detach
       };
+      var _this$asProps3 = this.asProps,
+        getI18nText = _this$asProps3.getI18nText,
+        uid = _this$asProps3.uid;
       return _ref4 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(DragAndDropContext.Provider, {
         value: context
       }, a11yHint && /*#__PURE__*/React.createElement(SA11yHint, _ref4.cn("SA11yHint", {
         "role": 'alert',
         "aria-live": 'assertive'
-      }), a11yHint), /*#__PURE__*/React.createElement(Box, _assignProps({}, _ref)));
+      }), a11yHint), /*#__PURE__*/React.createElement(Box, _assignProps({
+        "role": 'group',
+        "ref": this.containerRef
+      }, _ref)), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref4.cn("ScreenReaderOnly", {
+        "id": "describe-draggable-".concat(uid),
+        "aria-hidden": 'true'
+      }), getI18nText('describe', {
+        control: 'Space'
+      })));
     }
   }]);
   return DragAndDropRoot;
 }(Component);
 _defineProperty(DragAndDropRoot, "displayName", 'DragAndDrop');
-_defineProperty(DragAndDropRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(DragAndDropRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhance()]);
 _defineProperty(DragAndDropRoot, "defaultProps", {
   theme: 'default',
   i18n: localizedMessages,
@@ -508,12 +552,12 @@ var Draggable = function Draggable(props) {
     noDrag = _props$noDrag === void 0 ? false : _props$noDrag,
     index = props.index,
     children = props.children,
-    swapPreview = props.swapPreview,
     Children = props.Children,
     id = props.id,
     zoneName = props.zoneName,
     _props$isDropZone = props.isDropZone,
-    isDropZone = _props$isDropZone === void 0 ? false : _props$isDropZone;
+    isDropZone = _props$isDropZone === void 0 ? false : _props$isDropZone,
+    uid = props.uid;
   var resolvedChildren = React.useMemo(function () {
     return typeof children === 'function' ? children(props) : children;
   }, [children, props]);
@@ -534,8 +578,10 @@ var Draggable = function Draggable(props) {
   return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SDraggable, _ref5.cn("SDraggable", _objectSpread({}, _assignProps2({
     "ref": ref,
     "draggable": !noDrag,
-    "placement": placement
-  }, _ref2))), swapPreview ? swapPreview : /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})));
+    "placement": placement,
+    "role": 'group',
+    "aria-describedby": "describe-draggable-".concat(uid)
+  }, _ref2))), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})));
 };
 Draggable.enhance = [keyboardFocusEnhance()];
 var findNextRectangleIndex = function findNextRectangleIndex(rectangles, current, direction) {
@@ -596,7 +642,8 @@ var DropZone = function DropZone(props) {
   var styles = props.styles;
   return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SDropZone, _ref6.cn("SDropZone", _objectSpread({}, _assignProps3({
     "noDrag": true,
-    "isDropZone": true
+    "isDropZone": true,
+    "aria-describedby": null
   }, _ref3))));
 };
 var DragAndDrop = createComponent(DragAndDropRoot, {